DEV Community: ShatilKhan The latest articles on DEV Community by ShatilKhan (@siren). https://dev.to/siren https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F558537%2F82f48ad4-591e-4a86-816a-10250ca198cb.jpg DEV Community: ShatilKhan https://dev.to/siren en Moneyshot#1: Month 1 till I make $1k MRR ShatilKhan Sat, 21 Feb 2026 20:11:23 +0000 https://dev.to/siren/moneyshot1-month-1-till-i-make-1k-mrr-2o4a https://dev.to/siren/moneyshot1-month-1-till-i-make-1k-mrr-2o4a <p>Hello again Internet!<br> I am writing after a long while and this blog is a bit different from my engineering blogs. This is more of a practical blog of some goals I am going to set for myself, which I had previously done years ago for coding or learning to code &amp; I guess and it has paid off and I wanted to do that again but with a different goal in mind.</p> <p>I made this video back in 2023 probably and around the end of 2023 or 2022 I think where I kind of publicly posted that I'd code every day</p> <p><iframe width="710" height="399" src="proxy.php?url=https://www.youtube.com/embed/kakDtPbE7gg"> </iframe> </p> <p>which I mean I didn't code every single day but you know I'll share the GitHub repo or GitHub profile after I had posted that video,</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcqj4xr3e01u7lg3o30kz.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcqj4xr3e01u7lg3o30kz.png" alt=" " width="800" height="217"></a></p> <p>and I actually committed to it, and I actually started doing some projects and contributing to some open source projects. And I did get to work with pretty amazing people. I did get to work on a project for AWS Open Source, which obviously none of them sprouted into success, or none of them sprouted into major things. But what happened was after that the following year I got my first job and then I have been working professionally with startups and agencies since then So yeah it didn't make sense at that moment when I actually posted the video that I code every day but it now makes sense that I did commit to something and then I started doing it. And I'd done that previously years ago as well when I first started to code. and when I first started I used to do digital art as well so when I first did digital art ,there's thing called Inktoberfest where you would like draw something for the entire month of October and I also did Hacktoberfest where you would code or contribute some code to some repositories (open source repositories) for the entire month of October and these things didn't mean that you would probably be successful at any specific coding area or any specific skilled area but the goal was to be consecutive and consecutively keep doing it without worrying about the results.</p> <p>After I started working professionally as a developer since the last two years, the software industry as a whole has shifted drastically that I've experienced. I do three part-time jobs. One of them is an office job. And I think I'm doing more work than any developer would have done three or four years ago. that's mainly due to AI and AI has enabled people to do more but it has been demanding from people more as well. The one thing that I have looked and I have experienced is that the overall outlook of everyone and every industrial mechanism has changed from improving or focused on results to just making money So the key mechanism of the AI industry or the software industry as a whole has been to make money obviously. But there was a video from GitHub around 5 or 6 years ago, you can watch it on YouTube, it was basically an advertisement for GitHub, but not a typical advertisement. It wasn't advertised in a way like GitHub as a product, but rather it advertised code as a means to connect different parts of society. So, the video was mainly about a girl making a prosthetics arm for her brother, and in another part of the world, somebody else used that code to build something else that they needed.<br> With the current industrial standards, I feel like that wave has faded. Like actually developing something for betterment, actually trying to, I mean people are still developing things to help people, but most of those things are more focused on profitability. So, they're helping people, but they're also focused on actually making money. And even though I say that the outlook has changed, I don't mean that in a negative way, but moreover it has become much easier for a single person, like for example, Open Claw or Peter Steinberger, people like those to make money or make profitable businesses out of their skillsets. And obviously not everyone can do it, you need a lot of expertise and global experience, but there's also people who have been building, indie hackers who have been developing for years. And I wanna build shitty products that's also one goal is to build a lot of shitty products and have a lot of fucking fun doing it for people, for myself, but mostly to enjoy the process that I have enjoyed before just building things not just software but anything.</p> <p>If money is the main goal or like the standards of the industry have changed to making money or making it easier for people to run businesses then let's do that. Let's just go for that and make as much as possible so that we can actually try it out. I've already said that I tried out everything. I tried out art, doing art and doing programming and going all in into it because it was so interesting. And right now this trend of building stuff is very intriguing. So that's why I feel like I should challenge myself, but this time with a specific number in mind to get to that goal.</p> <p>This goal is much different from the previous goals I set for myself. The primary one was to just learn things. Learning to code, learning to draw, learning anything basically. And the secondary goal was to earn something, earn some money or some monetary means by doing what I love or doing what I'm good at, which was the skills I had previously learned from my first goal.</p> <p>This time I am gonna set a specific amount or specific target in mind for the goal which is the 1k MRR which means that it's not just like a specific amount per month but more of it needs to be be set in some rules and those rules I do need to follow through. So the first and foremost would be that it obviously needs to be a MRR because it needs to be a monthly recurring review. It's not just I need to make that amount once and then the goal is set. It wouldn't work like that.It would need to be a sustainable MRR or a recurring revenue per month. That is why I set the goal with the $1000 in mind.</p> <p>These are the rules I’m setting for myself. The product or the way I’m going to reach that monetary target, will be by my own means. So it cannot be any part-time job, any full-time job, or something I’m doing for my employer. I am going to be the owner of the product.</p> <p>I’m also keeping the field a bit broad, and maybe I’ll broaden it later. Primarily because I don’t want to focus only on SaaS products. I can do more than SaaS, and I don’t have to confine myself to that. I could do research projects. I know how to program a microcontroller or a Raspberry Pi, I can figure it out. I’ve worked with Arduino and a bit of IoT. I’ve done basic UI/UX design and graphic design. So I can use any of those skills.</p> <p>That’s one rule. I’d say that’s the second rule—the first is that it needs to be my own thing, not from an employer. The second is that I can utilize any of the skills I have to produce that amount. The third is using any tools at my disposal. That means not banning AI, but using it efficiently, not as much as possible, because that could ruin things. I try to avoid using AI for everything, and instead use it where it makes sense, where it’s better than doing it myself. For example, I do some QA tasks with AI using specific tools, cloud code, and other workflows.</p> <p>Another rule is that working with clients is allowed, as long as I’m the one building the projects. I’ll still own them, even if I’m supplying a service. So it could be like a SaaS, but even if it’s not, there's IoT-based projects or other things I can produce.</p> <p>The final step would be to broaden the horizon later on, maybe investing in something beyond software or hardware. I’m not sure yet, but it’s something I think I could explore.</p> <p>That’s the primary direction I’m setting for myself, and that’s what I’m going to follow. I’m not sure how far I’ll get, but I’m going to keep going toward this goal.</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flb7h03qhll8st15vq1pr.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flb7h03qhll8st15vq1pr.png" alt=" " width="800" height="336"></a></p> devjournal saas sideprojects startup Check out my new blog on MCP! ShatilKhan Wed, 20 Aug 2025 10:02:39 +0000 https://dev.to/siren/-2n5 https://dev.to/siren/-2n5 <div class="ltag__link"> <a href="proxy.php?url=/siren" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F558537%2F82f48ad4-591e-4a86-816a-10250ca198cb.jpg" alt="siren"> </div> </a> <a href="proxy.php?url=https://dev.to/siren/building-my-first-mcp-server-using-swagger-openapitools-38kg" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Building my first Local MCP server using Swagger &amp; OpenAPITools</h2> <h3>ShatilKhan ・ Aug 3</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#mcp</span> <span class="ltag__link__tag">#openapi</span> <span class="ltag__link__tag">#softwareengineering</span> <span class="ltag__link__tag">#tooling</span> </div> </div> </a> </div> mcp openapi softwareengineering tooling Building my first Local MCP server using Swagger & OpenAPITools ShatilKhan Sun, 03 Aug 2025 14:30:00 +0000 https://dev.to/siren/building-my-first-mcp-server-using-swagger-openapitools-38kg https://dev.to/siren/building-my-first-mcp-server-using-swagger-openapitools-38kg <p>Let's be real: enterprise software can feel like a labyrinth. Our app at AnchorBlock, <a href="proxy.php?url=https://anchorbooks.ai/its-magic" rel="noopener noreferrer">AnchorBooks.ai</a>, is a beast with hundreds of features for finance and bookkeeping. It's powerful, but finding what you need can mean a dozen clicks through a maze of menus.</p> <p>So, I got this crazy idea: what if you could just talk to the app? What if you could say, "Hey, create an invoice for client X with these items," and it would just... happen?</p> <p>That's the dream, right? To give our app a brain. This is the story of how I took the first step, moving from a complex API to a simple chat prompt. In this first part of our two-part series, we're going full mad-scientist-in-the-lab. We'll build a local tool server using the Model Context Protocol (MCP) and hook it up to GitHub Copilot, proving we can control our entire backend with plain English.</p> <p>Let's get our hands dirty.</p> <p>Step 1: The Rosetta Stone for AI - Turning an API into Tools</p> <p>An AI model, as smart as it is, has no idea what a POST /api/item request is. You can't just give it your backend URL and hope for the best. It needs a manual, an instruction book that clearly explains what's possible.</p> <p>For us, that manual was our Swagger (OpenAPI) documentation. With over 249 endpoints, our NestJS backend was well-documented, which turned out to be the secret ingredient. Each endpoint definition, with its inputs and outputs, was a potential "skill" we could teach our AI.</p> <p>But was I going to manually write a wrapper script for all 249 endpoints? Absolutely not. My laziness (I call it efficiency) led me to a game-changing tool: <a href="proxy.php?url=https://openapitools.com/" rel="noopener noreferrer">OpenAPITools</a>.</p> <p>Think of OpenAPITools as a magic translator. You feed it your swagger.json file, and it spits out a ready-to-use MCP server structure, complete with Python scripts for every single API endpoint. It's like giving the AI a universal remote for our app, and OpenAPITools just programmed all the buttons for us.</p> <p>Here’s a quick look at that workflow:</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqakpfjyx1gotadypzpt0.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqakpfjyx1gotadypzpt0.png" alt="mcp flow" width="694" height="1317"></a></p> <p>Step 2: A Peek Under the Hood: The Anatomy of a Single Tool</p> <p>Let's zoom in on one example to see how this actually works. Say we want to create a new item in our inventory.</p> <p>In our NestJS backend, we have a CreateItemDto that defines exactly what data is needed. It's decorated with @ApiProperty for Swagger, which is key.</p> <p>The Source of Truth: dto/create-item.dto.ts</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz9oqyox9c7vf8425bx62.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz9oqyox9c7vf8425bx62.png" alt="item dto" width="800" height="540"></a></p> <p>When OpenAPITools reads this, it generates two crucial files:</p> <ol> <li>The AI's Cheat Sheet: tools.json (Snippet) This file is the manifest. It tells the AI, "Hey, there's a tool called ItemCreator. It needs a name, a type, a price, and so on." The schema here is a direct translation of our DTO.</li> </ol> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo90e5aut21y8uqj18r57.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo90e5aut21y8uqj18r57.png" alt="toolsjson" width="800" height="837"></a></p> <ol> <li>The Worker Bee: ItemCreator-main.py This Python script is the muscle. Its job is dead simple: get the JSON input from the AI, build a real HTTP request with the right headers (including our JWT token for auth!), and fire it off to our actual NestJS backend.</li> </ol> <h3> Extract parameters from the AI's request </h3> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbovozh0bw3r55bzlun4x.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbovozh0bw3r55bzlun4x.png" alt="boilerplate" width="800" height="468"></a></p> <h3> Build the payload for our NestJS API </h3> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6f3574ay53fsdmnmcm96.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6f3574ay53fsdmnmcm96.png" alt="payload" width="800" height="545"></a></p> <h3> Get our secret JWT token from the environment </h3> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4rjd6uhaamsqkb3zam33.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4rjd6uhaamsqkb3zam33.png" alt=" " width="800" height="464"></a></p> <h3> Make the actual API call! </h3> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1fse2ys57dfwaaqm3drp.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1fse2ys57dfwaaqm3drp.png" alt="api call" width="800" height="180"></a></p> <h3> Send the result back to the AI </h3> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft659uvpmbblti8wery2a.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft659uvpmbblti8wery2a.png" alt=" " width="800" height="375"></a></p> <p>And just like that, every single one of our 249 endpoints had its own little Python worker, ready and waiting for orders.</p> <p>Step 3: Firing Up the Local Brain</p> <p>With our tools ready, we needed a "switchboard operator" to direct traffic from the AI agent to the correct Python script. The generated project includes a lightweight Node.js server that does exactly this. For local testing, it runs in stdio mode, communicating silently in the background.</p> <p>The stdio-server.js file orchestrates everything, but the gist is simple:</p> <p>It starts up and reads our tools.json to know what tools are available.</p> <p>It listens for two main commands from an agent: ListTools (what can you do?) and CallTool (do this thing!).</p> <p>When CallTool comes in, it finds the right Python script, passes along the inputs, and pipes the result back to the agent.</p> <p>I just pop open my terminal, run node index.js, and my local AI "brain" is online.</p> <p>Step 4: The "It's Alive!" Moment: Hooking up GitHub Copilot</p> <p>This is where it gets really cool. We have a server running on our machine that knows how to use our app. Now, let's connect an AI to it. GitHub Copilot's agent mode is perfect for this.</p> <p>Here’s how you can do it too:</p> <ol> <li>Light Up the Server In your terminal, navigate to your MCP project folder and run the server. </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>node index.js </code></pre> </div> <p>It will just sit there, waiting. That's what it's supposed to do!</p> <ol> <li><p>Tweak Your VS Code Settings<br> Open your VS Code User settings.json file. The easiest way is to press Ctrl+Shift+P (or Cmd+Shift+P) and type Preferences: Open User Settings (JSON).</p></li> <li><p>Tell Copilot About Your Server<br> Add this snippet to your settings.json. This tells Copilot, "Hey, there's a tool server available. If I say @anchorbooks, you should run this command to talk to it."<br> </p></li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>{ // ...your other settings... "github.copilot.mcp.enabled": true, "github.copilot.mcp.servers": { "anchorbooks": { // Call it whatever you want "command": "node", "args": [ // IMPORTANT: Use the FULL, absolute path to your index.js file "G:\\Office\\anchorbooks\\item-mcp-tool\\index.js" ] } } } </code></pre> </div> <p>Pro Tip: Make sure the path is correct! This trips up a lot of people.</p> <ol> <li>Let the Magic Happen Restart VS Code to make sure the settings take effect. Now, open the GitHub Copilot chat panel and type @—you should see your server's name (@anchorbooks) pop up!</li> </ol> <p>I sent my first command:</p> <p>@anchorbooks create a new item of type goods named "Premium Arabica Beans" with a selling price of 25 and purchase price of 15. Use unit "kg", sales account 1, purchase account 2, for organization 1.</p> <p>I held my breath. A few seconds later... success!</p> <p>Copilot parsed my sentence, correctly identified the ItemCreator tool, mapped all the parameters, and sent the request to my local Node.js server. The server executed the Python script, which made a real, authenticated API call to my backend. A new item was created in my database, and the JSON response appeared right in my chat window.</p> <p>(Placeholder: Screenshot of the Copilot chat with the prompt and the successful tool execution and JSON response)</p> <p>It felt like magic. I could now manage invoices, update bills, transfer stock—perform over 33 complex backend operations—just by chatting with Copilot.</p> <p>What's Next?</p> <p>We've built a powerful local playground. We proved that we can bridge the gap between human language and a complex API. But let's be honest, this is a lab experiment. The "brain" is tethered to my machine and depends on an external tool like VS Code.</p> <p>This setup is awesome, but it's not a product.</p> <p>In Part 2 of this series, we're cutting the cord. I’ll show you how we took this successful experiment and turned it into a real, integrated feature by:</p> <p>Ditching the local server and building the MCP logic directly into our NestJS backend.</p> <p>Creating our very own chat interface right inside the AnchorBooks.ai app.</p> <p>Plugging into powerful models like Claude 3.5 for smarter, faster tool use.</p> <p>Stay tuned, because that's when we truly give our application a mind of its own.</p> <p><em>Author's Note:</em> No code repos shared here since it was a company project. I wanted to share my experience building stuff &amp; will continue the story in the 2nd blog along with more code examples for better understanding. This workflows also works with complex operations like invoice creation or generating new customer and multi stage workflows as well which we'll discuss in future blogs.</p> mcp openapi softwareengineering tooling Stop Your Code From Having a Mid-Life Crisis. An Introduction to OOP. ShatilKhan Sun, 27 Jul 2025 18:34:46 +0000 https://dev.to/siren/stop-your-code-from-having-a-mid-life-crisis-an-introduction-to-oop-28j7 https://dev.to/siren/stop-your-code-from-having-a-mid-life-crisis-an-introduction-to-oop-28j7 <div class="ltag__link"> <a href="proxy.php?url=/siren" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F558537%2F82f48ad4-591e-4a86-816a-10250ca198cb.jpg" alt="siren"> </div> </a> <a href="proxy.php?url=https://dev.to/siren/engineering-of-small-things-5-oop-basics-in-typescript-2k1h" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Engineering of Small Things #5: OOP Basics in TypeScript</h2> <h3>ShatilKhan ・ Jul 27</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#typescript</span> <span class="ltag__link__tag">#beginners</span> <span class="ltag__link__tag">#tutorial</span> <span class="ltag__link__tag">#oop</span> </div> </div> </a> </div> typescript beginners tutorial oop Engineering of Small Things #5: OOP Basics in TypeScript ShatilKhan Sun, 27 Jul 2025 14:30:00 +0000 https://dev.to/siren/engineering-of-small-things-5-oop-basics-in-typescript-2k1h https://dev.to/siren/engineering-of-small-things-5-oop-basics-in-typescript-2k1h <p>Ahoy!<br> Back after quite a while, I originally planned to release this blog &amp; couple others a long time ago but I guess life gets in the way.</p> <p>Today we are going to look into some basic concepts of Object Oriented Programming.<br> And this isn't meant to be any kind of high level overview. Just me sharing my learning.<br> So! with that , let's begin!</p> <h2> What is Object Oriented Programming anyway? </h2> <p>Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects", which can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods). </p> <h3> The Six Pillars of OOP: A Family Story </h3> <h4> 1. Classes: The Blueprint of You </h4> <p>First things first, what's a class?</p> <p>Think of a <strong>Class</strong> as a blueprint. It's not a person, but it <em>describes</em> what makes a person. For instance, a <code>Human</code> class would be a blueprint defining that all humans have properties like a <code>name</code>, <code>age</code>, and <code>eyeColor</code>.</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkbguhuz3qnwlx5p5a853.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkbguhuz3qnwlx5p5a853.png" alt="Class" width="800" height="623"></a></p> <h4> 2. Objects: You, the Instance </h4> <p>So if a Class is the blueprint, what are you? You, my friend, are an Object.</p> <p>An object is a real, living, breathing instance created from a class. While the Human class is the idea, you are the implementation. You have a specific name, a specific age, and so on. In code, we create a 'new' object from our class.</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxsnixzkqxbmgj8h4uh78.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxsnixzkqxbmgj8h4uh78.png" alt="Object" width="800" height="446"></a></p> <p>A better visualization of the difference between Objects &amp; Classes:<br> <a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuml0nml9crwwzhbzb5fm.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuml0nml9crwwzhbzb5fm.png" alt="Class &amp; Object" width="533" height="347"></a></p> <h4> 3. Encapsulation: Your Personal Bubble </h4> <p>Encapsulation is about bundling your properties (data) and your methods (behaviors) together in that neat little Human object. It also means you can have secrets!</p> <p>Some things about you are public, like your name. Anyone can ask for it. But some things are private, like your deepest, darkest thoughts. You keep those encapsulated. In OOP, this prevents outsiders from messing with the internal state of an object.</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fietq0wado2zexw0nbkdl.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fietq0wado2zexw0nbkdl.png" alt="Encapsulation" width="800" height="588"></a></p> <p>Onward we go!</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffaofs2m4uhfakeds5njc.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffaofs2m4uhfakeds5njc.gif" alt="meme" width="360" height="302"></a></p> <h4> 4. Abstraction: Don't Overthink it! </h4> <p>Abstraction means hiding the complexity and showing only the essentials.</p> <p>Think about meeting someone. You say "Hello!" and they say "Hello!" back. You don't need to know the complex biological processes of how their brain processed your greeting and formulated a response. You just need to know the simple interface: the greet() method. Abstraction hides the messy details.<br> Similar stuff happens when you go for a walk, you don't need to understand how your body keeps balance or how it pushes you forward to follow Newton's law. You just need to put one feet in front of the other.</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgt9roe7u1ypmk8bq368s.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgt9roe7u1ypmk8bq368s.png" alt="Abstraction" width="800" height="346"></a></p> <p>You don't get the whole story, just the parts you need to interact with.</p> <h4> 5. Inheritance: Your Family Legacy </h4> <p>Serious Life Talk!<br> Let's say you fall in love! And Decide to have babies!</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhjuq1kh0a6smc2lgds2n.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhjuq1kh0a6smc2lgds2n.gif" alt="baby" width="240" height="240"></a></p> <p>Your children will inherit traits from you. They might get your last name or your eye color.</p> <p>Inheritance lets a new class (a Child) adopt the properties and methods of an existing class (a Parent). This saves you from rewriting the same code over and over. The child can have all the parent's features, plus their own unique ones.</p> <p>So let's say YOU , The Parent, are a human:</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6xzeqthwa1l8m5tin7ei.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6xzeqthwa1l8m5tin7ei.png" alt="Inheritance-1" width="800" height="365"></a><br> You have your name, age &amp; last name<br> And then you decide to have your first child:</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0dqw103hsyunzg29r55z.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0dqw103hsyunzg29r55z.png" alt="Inheritance-2" width="800" height="435"></a><br> You name your first child "Itchy"<br> So NOW your child will naturally inherit your last name:</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyk0d57p4dw5w2mru23u7.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyk0d57p4dw5w2mru23u7.png" alt="Inheritance-3" width="800" height="306"></a></p> <p>Now we can use the properties the Child inherited from the parent to carry out tasks:</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffcsqu9qxfpg2wa4i3xq6.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffcsqu9qxfpg2wa4i3xq6.png" alt="Inh-4" width="800" height="246"></a></p> <p>Just like that your kid got your last name &amp; other stuff from your DNA (Class). Kid could inherit your crippling depression &amp; anxiety as well.</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmvf2s9cycsw535vtufe3.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmvf2s9cycsw535vtufe3.gif" alt=" " width="480" height="530"></a></p> <h4> 6. Polymorphism: Different Folks, Different Strokes </h4> <p>Polymorphism is a big word for a simple idea: "many forms." It means you can treat objects of different classes in the same way, but they each behave in their own unique style.</p> <p>Imagine you ask everyone in the family to doTheirChore().<br> The Parent might respond by "mowing the lawn", while the Child responds by "tidying up toys". The same instruction (doTheirChore()) produces different results. That's polymorphism in action!<br> We could add a chore(funtion) to each respective Classes (Parent &amp; Child)</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj60pxfwrvax38s5znssi.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj60pxfwrvax38s5znssi.png" alt="polymorphism1" width="800" height="691"></a></p> <p>We can then assign the chores to the classes:</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsdon1w14m2v5p5d4w0sh.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsdon1w14m2v5p5d4w0sh.png" alt="polymorphism2" width="800" height="366"></a></p> <p>And finally we can add new function calls &amp; execute the Chores!</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr89a6q2t8te9nzzg3273.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr89a6q2t8te9nzzg3273.png" alt="polymorphism3" width="800" height="414"></a></p> <h3> Wrapping Up </h3> <p>And there you have it! The big ideas of OOP, explained through the story of you and your family. It's a powerful way to structure your code, and once you get the hang of it, you'll see how it makes building complex things so much more manageable.</p> <p>I'm still on this learning journey myself. A massive shout-out to the repo that got me started and helped me understand these concepts in depth:</p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="proxy.php?url=https://github.com/jafari-dev" rel="noopener noreferrer"> jafari-dev </a> / <a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript" rel="noopener noreferrer"> oop-expert-with-typescript </a> </h2> <h3> A complete guide for learning object oriented programming pillars, SOLID principles and design patterns with TypeScript! </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">Object Oriented Programming Expert with TypeScript</h1> </div> <p>This repository is a complete guide and tutorial for the principles and techniques of object-oriented programming. It can be a reference for all interested in programming and software developers. You will find simple and practical examples in all sections to make the concepts easier to understand.</p> <div class="markdown-heading"> <h2 class="heading-element">Table of Contents</h2> </div> <ol> <li> <a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#fundamentals" rel="noopener noreferrer">Fundamentals</a> <ul> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#whats-object-oriented-programming" rel="noopener noreferrer">What's Object-Oriented-Programming?</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#class" rel="noopener noreferrer">Class</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#objects" rel="noopener noreferrer">Objects</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#abstraction" rel="noopener noreferrer">Abstraction</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#encapsulation" rel="noopener noreferrer">Encapsulation</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#inheritance" rel="noopener noreferrer">Inheritance</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#polymorphism" rel="noopener noreferrer">Polymorphism</a></li> </ul> </li> <li> <a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#solid-principles" rel="noopener noreferrer">SOLID Principles</a> <ul> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#whats-solid-meaning" rel="noopener noreferrer">What's SOLID Meaning?</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#1-single-responsibility-srp" rel="noopener noreferrer">Single Responsibility (SRP)</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#2-openclosed-ocp" rel="noopener noreferrer">Open/Closed (OCP)</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#3-liskov-substitution-lsp" rel="noopener noreferrer">Liskov Substitution (LSP)</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#4-interface-segregation-isp" rel="noopener noreferrer">Interface Segregation (ISP)</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#5-dependency-inversion-dip" rel="noopener noreferrer">Dependency Inversion (DIP)</a></li> </ul> </li> <li> <a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#design-patterns" rel="noopener noreferrer">Design Patterns</a> <ul> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#whats-a-design-pattern" rel="noopener noreferrer">What's a Design Pattern?</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#abstract-factory" rel="noopener noreferrer">Creational - Abstract Factory</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#builder" rel="noopener noreferrer">Creational - Builder</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#factory-method" rel="noopener noreferrer">Creational - Factory Method or Virtual Constructor</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#prototype" rel="noopener noreferrer">Creational - Prototype or Clone</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#singleton" rel="noopener noreferrer">Creational - Singleton</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#adapter-wrapper" rel="noopener noreferrer">Structural - Adapter or Wrapper</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#bridge" rel="noopener noreferrer">Structural - Bridge</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#composite-object-tree" rel="noopener noreferrer">Structural - Composite or Object Tree</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#decorator-wrapper" rel="noopener noreferrer">Structural - Decorator or Wrapper</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#facade" rel="noopener noreferrer">Structural - Facade</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#flyweight-cache" rel="noopener noreferrer">Structural - Flyweight or Cache</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#proxy" rel="noopener noreferrer">Structural - Proxy</a></li> <li><a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#chain-of-responsibility" rel="noopener noreferrer">Behavioral - Chain of Responsibility</a></li> <li> <a href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript#command" rel="noopener noreferrer">Behavioral - Command or</a>…</li> </ul> </li> </ol> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="proxy.php?url=https://github.com/jafari-dev/oop-expert-with-typescript" rel="noopener noreferrer">View on GitHub</a></div> </div> <p>And if you want to see my personal study notes and the code examples I'm tinkering with, I've open-sourced them here:</p> <p>My OOP in TS Study Repo:<br> </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="proxy.php?url=https://github.com/ShatilKhan" rel="noopener noreferrer"> ShatilKhan </a> / <a href="proxy.php?url=https://github.com/ShatilKhan/OOP-TS-Study" rel="noopener noreferrer"> OOP-TS-Study </a> </h2> <h3> Study on Object Oriented Programming with TypeScript </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <p><a rel="noopener noreferrer" href="proxy.php?url=https://private-user-images.githubusercontent.com/52494840/400137931-74af0377-5c90-4f14-b9b2-1ac214e4a2f7.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NTM2MzA5NzQsIm5iZiI6MTc1MzYzMDY3NCwicGF0aCI6Ii81MjQ5NDg0MC80MDAxMzc5MzEtNzRhZjAzNzctNWM5MC00ZjE0LWI5YjItMWFjMjE0ZTRhMmY3LmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA3MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNzI3VDE1Mzc1NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY5MDM0OTRjZmRlZDczMzI3NGVmMjVjMWIxNDAyZGQ0YTM4NzZhMzYwOTI1Yjg1MjExOWZkZjk2ZDI5MGMzOWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.0jqq5QXF12--RI98COmdh6jg4HlZoDixF5Mpow8cXHQ"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fprivate-user-images.githubusercontent.com%2F52494840%2F400137931-74af0377-5c90-4f14-b9b2-1ac214e4a2f7.jpg%3Fjwt%3DeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NTM2MzA5NzQsIm5iZiI6MTc1MzYzMDY3NCwicGF0aCI6Ii81MjQ5NDg0MC80MDAxMzc5MzEtNzRhZjAzNzctNWM5MC00ZjE0LWI5YjItMWFjMjE0ZTRhMmY3LmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA3MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNzI3VDE1Mzc1NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY5MDM0OTRjZmRlZDczMzI3NGVmMjVjMWIxNDAyZGQ0YTM4NzZhMzYwOTI1Yjg1MjExOWZkZjk2ZDI5MGMzOWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.0jqq5QXF12--RI98COmdh6jg4HlZoDixF5Mpow8cXHQ" alt="EST#5 (1)"></a></p> <div class="markdown-heading"> <h1 class="heading-element">OOP-TS-Study</h1> </div> <p>Study on Object Oriented Programming with TypeScript</p> <div class="markdown-heading"> <h2 class="heading-element">What's Object-oriented-programming?</h2> </div> <p>Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects", which can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods). There are 6 pillars of OOP, includes:</p> <ol> <li>Class</li> <li>Objects</li> <li>Data Abstraction</li> <li>Encapsulation</li> <li>Inheritance</li> <li>Polymorphism</li> </ol> <p>We can use <a href="proxy.php?url=https://www.typescriptlang.org/play" rel="nofollow noopener noreferrer">TypeScript Playground</a> to run the code. We can also use VS Code directly.</p> <div class="markdown-heading"> <h1 class="heading-element">Running TypeScript Code in Visual Studio Code</h1> </div> <div class="markdown-heading"> <h2 class="heading-element">Prerequisites</h2> </div> <ul> <li> <a href="proxy.php?url=https://nodejs.org/" rel="nofollow noopener noreferrer">Node.js</a> and npm installed on your machine.</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Steps</h2> </div> <ol> <li> <p><strong>Install TypeScript</strong> Open the terminal in Visual Studio Code and run the following command to install TypeScript globally:</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>npm install -g typescript </pre> </div> </li> <li> <p><strong>Check TypeScript Installation</strong>: Verify that TypeScript is installed by running:</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>tsc --version</pre> </div> </li> <li> <p><strong>Create a <code>tsconfig.json</code> File</strong> In your project directory, create a <code>tsconfig.json</code> file to configure the…</p> </li> </ol> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="proxy.php?url=https://github.com/ShatilKhan/OOP-TS-Study" rel="noopener noreferrer">View on GitHub</a></div> </div> <p>You might see that some of the code is a few months old, as I stated at the beginning I initially planned to publish this blog a while ago but just couldn't find the time. <br> And I'm also experimenting with writing techniques &amp; how to better present coding topics. <br> If you like this one, make sure to check out other blogs in this series.<br> Engineering of Small Things Series is basically written up to share where I explore fundamental topics of how the web works.<br> More to come soon!<br> And Happy Coding!</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0t8a2wwzthd3n6lzr5n7.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0t8a2wwzthd3n6lzr5n7.png" alt="Ai-was-definitely-used" width="800" height="670"></a></p> typescript beginners tutorial oop ক্লাউড কম্পিউটিং কি জিনিস ? ShatilKhan Fri, 07 Feb 2025 06:27:30 +0000 https://dev.to/siren/klaaudd-kmpiuttin-ki-jinis--7pd https://dev.to/siren/klaaudd-kmpiuttin-ki-jinis--7pd <p><em>Author's Note: This blog is a bit different compared to my other blogs. This blog is specifically meant for student who want to learn a basic idea about cloud computing. This is also part of my work as an AWS Cloud Club Captain at my Campus. So on this blog I try to give students a general idea about cloud. And since my primary audience for this blog is Bangladeshi students I thought I would try to explain things in Bengali to keep it fun!</em></p> <p><strong>এখন আসি আসল কথায়, ক্লাউড কম্পিউটিং জিনিস টা আসলে কি?</strong></p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd4bame392gw09mqka6j0.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd4bame392gw09mqka6j0.png" alt="What is cloud" width="272" height="510"></a></p> <p>আপনার Day-to-day লাইফের সবচেয়ে সহজ আর চেনার মত একটা উদাহরণ দিতে গেলে বলা যায় ড্রাইভ স্টোরেজ(ড্রপবক্স, গুগল ড্রাইভ ইত্যাদি) । এইধরণের সার্ভিস গুলা মোটামুটি সবাই ইউজ করে বা না করলেও ফিচার গুলা সবার ফোনেই এক্টিভ । এই ক্ষেত্রে আসলে কি হচ্ছে? <br> ধরেন আপনি আপনার কোন ছবি ড্রাইভ স্টোরেজে রাখলেন, এখন সেটা আপনি যেকোন জায়গা থেকে এক্সেস করতে পারবেন।<br> এই যে আপনার ফাইল/ছবিগুলা রাখলেন, এখন আপনার ফোন থেলে ডিলিট করে দিলেও সেটা পরে আপনি এক্সেস করতে পারবেন, right?<br> এই ডাটা টা সেভ হচ্ছে কোন এক বান্দার সার্ভারে, আপনি যখন ডাটা চাইবেন তখন বেসিকেলি সার্ভার সেই ডাটা আপনাকে দিবে। এই যে দূরে কোন সার্ভারে ডাটা রাখার যেই ব্যাপার টা, এটাই ক্লাউড কম্পিউটিং এর সবচেয়ে বেসিক অংশ।</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm5guu64hq31m397ov0pn.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm5guu64hq31m397ov0pn.png" alt="user server" width="523" height="566"></a></p> <p>আরো কিছু বেসিক উদারণ হচ্ছে ওয়েবসাইট হোস্ট করা। ওয়েবসাইট হোস্ট করলেও সেটা কোন সার্ভারে থাকে, পরে যে কেউ সেখান থেকে এক্সেস করতে পারে একটা পাবলিক ডোমেইন এড্রেস দিয়ে।</p> <p><strong>এখন আসি Amazon Web Services বা AWS নিয়ে</strong></p> <p>"Amazon Web Services, Inc. is a subsidiary of Amazon that provides on-demand cloud computing platforms and APIs to individuals, companies, and governments, on a metered, pay-as-you-go basis. Clients will often use this in combination with autoscaling." - Wikipedia</p> <p>এখন এই কথার মানে কি? on-demand, metered, pay-as-you-go, auto-scaling?</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F44uq1it0e0mbmup9x2kz.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F44uq1it0e0mbmup9x2kz.png" alt="what" width="257" height="346"></a></p> <p>এই ব্লগের উদ্দেশ্য , যে স্টুডেন্ট ক্লাউড নিয়ে কিছুই জানে না তাদের কে জানানো। তাই AWS কে সহজ ভাবে বুঝাচ্ছি।</p> <p>AWS হচ্ছে বিশ্বের সবচেয়ে বড় ক্লাউড প্রোভাইডার। মানে AWS বিভিন্ন ধরণের ক্লাউড রিলেটেড সার্ভিস দেয় কাস্টমার দের। এর মধ্যে কিছু বেসিক সার্ভিস হলো ওয়েবসাইট হোস্টিং, ডোমেইন সেটাপ , ডাটাবেস ম্যানেজ করা । <br> এখন কথা হচ্ছে এগুলা দেয়ার কারণ কি?<br> ধরলাম ক্লাউড কম্পিউটিং নামের কোন জিনিস নাই। এখন আপনই একটা কম্পানি খুলতে চাচ্ছেন, সেক্ষেত্রে আপনার ওয়েবসাইট লাগবেই। এখন আপনাকে সেই সাইট চালাইতে গেলে আগে নিজে একটা সার্ভার কম্পিউটার কেনা লাগবে, যেগুলার দাম লাখ লাখ টাকা। সেই সার্ভার রাখার জন্যে রুম লাগবে, রুমের আবার এসি লাগবে, নাহলে সার্ভারের মাথা গরম হয়ে যাবে।</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnkxwzmehyrfd4q0z5k5j.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnkxwzmehyrfd4q0z5k5j.png" alt="server on fire" width="367" height="316"></a></p> <p>তার মানে আপনার বিজনেস শুরু করতে গেলে আপনার বড় একটা এমাউন্টের ইনভেস্টমেন্ট লাগবে।<br> এখন আসি ক্লাউডে। </p> <p><strong>আপনার সার্ভার লাগবে? ভাড়া নেন!</strong><br> AWS বেসিকেলি নিজেদের সার্ভার গুলা আপনাকে অল্প মূল্যে ভাড়া দিবে। যার বদলে আপনাকে pay-as-you-go বা যতটুকু স্টোরেজ আপনার লাগবে সেই অনুযায়ী পেমেন্ট করবেন।</p> <p>এখন কিছু বেসিক AWS সার্ভিস নিয়ে আলোচনা করি।</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzs4d184dy4ttd3nlo9n1.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzs4d184dy4ttd3nlo9n1.png" alt="basic aws services" width="459" height="216"></a></p> <p>S3 বা <em>Simple Storage Service</em> হচ্ছে AWS র সবচেয়ে বেসিক অফারিং, যেটা আমরা মোটামুটি ডেইলি কোন না কোন ভাবে ইউজ করি। যেমন আপনই গুগল ড্রাইভে কোন ছবি রাখলে সেটার ড্রাইভ লিংক যে কারো সাথে শেয়ার করতে পারেন, S3 সেই সুবিধাটাই দেয়। তবে এক্ষেত্রে আরো অনেক ফিচার আছে, আমি ব্যাপার অনেক বেশি সিমপ্লিফাই করে বলছি।</p> <p>এটার সহজ একটা উদারণ দেই, এই যে ব্লগ টা পড়ছেন, যেই ইমেজ গুলা এখানে দেখতে পাচ্ছেন, এগুলা আসলে আমি যখন আপলোড করছি, জিনিস টা আগে S3 তে যায়, তারপর সেখান থেকে একটা লিংক জেনারেট হয়, তারপর সেই লিংক টা এখানে আসে, যেটার মাধ্যমে আপনারা ইমেজ গুলা দেখতে পান।</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn8vqp0gvb45ok6boapg1.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn8vqp0gvb45ok6boapg1.png" alt="S3" width="800" height="352"></a></p> <p>এখন আসি <em>Amplify</em> নিয়ে, এগুলা নিয়ে ওতটা বলবো না কারণ বিগিনার হিসেবে জাস্ট ক্লাউডের আইডিয়া দেয়ার জন্যে বলা।<br> Amplify দিয়ে বেসিকেলি আমরা আমাদের যেকোন ওয়েবসাইট হোস্টিং আর ডিপ্লয়মেন্টের কাজ করতে পারি। যারা আগে কখনো নিজেদের কোন ওয়েবসাইট হোস্ট করে থাকবেন তাদের জন্যে জিনিস টা বোঝা সহজ হবে।<br> বেসিকেলি আপনার GitHub রিপো বা কডের ফাইল আপলোড করলে Amplify সেটা হোস্ট করে একটা হোস্টেড ডিপ্লয়মেন্ট লিংক দেবে। ডোমেইন নেম সেটাপের জন্য আমরা AWS Route 53 র মত সার্ভিস ইউজ করতে পারি যেখানে আমরা কোন কাস্টম ডোমেইন নেম কিনে সেটাপ করতে পারবো। তবে সেগুলা এই ব্লগের বিষয় নয়, আগামী কোন ব্লগে এই রিলেটেড প্রসেস নিয়ে আলোচনা করবো।</p> <p>এবং সবশেষে EC2 বা <em>Elastic Compute Cloud</em>, এটাও বিগিনারদের জন্য বোঝা একটু কমপ্লেক্স মনে হতে পারে। তবে আমি চেষ্টা করবো সহজভাবে বোঝানোর। <br> ধরেন আপনার ল্যাপটপ বা পিসি টা মানধাতার আমলের, ৪ জিবি র‍্যাম , ৪ কোরের প্রসেসর ইত্যাদি। এখন আপনই আপনার পিসিতে কোন একটা রিসোর্স ইন্টেন্সিভ কাজ করতে চাচ্ছেন, যেটার জন্যে অনেক র‍্যাম লাগবে বা আরো বেশি প্রসেসিং পাওয়ার লাগবে।<br> EC2 আপনার জন্যে একটা <em>ভার্চুয়াল পিসি / মেশিন (VM)</em> রেডি করে দিবে। মানে ধরেন আপনার ৮ জিবি/১৬ জিবি র‍্যামের পিসি লাগবে। ওই যে আগে বলছিলাম যে সার্ভার ভাড়া নেয়ার ব্যাপার টা। এমাজন বেসিকেলি অনেক গুলা সার্ভার কম্পিউটার শেয়ারে ভাড়া দিচ্ছে। আর একটা সার্ভারের র‍্যাম কয়েকশ জিবি বা তার বেশি হয়, প্রসেসিং পাওয়ারও । তখন ওরা বেসিকেলি আপনাকে নির্দিষ্ট এমাউন্ট ভাড়া দিবে , যতটুকু আপনার দরকার (<em>৮ জিবি র‍্যাম/৪ কোর প্রসেসর, ১৬জিবি র‍্যাম / ৮ কোর প্রসেসর</em>)। এবং আপনই যতটুকু ইউজ করবেন সেই অনুযায়ী আপনার খরচ আসবে। এখন প্রশ্ন আসতে পারে, তাহলে এই যে এত হাই লেভেলের মেশিন লার্নিং মডেল বা এডভান্স এলগিরদম নিয়ে বড় কম্পানিগুলায় কাজ হয়, এগুলা তাহলে ওরা এভাবে করে?</p> <p><strong>ঠিক ধরেছেন!</strong><br> হ্যাঁ অনেকেই নিজস্ব সার্ভার কিনে,কিন্তু ছোট কম্পানি বা স্টার্টাপ গুলা ম্যাক্সিমাম এভাবেই কাজ করে। আপনার বেশি লার্নিং মডেল ট্রেইন করাতে যেই জিপিউ রিসোর্স লাগবে সেটাও ক্লাউডের মাধ্যমে এক্সেস নিয়ে করা হয়। তবে এগুলা বিগিনার টপিকের বাইরে পরে তাই অন্যদিন আলোচনা করবো।</p> <p>ব্লগ টা মেইনলি এবস্যুলুট বিগিনার দের উদ্দেশ্য করেই বানানো। কারণ অনেক ক্ষেত্রেই বাংলাদেশে বেশিরভাগ ভার্সিটি গুলোতে আলাদাভাবে কোন ক্লাউডের কোর্স বা এধরণের শেখার সুবিধা নাই। কিন্তু AI নিয়ে সবাই লাফায়, ওয়েব ডেভেলপমেন্ট নিয়ে এত মাতামাতি, দিনশেষে কোন না কোন পর্যায়ে যায়ে ক্লাউডের কাজ শিখতেই হবে। তাই এই ব্লগের উদ্দেশ্য ছিল স্টুডেন্ট দের সেই বিষয়ে বেসিক আইডিয়া দেয়া।</p> <p><em>Author's Note: If you want to learn more about the topic's mentioned &amp; would love to see more blogs on this, I'd appreciate if you comment down below to show your interest.</em></p> beginners cloud aws tutorial Engineering of Small Things #4 : WebSockets ShatilKhan Fri, 27 Dec 2024 05:09:07 +0000 https://dev.to/siren/engineering-of-small-things-4-websockets-4n6 https://dev.to/siren/engineering-of-small-things-4-websockets-4n6 <p>Hello Again!</p> <p>Recently I was working on a website where I needed to pull data from the server periodically, it wasn't really required as the database updated only once a week or so. But still I thought it would be nice to have a way if I could periodically get data from server without having to request it from the client side. SO then I came across socket servers!<br> It basically allows two-way communication between a client &amp; a server. We can also setup timeout methods so that the server automatically sends data to the client on a regular interval.<br> So I studied a bit on the topic , got some help from chatgpt :)<br> But also I like to learn from experience engineers rather than regular courses. One of the engineers I admire is <a class="mentioned-user" href="proxy.php?url=https://dev.to/husseinnasser">@husseinnasser</a> . I followed a short crash course from Nasser about WebSockets as well. Because as a non-CSE student I didn't really know how the underlying connections work. So I needed to learn from scratch! <br> And it was indeed a great experience. I first learned about protocols! HTTP, HTTP 1.1, TCP, UDP <br> This gave me a good foundation to understand what's going on in a WebSocket server.<br> Then I made a raw websokcet server using http. I set up certain breakpoints &amp; tested the connection between the server &amp; the client. It was unique way to learn because I didn't write much frontend code for this. Instead I tested the client by directly sending client messages from the browser console!</p> <p>First we'll need a basic http server : </p> <p>Basic Package Requirements &amp; Connection :<br> <a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwbwjl59t4svl4x51qds7.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwbwjl59t4svl4x51qds7.png" alt=" " width="800" height="313"></a><br> Now there is a Null connection variable here, we'll get to it later.</p> <p>Base http server initiate:<br> <a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg6ayjt2zr6ucw93jvjsk.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg6ayjt2zr6ucw93jvjsk.png" alt=" " width="800" height="315"></a></p> <p>But this is just a request-response server. Once a response is received, connection is gone. We need a reliable connection. This is where TCP comes in. When I pass in this http server into a WebSocket server it will then send an UPGRADE 1.1 header request to the server from the client side. It will request to switch protocol from http to http 1.1 &amp; establish a TCP connection for full-duplex communication.<br> Pass in the http server into the websocket server to create a TCP connection:</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp22g0eqw5sya1jdm9idk.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp22g0eqw5sya1jdm9idk.png" alt=" " width="800" height="365"></a></p> <p>Server Listening:</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F337104xvm5bzplhx2kyx.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F337104xvm5bzplhx2kyx.png" alt=" " width="800" height="269"></a></p> <p>the websocket server can choose weather to accept the request or not , <br> accepting sends back swithing protocol 101 response , which opens up the full duplex communication between client &amp; server<br> 1st parameter is a custom protocol , could be for chatting , gaming, null means we'll accept anything, no specific protocol needed<br> 2nd paramter - we can check the origin of the request, generally the url the request was sent from , to checck if it's atrusted source<br> Below are the events that we can use , open, close, message etc.The main point of WebSockets is having these events.<br> When each event occurs we can get a certain response from server automatically without the client needing to initiate a request<br> Socket Events:</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwfj8i58x1ny4yj68rcpf.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwfj8i58x1ny4yj68rcpf.png" alt=" " width="800" height="469"></a><br> Notice we see the null connection here that we initiated in the beginning. This tells the server that we can accept ANYTHING. Any type of data is accepted as we are just testing. <br> Now we can send &amp; receive connection between the server &amp; client<br> From the Debug console in VS Code we can send a server message:</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9lg34wod07g0i2ynb0sv.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9lg34wod07g0i2ynb0sv.png" alt=" " width="800" height="356"></a></p> <p>Then from the browser console, we can send a client response:</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo1blwuniiabvusrhpfy4.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo1blwuniiabvusrhpfy4.png" alt=" " width="800" height="446"></a></p> <p>The connection stays open as long as nobody closes the connection.<br> If the server shuts down, the connection will close<br> if the client browser initiates the event <code>ws.close</code> the connection will close.<br> But this is just basic connection. Now We will make a function that will keep sending messages from the WebSocket server to the client on a regular interval. Think of game streaming , twitch, video streaming etc.</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7cyepuufrvltdrqxfbn7.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7cyepuufrvltdrqxfbn7.png" alt=" " width="800" height="418"></a></p> <p>Pass in the function after we open the connection:</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmts9nfme3sv1sx088obn.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmts9nfme3sv1sx088obn.png" alt=" " width="800" height="402"></a></p> <p>We can log this stream of messages on the client side using <code>onmessage</code> event</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz246i1dyr6prmq5zxev6.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz246i1dyr6prmq5zxev6.png" alt=" " width="800" height="188"></a></p> <p>Voila We just made a full-duplex two-way communication between a server &amp; a client.</p> <p>Super fun stuff to learn!</p> <p>Codebase:<br> </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="proxy.php?url=https://github.com/ShatilKhan" rel="noopener noreferrer"> ShatilKhan </a> / <a href="proxy.php?url=https://github.com/ShatilKhan/socket-server" rel="noopener noreferrer"> socket-server </a> </h2> <h3> exploring how socket servers work </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">socket-server</h1> </div> <p>exploring how socket servers work</p> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="proxy.php?url=https://github.com/ShatilKhan/socket-server" rel="noopener noreferrer">View on GitHub</a></div> <br> </div> <br> <p>Check out the video to see the code in action:</p> <p><iframe width="710" height="399" src="proxy.php?url=https://www.youtube.com/embed/7RaDgU1VP-U"> </iframe> </p> webdev node beginners tutorial Engineering of Small Things #3 : Small Language Models ShatilKhan Thu, 19 Dec 2024 10:33:28 +0000 https://dev.to/siren/engineering-of-small-things-3-small-language-models-37kh https://dev.to/siren/engineering-of-small-things-3-small-language-models-37kh <p>Disclaimer! I am NOT an AI Influencer! This is literally just me learning about how to implement a hugging face model for the first time.<br> And Boy Was it Hard! :)) </p> <h2> What is this even about? </h2> <p>I built a document Question &amp; answering bot for this demonstration. It takes an Image &amp; we can query &amp; ask questions regarding that Image.<br> I had no idea how to implement language models going into this. So it was a really fun experience. Now this is part of a bigger project. Today I'm just sharing one part of it.</p> <h2> Going Crazy </h2> <p>This was for a hackathon project where I was trying to use <a class="mentioned-user" href="proxy.php?url=https://dev.to/streamlit">@streamlit</a> &amp; <a href="proxy.php?url=https://huggingface.co/" rel="noopener noreferrer">HuggingFace</a> , I never even had a hugging face account &amp; had only basic tutorial level experience on <a class="mentioned-user" href="proxy.php?url=https://dev.to/streamlit">@streamlit</a> . But I really wanted to learn &amp; implement something on my own. I was tired of following tutorials &amp; it didn't matter if it was a standard solution or not!</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffsryyoxi35f1cox0whvt.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffsryyoxi35f1cox0whvt.png" alt=" " width="220" height="307"></a></p> <p>But like the heading says, I did go crazy a couple times :)</p> <h2> The beginning of Insanity </h2> <p>Now I'm a web developer who had only heard about hugging face, didn't really care about the hype. But then I decided to experiment a little with this tech. I did not have the necessary setup on my local device , so firstly I had to install <code>PyTorch</code> &amp; <code>TesseractOCR</code> on my local PC first. I will not be sharing this trauma :)<br> Those who know...know 😫</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbuj3042h84lts1ftbhfz.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbuj3042h84lts1ftbhfz.png" alt=" " width="750" height="422"></a></p> <p>But I will take you through how I implemented it!</p> <p>First we need the basic ingredients! A transformer!</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fykayb3xlqdmgdsp5wg5n.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fykayb3xlqdmgdsp5wg5n.png" alt=" " width="360" height="539"></a><br> How does it work? - I have no f**king Idea!<br> What does it do? - Makes language model go "brrrr"</p> <p>And a library to read Image files.</p> <p><strong>Basic Imports:</strong></p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fywt1sdatss2te53f9vpd.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fywt1sdatss2te53f9vpd.png" alt=" " width="800" height="345"></a></p> <p>Now to initialize our pipeline.<br> What does that even mean? Basically we are selecting a language model from huggingface model catalogue. And also setting what type of model that is. Here comes the main point of this blog. Small Language Models. At first I did try to use a popular Large Language Model (Mistral) , but here's the thing, after we've initialized a pipeline, when I run the program for the first time, it needs to download the model onto my local device. But like I've stated before, I have shitty internet &amp; the Mistral-8B was like 2GB+. Every time I would start the project, the model would download halfway &amp; give up.<br> So I opted to choose a Small Language Model called <a href="proxy.php?url=https://huggingface.co/impira/layoutlm-document-qa" rel="noopener noreferrer">impira/layoutlm-document-qa</a></p> <p>This is a 500 MB model that was a good enough job of answering questions from an uploaded document. But there's some parameters, like the uploaded document needs to be an image, hence the need for a separate library to read image files (PIL).</p> <p><strong>Pipeline Initialization:</strong></p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4d17isflpd3aic2plxce.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4d17isflpd3aic2plxce.png" alt=" " width="800" height="327"></a></p> <p>But here's the hard lesson I learned. I used streamlit cloud to deploy the project. So it was running on a cloud gpu. But after a few minutes of usage it would become WAY TOO resource intensive &amp; the project would shut down due to streamlit cloud's resource limitations. I couldn't figure this out for SOO long. But then streamlit came to the rescue again. Using <a href="proxy.php?url=https://docs.streamlit.io/develop/api-reference/caching-and-state" rel="noopener noreferrer"><code>st.cache</code></a> we can cache out data so that they become less resource intensive. But I was using <a href="proxy.php?url=https://docs.streamlit.io/develop/api-reference/caching-and-state/st.cache_data" rel="noopener noreferrer"><code>st.cache_data</code></a> at first, now this API only caches Images or other Data, NOT AI MODELS. Because AI Language Models are classified as resources. So later I had to switch to <a href="proxy.php?url=https://docs.streamlit.io/develop/api-reference/caching-and-state/st.cache_resource" rel="noopener noreferrer"> <code>st.cache_resource</code></a> which finally solved the problem!</p> <p><strong>Caching Pipeline Initialization:</strong></p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5oybhksndnxshqk38zwi.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5oybhksndnxshqk38zwi.png" alt=" " width="800" height="321"></a></p> <p>The next steps were pretty easy once I solved the main problem.<br> On the next stage I used an <code>if-statement</code> to check if image file is uploaded &amp; loaded the pipeline so the SLM could read the file.</p> <p><strong>Verify Image Upload:</strong></p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F13vg4cvm8ln4r1kbl6c1.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F13vg4cvm8ln4r1kbl6c1.png" alt=" " width="800" height="271"></a></p> <p>After that I initialized a form using <a href="proxy.php?url=https://docs.streamlit.io/develop/api-reference/execution-flow/st.form" rel="noopener noreferrer"><code>st.form</code></a> to submit a question</p> <p><strong>Initialize form:</strong></p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fit78gj7yhcur7c5wh3sj.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fit78gj7yhcur7c5wh3sj.png" alt=" " width="800" height="321"></a></p> <p>If a question is submitted , the image will be opened &amp; the AI Model will query the image.</p> <p><strong>Open Query:</strong></p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi4zwwaduqesijxbrsc0u.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi4zwwaduqesijxbrsc0u.png" alt=" " width="800" height="411"></a></p> <p>Now the query performed doesn't just produce one answer. Remember, this is a language model, it doesn't understand human language, but can only predict the next word based on training data. So in this case it will produce multiple answer. <br> Finally it will choose the most probable answer and show it to the user!</p> <p><strong>Get the best answer:</strong></p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1cffkrwn6r6opwkakgr5.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1cffkrwn6r6opwkakgr5.png" alt=" " width="800" height="437"></a></p> <p>Here's the main file: <a href="proxy.php?url=https://github.com/ShatilKhan/Hemo/blob/main/hemo.py" rel="noopener noreferrer">https://github.com/ShatilKhan/Hemo/blob/main/hemo.py</a></p> <p>There's a lot of other features as it is part of a larger project, I just explained the part where I used a Language Model is all.<br> Hopefully I'll write more about other features of this project soon!<br> Happy Coding!</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl3kzbs69xor01rs7vnnv.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl3kzbs69xor01rs7vnnv.png" alt=" " width="259" height="194"></a></p> ai beginners tutorial learning Engineering of Small Things #2: Cookies ShatilKhan Wed, 11 Dec 2024 21:35:26 +0000 https://dev.to/siren/engineering-of-small-things-2-cookies-43b2 https://dev.to/siren/engineering-of-small-things-2-cookies-43b2 <p>Cookies!<br> I love it, you love it, Google Loves it, Third Party Companies that steal your data love it as well!</p> <p>Although I have worked with session based authentication before, I have always wondered how it works on a fundamental level.</p> <p>Recently I came across a task where I had to access &amp; use cookies to login to a site for "research purposes"</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuc57ogmcv6eupnt22asc.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuc57ogmcv6eupnt22asc.gif" alt=" " width="298" height="298"></a></p> <p>So Anyway!</p> <p>I needed to load &amp; change a website's cookies to sign into another session. That got me wondering how do cookies actually work.</p> <p>I first had a cookies file saved from another session. Basically when I (the user) login each time from any device, it creates a session token. Think of session tokens like keys for your website. There's a lot of other stuff that's created like session_id , puid etc. What's important is that all these things function as a unique identifier so that only the specific user can access the website. Now if we want to login to this same session, we would simply need to:</p> <ul> <li>scrape the cookies from this session </li> <li>go to a different device or browser where another user is logged in. </li> <li>Then paste in the cookies from our previous session </li> <li>Finally refresh the site</li> <li>And Voila! we just logged into someone's account using their cookies! (Do Not Try This at Home and please don't mention my name if you do try)</li> </ul> <p>I used the <a href="proxy.php?url=https://cookie-editor.com/" rel="noopener noreferrer">Cookie-Editor</a> extension for this task.</p> <ul> <li>First I copied the cookie files from my previous session </li> <li>then went to the where I need to login</li> <li>Opened the cookie-editor &amp; just pasted in the entire text from the cookie file of my previous session</li> </ul> <p>Another important thing is the added safety of session-expiry. After some time cookies will expire &amp; you will have to login again. This ensures no one else snoops into your account.</p> <p>Now this blog isn't meant as a high-level overview, it's just something I found pretty interesting is all. So I made a short diagram for how cookie based authentication works as well!<br> I used <a href="proxy.php?url=https://excalidraw.com" rel="noopener noreferrer">Excalidraw</a> for the diagramming.</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2j4alkic9s0zas220od2.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2j4alkic9s0zas220od2.png" alt=" " width="800" height="394"></a></p> <p>Happy Coding!</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhf8y5x6jhj2z3ykfbluf.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhf8y5x6jhj2z3ykfbluf.png" alt=" " width="543" height="463"></a></p> webdev tutorial beginners basic Engineering of Small Things #1 : Email Newsletters ShatilKhan Wed, 04 Dec 2024 19:53:53 +0000 https://dev.to/siren/engineering-of-small-things-1-email-newsletters-18gh https://dev.to/siren/engineering-of-small-things-1-email-newsletters-18gh <p>This is by no means a guide on how to make Email Newsletter, but rather the particular problems I faced while developing my first email newsletter as a jr. dev &amp; how I found the solution the hard way!</p> <h2> The Beginning of a Disaster </h2> <p>Recently I had the opportunity to develop an Email newsletter , but also I had to make a backend functionality to send to multiple people at once. I used Mailgun API for email management. But also at the same time, had no idea how one might develop a newsletter subscription system (honestly , I'm still learning :))</p> <p>In a Figma File Far Far Away....<br> There was a design, that I had no idea how to convert to code &amp; send to a bunch of people. So I did what literally everyone does these days.</p> <p>AI... I used an AI</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fofo77f84kipw8e5jngca.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fofo77f84kipw8e5jngca.gif" alt=" " width="600" height="335"></a></p> <p>But that is just the beginning of the disaster :)<br> I thought I could just convert the figma file to html &amp; send it. Well that plan seems solid until I actually tried doing it &amp; figured the plugins convert figma to basic html which don't have images linked. Some plugins do, but most are premium. </p> <h2> AWS S3 to the Rescue </h2> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsp2tl4h22b6zmi8wezi6.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsp2tl4h22b6zmi8wezi6.png" alt=" " width="549" height="303"></a></p> <p>So I used good old S3 Bucket to store the images &amp; serve them.<br> But it wasn't easy. I still iterated through a bunch of AI Figma Plugins &amp; what I realized was that instead of Figma to HTML Plugin, I needed Figma to Email Template Plugin. There's a big difference &amp; we'll discuss why in a moment.<br> But basically I innocently downloaded the html code, uploaded EACH Photo to S3 .... Multiple Times Too! Because I have shitty Internet :)</p> <p>Then the html template for the email was done! Then I ran by Script for sending the Email to a list of recipients. It was pretty basic Script that has a function read a list of emails from an excel sheet &amp; send an html template to those emails.</p> <p>So I loaded up everything &amp; sent a test mail to my own mail first (pheew)</p> <p>The email looked liked this:</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0eulcoslu3jschlwz6fe.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0eulcoslu3jschlwz6fe.png" alt=" " width="498" height="498"></a></p> <p>No CSS Loaded, No Structure... Nothing. Just a bunch of text.</p> <p>Then I started googling... and I found that google doesn't allow any external CSS to be sent over email. And a lot of other css classed &amp; properties aren't allowed. What fascinated me was WHY they weren't allowed. Because they can be used as a vulnerability to inject malicious scripts. 👀👀👀</p> <p>So THEN I looked for Figma to Email Template &amp; Found <a href="proxy.php?url=https://kombai.com/" rel="noopener noreferrer">Kombai </a>!<br> Kombai proved to be a great tool for email newsletter because it creates html template that directly adhere to gmail css restrictions.</p> <p>It also organized the images in the design properly.<br> And then I had to use AWS S3 again 😢. But finally got it working (Kinda). I mean it worked mostly fine ,except on some devices where it still broke. But Yeah, building a Email Newsletter Template Sender from Scratch is like reinventing the wheel :)</p> <p>But I learned some interesting Info. Also While I was checking different figma plugins for html conversion, I found <a href="proxy.php?url=https://app.brevo.com/" rel="noopener noreferrer">Brevo</a> ! Which is like an All in one tool for email marketing.<br> Mailgun is also good , I used it to track the emails. But it does not have a template designer. In comparison Brevo had a lot of built in features. Then I learned more about Brevo's no-code/low-code email newsletter features. But ultimately I learned a lot stuff while making this newsletter template.<br> I also made a small diagram &amp; I want to hone my skills in designing architecture components. </p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6srt1320hmvwmfhx3uug.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6srt1320hmvwmfhx3uug.png" alt=" " width="771" height="541"></a></p> <p>None of these are perfect or standard, but I wanted to learn how to make these architecture designs as well and I thought the best way would be to get my hands dirty!<br> Keep on Coding!</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9kxno2mz4dcowvcaelys.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9kxno2mz4dcowvcaelys.gif" alt=" " width="256" height="320"></a></p> aws webdev programming beginners Unleashing Open Source Potential: My Journey with Amazon OpenSearch🎯 ShatilKhan Sat, 20 Jan 2024 23:13:09 +0000 https://dev.to/siren/working-for-amazon-as-a-student-44o6 https://dev.to/siren/working-for-amazon-as-a-student-44o6 <p>Last year I had the opportunity to work with some amazing developers from Amazon. I got to be part of the <strong>Open Source Contributor Initiative</strong> program which is an Open Source program supported &amp; managed by Amazon. The main focus of the program is Amazon OpenSearch which is an Open Source data analytics platform by Amazon. In this post I will share my experience from getting selected to understanding how to work with large code bases &amp; making a few contributions. I mostly didn't get to write about my work as I was still working to make more contributions. So here's my journey.</p> <p>On September 2023 I decided I would seriously start contributing to Open Source. I have been part of the AWS Cloud Captains program &amp; one day saw an event on the Amazon Open-Search Cohort. I was quite curious.</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv7ym6ztl5ucrm2j14lap.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv7ym6ztl5ucrm2j14lap.png" alt=" " width="520" height="383"></a></p> <p>Around that same time I had started to gain momentum on <a class="mentioned-user" href="proxy.php?url=https://dev.to/quine_sh">@quine_sh</a> improving my Open Source ranking &amp; had also made some notable contributions to meshery.io &amp; codecademy docs. So I applied out on a whim. Honestly didn't expect to get selected since 2023 was the first time I started contributing to Open Source. But then I received the mail!</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1tu1j31ejmhk7f93s2ib.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1tu1j31ejmhk7f93s2ib.png" alt=" " width="800" height="300"></a></p> <p>I was thrilled to be among the selected people. And so began my 12-week journey with Amazon Open-Search. <br> <em>All mentors &amp; program managers mentioned in this post are Amazon employees who were in charge of the OpenSearch Project.</em></p> <h3> History of the program </h3> <p>Earlier in 2023, from March 1st to May 15th, they launched the College Contributor Initiative (CCI), which was a pilot of OSCI. Well over 100 students participated in CCI, contributing an impressive 150 pull requests and generating 275 issues. Many participants have continued to work on the project, with multiple becoming maintainers.</p> <p>Iskander who mainly gave us all the updates on the program. David who cheerfully started the program is a really cool dude.</p> <p>We completed the 3-day on-boarding sessions &amp; got to work!<br> It was my first time working on such a big code-base with such professionals. I was very inspired by my mentors. We were assigned mentors based on our interests. There are many repos part of the Open Search Project. I selected to work on OpenSearch-Dashboards &amp; OUI front-end components. <br> Mentors:<br> <em>Josh Romero<br> Matt Provost<br> Anan Zhuang</em><br> They are all amazing mentors, I specially got inspired by Matt's experience of being a self-taught software developer. Josh helped me understand many things about github that I didn't know much about before hand which was very helpful. Anan also helped with understanding issues. Josh is super composed &amp; calm in tackling any issue which was great.<br> I started attending the community calls every Thursday. At first even running the code base on my local machine was a hassle. But as I kept attending more meetings I got to understand more of the codebase. </p> <p>I mainly worked on 2 Repositories<br> OpenSearch-Dashboards, which is a Dashboard web app for Data Analytics<br> &amp; the OUI which is the front-end components library for Open-Search.</p> <p>As a beginner I learned quite a lot.</p> <h3> My Contributions in Open-Search Dashboard: </h3> <ul> <li><a href="proxy.php?url=https://github.com/opensearch-project/OpenSearch-Dashboards/pulls/ShatilKhan" rel="noopener noreferrer">https://github.com/opensearch-project/OpenSearch-Dashboards/pulls/ShatilKhan</a></li> <li><a href="proxy.php?url=https://github.com/opensearch-project/OpenSearch-Dashboards/pulls?q=is%3Apr+author%3AShatilKhan+is%3Aclosed" rel="noopener noreferrer">https://github.com/opensearch-project/OpenSearch-Dashboards/pulls?q=is%3Apr+author%3AShatilKhan+is%3Aclosed</a></li> </ul> <h3> My Contributions on OUI: </h3> <ul> <li><a href="proxy.php?url=https://github.com/opensearch-project/oui/pulls/ShatilKhan" rel="noopener noreferrer">https://github.com/opensearch-project/oui/pulls/ShatilKhan</a></li> <li><a href="proxy.php?url=https://github.com/opensearch-project/oui/pulls?q=is%3Apr+author%3AShatilKhan+is%3Aclosed" rel="noopener noreferrer">https://github.com/opensearch-project/oui/pulls?q=is%3Apr+author%3AShatilKhan+is%3Aclosed</a></li> </ul> <p>All though they weren't any advanced contributions they taught me a lot about making quality contributions, how to make your contributions better. I wrote another blog from my learnings through this here : <br> </p> <div class="ltag__link"> <a href="proxy.php?url=/siren" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F558537%2F82f48ad4-591e-4a86-816a-10250ca198cb.jpg" alt="siren"> </div> </a> <a href="proxy.php?url=https://dev.to/siren/make-your-github-contributions-look-cool-3p51" class="ltag__link__link"> <div class="ltag__link__content"> <h2>Make your Github Contributions Cooler😎</h2> <h3>ShatilKhan ・ Jan 19 '24</h3> <div class="ltag__link__taglist"> <span class="ltag__link__tag">#tutorial</span> <span class="ltag__link__tag">#github</span> <span class="ltag__link__tag">#opensource</span> <span class="ltag__link__tag">#beginners</span> </div> </div> </a> </div> <p>Feel free to give it a read.<br> In total I made about 6-7 PRs for the program. Ultimately I learned how to work in large groups to maintain &amp; resolve issues in a large code-base. I am still actively part of the open-search community &amp; learning more. I hope I can make good use of the knowledge I've gained here. Part of why I'm writing this post now is because I was mainly occupied with work &amp; didn't have the time to properly write as the program was still going.<br> Here's some helpful links if you're interested in Opensearch</p> <p>The Official OpenSearch Project Github<br> </p> <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__cover"> <a href="proxy.php?url=https://github.com/opensearch-project" class="c-link s:max-w-50 align-middle" rel="noopener noreferrer"> <img alt="" src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F80134844%3Fs%3D280%26v%3D4" height="280" class="m-0" width="280"> </a> </div> <div class="c-embed__body"> <h2 class="fs-xl lh-tight"> <a href="proxy.php?url=https://github.com/opensearch-project" rel="noopener noreferrer" class="c-link"> OpenSearch Project · GitHub </a> </h2> <p class="truncate-at-3"> OpenSearch is a community-driven, Apache 2.0-licensed open source search and analytics suite that makes it easy to ingest, search, visualize, and analyze data. - OpenSearch Project </p> <div class="color-secondary fs-s flex items-center"> <img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.githubassets.com%2Ffavicons%2Ffavicon.svg" width="32" height="32"> github.com </div> </div> </div> <p>The official site for Open Source Contributor Initiative<br> <a href="proxy.php?url=https://opensearch.org/blog/Receive-mentorship-from-Amazon-engineers-and-accelerate-your-career-in-Tech/" rel="noopener noreferrer">https://opensearch.org/blog/Receive-mentorship-from-Amazon-engineers-and-accelerate-your-career-in-Tech/</a></p> <p>The program usually runs twice a year. Applications open usually in July &amp; September. Keep an eye on their official site for updates. It's good to mention that the program is not stipend but meant for beginners , so it's a good starting point.</p> <p>If you're interested in learning about AWS Cloud , you can check out my other blog about it:<br> </p> <div class="ltag__link"> <a href="proxy.php?url=/siren" class="ltag__link__link"> <div class="ltag__link__pic"> <img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F558537%2F82f48ad4-591e-4a86-816a-10250ca198cb.jpg" alt="siren"> </div> </a> <a href="proxy.php?url=https://dev.to/siren/a-099s-story-56od" class="ltag__link__link"> <div class="ltag__link__content"> <h2>0.01% matters more than you think - AWS EC2 uptime⚡</h2> <h3>ShatilKhan ・ Jan 20 '24</h3> <div class="ltag__link__taglist"> </div> </div> </a> </div> <p>Happy Coding!</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy6df6rtephz3qnbsibb9.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy6df6rtephz3qnbsibb9.gif" alt=" " width="498" height="466"></a></p> opensource aws codenewbie opensearch 0.01% matters more than you think - AWS EC2 uptime⚡ ShatilKhan Sat, 20 Jan 2024 06:26:39 +0000 https://dev.to/siren/a-099s-story-56od https://dev.to/siren/a-099s-story-56od <h2> What's a o.99? </h2> <p>99% might seem like a great number for Server Availability but actually boils down to 7 hours of down time per month!<br> That's why the 9's after the dot are important.</p> <p>Did you ever think about why or how Netflix Servers Never go down? or how Facebook Servers go down for hours sometimes?<br> This is caused due to Server Down time but we all know that mostly. We are going to talk about Server Up Time &amp; the role of AWS Elastic Compute Cloud service, how it works &amp; it's role in reducing server down times , how it instantly scales up to handle high amounts of users.<br> And for the previous question, Netflix Operates at an Availability rate of <strong>99.99%</strong> !</p> <h2> What &amp; Why of EC2 </h2> <p>Social Media Applications like Facebook, Tiktok or Instagram get more than 50 Million Users Every Month. But they aren't handling 50 Million users Every Single Moment. Sometimes it could spike up to more than 100 Million Users! This could instantly increase your Cloud Computing Costs a Hundred Folds. So How do you handle this instant spike? specially during Holiday seasons when everyone's on their phones sharing Terabytes of data online. <br> You balance things up to reduce cost.</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq5l8yw4ibq8dtg4oivyd.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq5l8yw4ibq8dtg4oivyd.gif" alt=" " width="480" height="202"></a></p> <p>AWS EC2 makes it so that you no longer need to use or buy new servers when there's a user spike up, instead it automatically scales up the software to meet the needs. It also stay in high availability because of the world wide AWS availability regions. So even if one region is damaged , backups from another region will instantly ring up &amp; pull the entire system online. </p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcd30q4qym9l25y0lsj0w.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcd30q4qym9l25y0lsj0w.gif" alt=" " width="220" height="206"></a></p> <p>You can also pick &amp; choose the type of EC2 instances you wish to use. For example if you're hosting hardware heavy application that needs extensive GPU power you can adjust &amp; create an EC2 instance that uses more GPU power. Or in case of analyzing large amounts of data you allocate more storage to your instance. This way you no longer have to worry about configuring your software manually &amp; use EC2 to serve any purpose.</p> <p>Now let's see how you can easily ring up an EC2 instance of your own.</p> <h2> Creating an EC2 Instance </h2> <ul> <li>Go to AWS Console &amp; in the search bar look for EC2</li> </ul> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flczyqjocs01g0t3vnh2l.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flczyqjocs01g0t3vnh2l.png" alt=" " width="800" height="471"></a><br> Select the EC2 service</p> <ul> <li>On the side panel , click on instances</li> </ul> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4wh9sp8v706nrcuh2v9k.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4wh9sp8v706nrcuh2v9k.png" alt=" " width="800" height="419"></a></p> <ul> <li>Check the AWS Computing Service Instance &amp; review the details</li> </ul> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fic5i9umwo9q3x7313gar.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fic5i9umwo9q3x7313gar.png" alt=" " width="800" height="383"></a></p> <ul> <li>After that click on <code>Instance Types</code> on the left panel</li> <li>Search &amp; select these 3 instance types <code>t3.large</code> <code>c5.large</code> <code>r5.large</code> &amp; check them all</li> </ul> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fubaks6dnq79evd9onp1o.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fubaks6dnq79evd9onp1o.png" alt=" " width="800" height="231"></a></p> <ul> <li>Return to instances tab &amp; copy the IPV4 address</li> </ul> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2wkh50mv3y57hcz85l68.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2wkh50mv3y57hcz85l68.png" alt=" " width="800" height="372"></a></p> <ul> <li>Paste the id in a new browser tab &amp; you should see something similar with all the info from your instance.</li> </ul> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzgrbhk4d5caewqupqhws.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzgrbhk4d5caewqupqhws.png" alt=" " width="756" height="717"></a></p> <ul> <li>Back to instances tab , click on <code>connect</code> </li> </ul> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsm73ba5a81hgfdm3e5sj.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsm73ba5a81hgfdm3e5sj.png" alt=" " width="800" height="123"></a></p> <ul> <li>You can click &amp; review each individual section then click connect</li> </ul> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwuinmg901gkqx7c1qchz.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwuinmg901gkqx7c1qchz.png" alt=" " width="800" height="413"></a></p> <ul> <li>You will be taken to a Terminal environment, now you must carry out these code commands:</li> </ul> <ol> <li>Type the following command to provide ROOT Privilege:</li> </ol> <p><code>sudo -i</code></p> <ol> <li>To change to the application directory, run: </li> </ol> <p><code>cd ../home/ec2-user/sample_app</code></p> <ol> <li>To view the files in the sample_app directory, run: </li> </ol> <p><code>ls</code></p> <ol> <li>To check the instance log, run: </li> </ol> <p><code>tail -lf aws_compute_solutions.log</code></p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbwz76jilxlf846hp1ele.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbwz76jilxlf846hp1ele.png" alt=" " width="800" height="308"></a></p> <p>Make sure to add proper space &amp; '.' / '_' in each command , as you can see I got an error for writing 'sample.app' instead of 'sample_app'</p> <ul> <li>Review the log details, press <code>Cntrl + C</code> , close the terminal window &amp; return to your instance tab.</li> </ul> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv56avsyr0y8y4sz57c7s.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv56avsyr0y8y4sz57c7s.png" alt=" " width="800" height="307"></a></p> <ul> <li>In your instances tab, go to Actions &gt; Instance Settings &gt; Edit User Data</li> </ul> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fguthmclstxhlzxnpoae3.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fguthmclstxhlzxnpoae3.png" alt=" " width="800" height="389"></a></p> <ul> <li>Review the commands under current user data</li> </ul> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9dcja2t1zndu6m9qfun6.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9dcja2t1zndu6m9qfun6.png" alt=" " width="800" height="537"></a></p> <p>-Return to Instances tab, click on Instance State &gt; Stop Instance, when prompted , click 'stop'</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv2516arpky03r6mng1ik.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv2516arpky03r6mng1ik.png" alt=" " width="800" height="129"></a></p> <p>That's pretty much it!<br> The complete bare bone basics of running an AWS EC2 instance. You can restart your instance by going on Instance State &gt; Start<br> Review more info on the Instance Action tab.<br> This demo was done to show a basic idea of EC2 &amp; how to navigate around an EC2 instance.<br> You can do this exercise by going to <a href="proxy.php?url=https://explore.skillbuilder.aws/learn/course/external/view/elearning/11458/aws-cloud-quest-cloud-practitioner" rel="noopener noreferrer">AWS Cloud Quest</a></p> <p>Happy Coding!</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhrrksubuwr7gospvnt4p.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhrrksubuwr7gospvnt4p.gif" alt=" " width="500" height="312"></a></p>