Articles on Stephen Popoola's Blog

Articles

An Introduction to Attributes in PHP

In PHP 8, a new feature called *Attributes* was introduced. Attributes are like labels or tags that you can add to parts of your code to give them extra information.

31 October, 2024

php programming

Learn TypeScript With Me in 14 Days. Day 14

In this final part of the series, we will review the essential concepts we’ve mastered and explore real-world applications of TypeScript.

14 October, 2024

typescript javascript

Learn TypeScript With Me in 14 Days Day 13

In this part of the series, we will learn how TypeScript helps us to handle asynchronous code with tools like Promises and async/await.

13 October, 2024

typescript javascript

Learn TypeScript With Me in 14 Days Day 12

In this part of the series, we will focus on integrating TypeScript with Vue.js, one of the most popular frameworks for building dynamic user interfaces.

12 October, 2024

typescript javascript

Learn TypeScript With Me in 14 Days Day 11

Decorators in TypeScript provides a way to modify or enhance the behaviour of classes, methods, and properties without changing their implementation directly.

11 October, 2024

typescript javascript

Learn TypeScript With Me in 14 Days Day 10

In this part of the series, we will learn about **Utility Types** in TypeScript, which are built-in types that simplify many common type transformations.

10 October, 2024

typescript javascript

Learn TypeScript With Me in 14 Days Day 9

In this part of the series, we will explore advanced types in TypeScript, such as mapped types, conditional types, intersection types, and type guards.

9 October, 2024

typescript javascript

Learn TypeScript With Me in 14 Days Day 8

Day 8 of Learn TypeScript with me in 14 days. In this part of the series, we will focus on Modules in TypeScript. As projects grow, organising code into manageable and reusable pieces becomes crucial. Modules help you break down code into logical units that can be reused across files.

8 October, 2024

typescript javascript

Learn TypeScript With Me in 14 Days Day 7

Day 7 of Learn TypeScript with me in 14 days. In this part of the series, we will learn about Generics in TypeScript, a powerful feature that allows us to create reusable components, functions, and classes that work with different types while still maintaining type safety.

7 October, 2024

typescript javascript

Learn TypeScript With Me in 14 Days Day 6

Day 6 of Learn TypeScript with me in 14 days. In this part of the series, we will cover Classes** in TypeScript, which will allow us to implement object-oriented programming (OOP) principles in a type-safe way.

6 October, 2024

typescript javascript

Learn TypeScript With Me in 14 Days Day 5

Day 5 of Learn TypeScript with me in 14 days. In this part of the series, we will cover what Type Aliases and Interfaces are and how they are used in TypeScript to make our code more readable and maintainable.

5 October, 2024

typescript javascript

Learn TypeScript With Me in 14 Days Day 4

Day 4 of Learn TypeScript with me in 14 days. In this part of the series, we will cover how functions work in TypeScript. We’will dive into how to define function parameters, return types, and make use of TypeScript’s features like optional parameters and default values

4 October, 2024

typescript javascript

Learn TypeScript With Me in 14 Days Day 3

Day 3 of Learn TypeScript with me in 14 days. In this part of the series, we will cover how to work with arrays and objects in TypeScript. We will use arrays to store multiple tasks and objects to define the structure of each task.

3 October, 2024

typescript javascript

Learn TypeScript With Me in 14 Days Day 2

Day 2 of Learn TypeScript with me in 14 days. We'll cover basic types and how TypeScript helps to catch errors at compile time, making it easier to write more reliable and maintainable code

2 October, 2024

typescript javascript

Learn TypeScript With Me in 14 Days Day 1

Learn TypeScript with me in 14 days. We'll cover the basics, advanced topics, and build a project together.

1 October, 2024

typescript javascript

The Importance of Context Switching for Software Developers

Leveraging the power of effective context switching to allow developers maintain productivity and deliver high-quality work despite the constant influx of new tasks and priorities

11 September, 2024

productivity

How Let's Encrypt Revolutionised Web Security

A look into how LetsEncrypt changed the landscape of securing websites with SSL.

29 August, 2024

web security

Batch Processing With AWS Batch - Part 2

This is the second part of Using AWS Batch, a fully managed service that can be used to efficiently run workloads without the overhead of configuring and managing the resources required to run the workloads.

28 August, 2024

aws batch processing

Batch Processing With AWS Batch - Part 1

Using AWS Batch, a fully managed service that can be used to efficiently run workloads without the overhead of configuring and managing the resources required to run the workloads.

21 August, 2024

aws batch processing

Self Hosting With Coolify

Self-hosting has become an increasingly attractive option for developers looking to gain more control over their applications and reduce dependency on third-party hosting services. This article explores the benfits of using Coolify for self-hosting.

30 July, 2024

self hosting web development

Rebuilding My Blog with Astro

Taking you on a journey through the process of rebuilding my blog using Astro, a modern static site generator. Join me as I explore Astro's unique approach to building fast, optimized websites and how it transformed my blogging experience.

16 July, 2024

blog astro

Setting Up Load Balanced EC2 Instances with Terraform

Part 2 of Setting Up Infrastructure on AWS With Terraform. Povisioning a load balancer serving requests for two EC2 instances.

8 December, 2022

aws ec2 terraform

Setting Up Infrastructure on AWS With Terraform (Part 1)

A primer written to help those new to Infrastructure-as-code get their feet wet, setting up infrastructure with Terraform on AWS.

21 November, 2022

infrastructure-as-code terraform

App Deployment To ECS For Beginners

A guide on how to deploy a web application to Amazon Elastic Container Service (ECS) Container Service (ECS)

20 October, 2022

aws ecs docker web development

Flutter Development on Mac M1

I have been doing some flutter development on my Mac Intel for a while but not too long ago, I bought my Macbook Air M1 and tried to set up my Flutter environment.

16 November, 2021

flutter mobile development

TailwindCSS Typography Plugin

Explore the power of the TailwindCSS Typography Plugin in this blog post. Learn how to enhance your text styling effortlessly with this versatile plugin, and see examples of how it can improve the readability and aesthetics of your web content.

19 January, 2021

css tailwindcss web development

Trying Out Laravel Sail

Trying Out Laravel Sail - Created Docker environments for Laravel applications.

12 December, 2020

docker laravel web development

Backing Up MySQL

Backing up your MySQL Databases.

7 July, 2020

databases mysql backups

Managing Instances With AWS Scheduler

Saving AWS costs by managing Instances with AWS Scheduler.

4 April, 2020

aws cloud computing

Laravel Search With Elasticsearch

Search implementation with Elasticsearch in a Laravel application.

3 April, 2020

laravel elastic search

My Journey To VueJs

How VueJs became my favourite JavaScript Framework

7 January, 2020

javascript vuejs

Finding My Design Mojo With TailwindCSS

How TailwindCSS became my favourite CSS Framework

3 January, 2020

css tailwindcss web development

Starting Out With Laravel or Any PHP Framework

How to start out with Laravel or any other PHP Framework in your next project

1 January, 2020

php laravel

[{"id":"intro_to_php_attributes.md","slug":"intro_to_php_attributes","body":"\n# **An Introduction to Attributes in PHP**\n\nIn PHP 8, a new feature called *Attributes* was introduced. Attributes are like labels or tags that you can add to parts of your code (like classes, properties, and methods) to give them extra information. Think of attributes as a way to add *metadata* that your program can read and use to control how things behave.\n\nBefore PHP 8, if you wanted to add extra information to parts of your code, you often used comments (like PHPDoc) to document things or store data. However, comments aren’t directly readable by the code—they’re just for humans to read. Attributes, on the other hand, allow you to store data that *PHP can read and use while the code is running*.\n\nAttributes can make your code:\n\n* **Easier to read** by putting configuration right where it’s used.\n* **More organized** since metadata is stored alongside the code it describes.\n* **Dynamic** because PHP can directly interact with the attributes at runtime.\n\n### How to Use Attributes: A Basic Example\nLet’s start with a simple example. Say we want to mark certain functions in our code as requiring authentication. We’ll define an attribute called **RequiresAuth**.\n\nTo create an attribute in PHP, you define a class and use **#[Attribute]** at the top.\n\n**Define the Attribute**\n\n```php\n<?php\n\n#[Attribute] // This makes the class usable as an attribute\nclass RequiresAuth\n{\n    public function __construct(public bool $required = true) {}\n}\n\n```\n\n**Apply the Attribute**\n\nNow that we have the **RequiresAuth** attribute, let’s apply it to a method that should require authentication.\n\n```php\nclass AccountController\n{\n    #[RequiresAuth]\n    public function viewProfile()\n    {\n        // Code for viewing profile\n    }\n}\n```\n\nThis tells PHP that the **viewProfile()** method should only be accessed if the user is authenticated.\n\nAttributes add useful, structured data to your code, and while reflection is the tool used to access this data, we can ease into it with practical examples. Think of reflection as a way for PHP to look at itself—its functions, classes, and attributes—while your code is running.\n\nIf like me, you are using a PHP Framework like <a href=\"https://laravel.com/\" target=\"_blank\">Laravel</a>, you can use attributes to simplify certain parts of your code. \n\n### Custom Validation Rules with Attributes\n\nWhen working with models in Laravel, you often need to validate user data. With attributes, you can add validation rules directly to model properties. This keeps the rules close to the data they apply to.\n```php\n#[Attribute]\nclass Validate\n{\n    public function __construct(public string $rule) {}\n}\n```\n\nNow, apply the Validate attribute to properties in a model. Let’s add it to a User model:\n```php\nclass User\n{\n    #[Validate('required|email')]\n    public string $email;\n\n    #[Validate('required|min:8')]\n    public string $password;\n}\n```\n\nWe can write a function to read these validation rules and apply them dynamically:\n```php\nfunction getValidationRules(object $model)\n{\n    $reflection = new ReflectionClass($model);\n    $rules = [];\n\n    foreach ($reflection->getProperties() as $property) {\n        $attributes = $property->getAttributes(Validate::class);\n\n        foreach ($attributes as $attribute) {\n            $rule = $attribute->newInstance()->rule;\n            $rules[$property->getName()] = $rule;\n        }\n    }\n\n    return $rules;\n}\n\n// Usage\n$user = new User();\n$rules = getValidationRules($user);\n// Now $rules can be used in Laravel's Validator\n```\n\nAttributes rely heavily on <a href=\"https://www.php.net/manual/en/book.reflection.php/\" target=\"_blank\">Reflection</a>. If you have not come across or used reflection, think of reflection as a way for PHP to look at itself—its functions, classes, and attributes—while your code is running.\n\n### What is Reflection?\nReflection allows PHP to examine parts of its own code (classes, properties, methods, etc.) during runtime. In the context of attributes, reflection helps us find and use the data stored in those attributes.\n\nLet’s break this down with a straightforward example.\n\n#### Setting Up a Basic PHP Attribute\nImagine you’re building a system where some methods should only be used by administrators. You could create an attribute to mark these methods and check for the attribute when the method is called.\n\n```php\n<?php\n\n#[Attribute]\nclass AdminOnly\n{\n    public function __construct(public string $roleRequired = 'admin') {}\n}\n```\n\nThis **AdminOnly** attribute has a property **$roleRequired**, which we can set when applying the attribute.\n\n```php\nclass UserActions\n{\n    #[AdminOnly] // Using default 'admin' role\n    public function deleteUser()\n    {\n        echo \"Deleting a user!\";\n    }\n\n    #[AdminOnly(roleRequired: 'super-admin')]\n    public function resetDatabase()\n    {\n        echo \"Resetting the database!\";\n    }\n\n    public function viewProfile()\n    {\n        echo \"Viewing profile.\";\n    }\n}\n```\n\nIn this example, only **deleteUser** and **resetDatabase** methods are restricted by the **AdminOnly** attribute.\n\n **Create a Function to Check for the AdminOnly Attribute**\n```php\nfunction runIfAdminOnly($object, $methodName)\n{\n    $reflectionMethod = new ReflectionMethod($object, $methodName);\n    $attributes = $reflectionMethod->getAttributes(AdminOnly::class);\n\n    if (!empty($attributes)) {\n        $attribute = $attributes[0]->newInstance();\n        echo \"This method is restricted to role: {$attribute->roleRequired}\\n\";\n    } else {\n        echo \"This method has no role restriction.\\n\";\n    }\n\n    // Call the method if allowed (for demonstration purposes only)\n    $object->$methodName();\n}\n\n// Testing the function\n$userActions = new UserActions();\nrunIfAdminOnly($userActions, 'deleteUser'); // Outputs role restriction\nrunIfAdminOnly($userActions, 'viewProfile'); // No role restriction\n```\n\n**Explanation of Reflection in This Example**\n* ReflectionMethod($object, $methodName): This line lets PHP inspect the method on\n  the object.\n* getAttributes(AdminOnly::class): This gets any AdminOnly attributes applied to the method.\n* newInstance(): This method creates an instance of the attribute, so we can access properties like roleRequired.\n\nThis code checks for the AdminOnly attribute and then decides whether to run the method based on that.\n\n### Adding Metadata to APIs\nImagine you’re building a simple API, and you want to document which methods are accessible via **GET** and **POST** requests.\n\nFirst, you define the attribute like we did earlier:\n```php\n#[Attribute]\nclass Route\n{\n    public function __construct(\n        public string $method = 'GET',\n        public string $path = '/'\n    ) {}\n}\n```\n\nNow we apply the attribute to the methods:\n```php\nclass ApiController\n{\n    #[Route(method: 'GET', path: '/users')]\n    public function listUsers()\n    {\n        echo \"Listing users!\";\n    }\n\n    #[Route(method: 'POST', path: '/users')]\n    public function createUser()\n    {\n        echo \"Creating user!\";\n    }\n}\n```\n\n\nWe can now use reflection to check each method’s attributes to see what HTTP methods and paths are supported.\n\n```php\nfunction getApiRoutes($controller)\n{\n    $reflection = new ReflectionClass($controller);\n    foreach ($reflection->getMethods() as $method) {\n        $attributes = $method->getAttributes(Route::class);\n        foreach ($attributes as $attribute) {\n            $route = $attribute->newInstance();\n            echo \"Method: {$route->method}, Path: {$route->path}\\n\";\n        }\n    }\n}\n\ngetApiRoutes(new ApiController());\n```\n\nThis prints out the supported HTTP methods and paths, useful for API documentation or routing.\n\nIf you are a beginner or are not familiar with reflection, here are a few tips to simplify it:\n\n* **Start Small**: Use reflection to access attributes on simple classes or methods.\n* **Use Helper Functions**: Wrap reflection code in helper functions (like runIfAdminOnly) to keep the main logic easy to understand.\n* **Focus on Attributes, Not Reflection**: When using attributes, think of reflection as a tool that “looks” at attributes rather than as a complex feature. Over time, it will become more familiar.\n\n### Conclusion\nAttributes in PHP are powerful tools for adding structured metadata to your code, and reflection allows you to access that metadata. By using attributes, you can make your code more organized and efficient. With these examples, you now have a basic understanding of how to work with attributes without needing a framework like Laravel.\n\nRemember, reflection can feel tricky at first, but with practice, it can become a valuable tool in your PHP toolkit!\n\n\n\n\n\n\n\n\n","collection":"blog","data":{"title":"An Introduction to Attributes in PHP ","description":"In PHP 8, a new feature called *Attributes* was introduced. Attributes are like labels or tags that you can add to parts of your code to give them extra information.","author":"Steve Popoola","pubDate":"2024-10-31T00:00:00.000Z","heroImage":{"src":"/_astro/php_attributes.Be1g8tij.jpg","width":1200,"height":675,"format":"jpg","fsPath":"/app/src/content/blog/images/php_attributes.jpg"},"tags":["php","programming"],"heroImageUrl":"/_image?href=%2F_astro%2Fphp_attributes.Be1g8tij.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-14.md","slug":"learn-typescript-in-14-days-14","body":"\n# Day 14: Wrapping Up and Real-World Applications of TypeScript\n\nCongratulations on making it to the final part of Learn TypeScript With Me in 14 Days! On this final part, we’ll reflect on this journey of learning **TypeScript** . \n\nWe will  review the essential concepts we’ve mastered, explore **real-world applications** of TypeScript, and outline some **next steps** to continue our growth. By the end of this post, we will have a better understanding of how to apply TypeScript in professional projects and how to continue improving our TypeScript skills.\n\nExample code for each day is now available from the Github repository <a href=\"https://github.com/stevepop/typescript-in-14-days\" target=\"_blank\">https://github.com/stevepop/typescript-in-14-days</a>\n\n### **Recap of Core TypeScript Concepts**\n\nOver the past two weeks, we grasped a good understanding of how TypeScript works and how it enhances JavaScript development. Here’s a summary of the most important concepts we’ve covered:\n\n1. **Type Annotations**: How to explicitly declare variable types to catch errors early.\n2. **Interfaces and Type Aliases**: Defining the shape of objects and types to improve readability and enforce structure.\n3. **Generics**: Writing reusable code that works with any type while maintaining type safety.\n4. **Type Inference**: Allowing TypeScript to infer types based on context, reducing the need for explicit annotations.\n5. **Decorators**: Enhancing class, method, or property functionality using the decorator pattern.\n6. **Modules**: Organising code by splitting it into reusable modules.\n7. **Async/Await**: Handling asynchronous code effectively with TypeScript's support for promises and async/await.\n\n### **Real-World Applications of TypeScript**\n\nTypeScript has become an integral part of many **large-scale applications** due to its type safety, tooling support, and ease of integration. Let’s explore some real-world applications of TypeScript and how it’s used across various industries.\n\n#### **1. TypeScript in Large Web Applications**\n\nTypeScript is widely used in **enterprise-scale web applications**. Companies like **Microsoft**, **Airbnb**, **Slack**, and **Google** leverage TypeScript to manage the complexity of large codebases. By enforcing type safety, TypeScript helps developers catch errors early and make applications more reliable.\n\n- **Benefits**:\n  - **Code Maintainability**: TypeScript helps teams maintain large codebases by providing clear types and making refactoring safer.\n  - **Developer Experience**: Features like autocompletion, inline type checking, and better editor support make development faster and smoother.\n\n#### **2. TypeScript in Frontend Frameworks**\n\n**Vue.js**, **React**, and **Angular** all have first-class support for TypeScript. In frameworks like **Vue 3**, TypeScript has become essential for building scalable, maintainable, and type-safe components.\n\n#### **3. TypeScript in Backend Development**\n\nTypeScript is not limited to frontend applications. It is increasingly used in **backend development** with **Node.js**. Frameworks like **NestJS** and **Express** can be enhanced with TypeScript to provide strong typing and improved code organisation.\n\nIn **NestJS**, TypeScript powers the entire framework, providing a structure similar to enterprise-level solutions like **Spring** in Java. TypeScript makes backend development more reliable and predictable, especially when building APIs.\n\n#### **4. TypeScript for Cross-Platform Development**\n\nTypeScript is used in **cross-platform development** frameworks like **Ionic** and **React Native** to build mobile applications. By leveraging TypeScript, developers ensure type-safe code that can run across different platforms with minimal changes.\n\n**Ionic** apps, built using Angular and TypeScript, ensure that mobile app development can be type-safe while maintaining flexibility for deployment on iOS and Android.\n\n#### **5. TypeScript for Real-Time Applications**\n\nReal-time applications, like chat apps or collaboration tools, benefit from TypeScript’s type safety, particularly when managing **WebSocket connections** and handling data streams.\n\nIn a **real-time chat application**, TypeScript ensures that message data structures are consistent throughout the application, reducing the likelihood of runtime errors.\n\n### **Challenges and Tips for Using TypeScript in Large Projects**\n\nAs you start applying TypeScript to larger, real-world projects, here are some common challenges and tips to help you overcome them:\n\n#### **1. Avoid Over-Engineering Types**\n- **Challenge**: It's tempting to over-complicate your type definitions, especially when starting with TypeScript.\n- **Tip**: Keep your types simple. Start with broad types and narrow them as your code grows. Let TypeScript infer types wherever possible.\n\n#### **2. Modularise Your Codebase**\n- **Challenge**: Large applications can become difficult to manage if everything is in one place.\n- **Tip**: Use TypeScript's **modules** to split your code into reusable, logical parts. Make sure you structure your codebase in a way that keeps related types and functionality together.\n\n#### **3. Handling External Libraries**\n- **Challenge**: Some JavaScript libraries don’t come with TypeScript type definitions, making integration tricky.\n- **Tip**: Use the **DefinitelyTyped** repository to install type definitions for common libraries or write your own declarations using `declare module`.\n\n#### **4. Gradual Migration to TypeScript**\n- **Challenge**: Migrating a large JavaScript codebase to TypeScript can seem daunting.\n- **Tip**: Use TypeScript in **strict mode**, but don’t rush to convert everything at once. Start by introducing TypeScript files (`.ts`) for new features, and gradually refactor existing code.\n\n### **Next Steps in Your TypeScript Journey**\n\nHere’s how you can continue learning and growing with TypeScript:\n\n#### **1. Explore TypeScript in Depth**\n- Dive deeper into TypeScript’s features by reading books like **Effective TypeScript** and **TypeScript Deep Dive**. These resources will help you understand the language at an expert level and teach you how to write more efficient, scalable TypeScript.\n\n#### **2. Learn TypeScript with Other Libraries and Frameworks**\n- We’ve already explored how TypeScript works with **Vue.js**. Extend that knowledge to other libraries and frameworks like **NestJS** for backend development, **Electron** for desktop apps, and **Ionic** or **React Native** for mobile development.\n\n#### **3. Build Real Projects**\n- Apply your knowledge by building projects. You can:\n  - Create a **task management system** with Vue.js and TypeScript.\n  - Develop a **Node.js REST API** using TypeScript.\n  - Build a **real-time chat app** using WebSockets and TypeScript.\n\n#### **4. Contribute to Open Source Projects**\n- Contributing to TypeScript-based open-source projects on GitHub is a great way to practice your skills, learn from more experienced developers, and build connections within the development community.\n\n#### **5. Stay Updated with the TypeScript Ecosystem**\n- TypeScript is constantly evolving. Stay updated by following the official TypeScript blog, joining TypeScript forums, and participating in developer communities on platforms like **Stack Overflow** and **Reddit**.\n\n### **Conclusion**\n\nCongratulations!  Thank you for joining me on this journey to learn TypeScript in 14 days. Throughout this journey, we gained a good understanding of TypeScript and learnt how to apply it to real-world projects.\n\nThis is just the beginning. As TypeScript continues to evolve, your skills will become even more valuable in the world of JavaScript development. Keep experimenting, building, and contributing to projects to deepen your TypeScript expertise.\n\n### **Resources for Further Learning**\n\nHere are a few essential resources to guide you as you continue your TypeScript journey:\n\n<a href=\"https://www.typescriptlang.org/docs/handbook/intro.html\" target=\"_blank\">TypeScript Handbook</a>\n\n<a href=\"https://basarat.gitbook.io/typescript\" target=\"_blank\">TypeScript Deep Dive</a>\n\n<a href=\"https://effectivetypescript.com\" target=\"_blank\">Effective TypeScript</a>\n\n<a href=\"https://v3.vuejs.org/guide/typescript-support.html\" target=\"_blank\">Vue.js TypeScript Guide</a>\n\n\n<div class=\"post-navigation flex justify-between mt-8\">\n  <a href=\"/blog/learn-typescript-in-14-days-13\" class=\"prev-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">← Previous: Day 13 - Asynchronous Code in TypeScript</a>\n  <span class=\"next-post inline-block bg-gray-500 text-white py-2 px-4 rounded\">End of Series</span>\n</div>\n\n\n\n\n\n\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days. Day 14","description":"In this final part of the series, we will  review the essential concepts we’ve mastered and explore real-world applications of TypeScript.","author":"Steve Popoola","pubDate":"2024-10-14T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14days_14.BddmqrRE.jpg","width":1200,"height":630,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14days_14.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14days_14.BddmqrRE.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-13.md","slug":"learn-typescript-in-14-days-13","body":"## Day 13: Working with Asynchronous Code in TypeScript\n\nIn this part of the series, we’ will learn how TypeScript enhances the handling of **asynchronous code** with tools like **Promises** and **async/await**. Understanding asynchronous programming is crucial when working with tasks such as fetching data from APIs or handling operations that take time to complete. By the end of this post, we will know how to manage asynchronous workflows, use TypeScript to handle errors effectively, and integrate async code into our **Task Manager** project.\n\n### **What is Asynchronous Code?**\n\nIn JavaScript and TypeScript, **asynchronous code** allows us to run operations that take time (e.g., fetching data from a server, reading files) without blocking the execution of the rest of the code. This ensures that the application remains responsive during long-running tasks.\n\nTypeScript enhances this by providing type safety and clearer error handling mechanisms, helping you avoid common pitfalls when writing asynchronous code.\n\n### **Promises in TypeScript**\nPromises in TypeScript (and JavaScript) are objects representing the eventual completion or failure of an asynchronous operation. They provide a way to handle asynchronous operations more elegantly than traditional callback methods.\nYou can handle Promises using **.then()** for success or **.catch()** for errors.\n\n#### **Basic Structure of a Promise**\n\n```typescript\nconst myPromise: Promise<string> = new Promise((resolve, reject) => {\n  // Asynchronous operation here\n  if (/* operation successful */) {\n    resolve(\"Success!\");\n  } else {\n    reject(\"Error!\");\n  }\n});\n```\n\n#### **States of a Promise**\nA promise can be in one of three states:\n\n**1.** **Pending**: Initial state, neither fulfilled nor rejected.\n\n**2.** **Fulfilled**: The operation completed successfully.\n\n**3.** **Rejected**: The operation failed.\n\n#### **Example: Using Promises in TypeScript**\n\n```typescript\nfunction fetchData(url: string): Promise<string> {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      if (url === 'valid-url') {\n        resolve('Data fetched successfully!');\n      } else {\n        reject('Invalid URL!');\n      }\n    }, 1000);\n  });\n}\n\nfetchData('valid-url')\n  .then((data) => {\n    console.log(data);  // Output: Data fetched successfully!\n  })\n  .catch((error) => {\n    console.error(error);  // Handles errors if URL is invalid\n  });\n```\n\n#### **Explanation**:\n- **Promise<string>**: This function returns a Promise that resolves with a string if successful, or rejects with an error message.\n- Promises are ideal for handling asynchronous operations like data fetching or waiting for I/O operations.\n\n### **Async/Await in TypeScript**\n**Async/Await** is a modern syntax built on top of Promises that allows you to write asynchronous code in a more readable, synchronous-like manner.\n\n#### **Example: Using Async/Await in TypeScript**\n\n```typescript\nasync function fetchDataAsync(url: string): Promise<string> {\n  if (url === 'valid-url') {\n    return 'Data fetched successfully!';\n  } else {\n    throw new Error('Invalid URL!');\n  }\n}\n\nasync function main() {\n  try {\n    const data = await fetchDataAsync('valid-url');\n    console.log(data);  // Output: Data fetched successfully!\n  } catch (error) {\n    console.error(error.message);  // Handles errors if URL is invalid\n  }\n}\n\nmain();\n```\n\n#### **Explanation**:\n- **async** function**: Declares that the function will return a **Promise**.\n- **await**: Pauses the execution of the function until the Promise resolves. It simplifies code structure compared to chaining **.then()** and **.catch()**.\n\n### **Error Handling in Asynchronous Code**\nHandling errors in asynchronous code is important to ensure your application can gracefully handle unexpected situations, like failed API requests or timeouts.\n\n#### **Example: Robust Error Handling with Async/Await**\n\n```typescript\nasync function fetchDataWithErrorHandling(url: string): Promise<string> {\n  try {\n    const data = await fetchDataAsync(url);\n    return data;\n  } catch (error) {\n    console.error('Error fetching data:', error.message);\n    throw error;  // Re-throw the error to handle it elsewhere if needed\n  }\n}\n\nasync function mainWithErrorHandling() {\n  try {\n    const data = await fetchDataWithErrorHandling('invalid-url');\n    console.log(data);\n  } catch (error) {\n    console.error('Failed to fetch data:', error.message);\n  }\n}\n\nmainWithErrorHandling();\n```\n\n#### **Explanation**:\n- **Try/Catch Blocks**: Wrap your **await** calls in **try/catch** blocks to handle errors. This pattern makes it easy to catch and log any problems with asynchronous code.\n\n### **Applying Async Functions to the Task Manager**\n\nLet’s see how we can integrate asynchronous code into the **Task Manager** project. Imagine we need to simulate an asynchronous operation like fetching tasks from an API.\n\n#### **Task Manager with Asynchronous Data Fetching**\n\n```vue\n<template>\n  <div>\n    <h2>Task Manager</h2>\n    <button @click=\"fetchTasks\">Fetch Tasks</button>\n    <p v-if=\"errorMessage\" class=\"error\">{{ errorMessage }}</p>\n    <ul>\n      <li v-for=\"task in tasks\" :key=\"task.id\">\n        {{ task.title }} - {{ task.completed ? 'Completed' : 'Not Completed' }}\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue';\n\ninterface Task {\n  id: number;\n  title: string;\n  completed: boolean;\n}\n\nexport default defineComponent({\n  setup() {\n    const tasks = ref<Task[]>([]);\n    const errorMessage = ref<string>('');\n\n    const fetchTasks = async () => {\n      try {\n        // Simulate async API call\n        const response = await new Promise<Task[]>((resolve, reject) => {\n          setTimeout(() => {\n            resolve([\n              { id: 1, title: 'Learn TypeScript', completed: false },\n              { id: 2, title: 'Build Task Manager', completed: true }\n            ]);\n          }, 1000);\n        });\n\n        tasks.value = response;\n      } catch (error) {\n        errorMessage.value = 'Failed to fetch tasks';\n      }\n    };\n\n    return {\n      tasks,\n      errorMessage,\n      fetchTasks\n    };\n  }\n});\n</script>\n\n<style>\n.error {\n  color: red;\n}\n</style>\n```\n\n#### **Explanation**:\n- **Asynchronous Fetching**: The **fetchTasks** function simulates an asynchronous API call to fetch tasks.\n- **Error Handling**: If the fetch fails, an error message is displayed.\n- **Reactivity**: The tasks are stored in a reactive **tasks** array, and the UI updates once the tasks are fetched.\n\n### **Best Practices for Asynchronous Code in TypeScript**\nHere are some best practices to follow when writing asynchronous code in TypeScript:\n#### **1. Always Handle Errors**:\nNever assume that asynchronous operations will always succeed. Use **try/catch** blocks around **await** calls to handle errors properly.\n\n#### **2. Explicitly Type Promises**:\nAlways specify the return type of your **async** functions. For example, **Promise<string>** ensures that the function returns a string wrapped in a Promise, making it easier to debug and reason about your code.\n\n#### **3. Avoid Deep Nesting**:\nUsing **async/await** can help you avoid deeply nested callback hell that comes with traditional Promise chains. Keep your code structure simple and flat.\n\n#### **4. Parallelize Where Possible**:\nIf multiple asynchronous operations can be run in parallel, use **Promise.all()** to improve performance.\n\n```typescript\nconst [result1, result2] = await Promise.all([fetchData(url1), fetchData(url2)]);\n```\n\n#### **5. Gracefully Handle Cancellations**:\nFor operations that might need to be canceled (e.g., a long API call), consider using **AbortController** to handle cancellations gracefully.\n\n### **What’s Next?**\nToday, we explored how TypeScript helps you handle **asynchronous code** using **Promises** and **async/await**, as well as how to manage errors effectively. We applied these concepts to the **Task Manager** project, enhancing it with asynchronous data fetching.\n\nTomorrow, we’ll wrap up the series with a final review and discuss additional TypeScript features and resources to continue our learning journey.\n\n**Resources for Further Reading**\n\n<a href=\"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#asyncawait\" target=\"_blank\">TypeScript Handbook - Async Programming</a>\n\n<a href=\"https://web.dev/articles/promises\" target=\"_blank\">JavaScript Promises: An Introduction</a>\n\n<a href=\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises\" target=\"_blank\">Async/Await in JavaScript</a>\n\n<div class=\"post-navigation flex justify-between mt-8\">\n  <a href=\"/blog/learn-typescript-in-14-days-12\" class=\"prev-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">← Prev: Day 12 - TypeScript with Vue.js</a>\n  \n  </div>\n\n\n\n\n\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days Day 13","description":"In this part of the series, we will learn how TypeScript helps us to handle asynchronous code with tools like Promises and async/await.","author":"Steve Popoola","pubDate":"2024-10-13T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14days_13.9CtmCT4R.jpg","width":1200,"height":630,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14days_13.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14days_13.9CtmCT4R.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-12.md","slug":"learn-typescript-in-14-days-12","body":"### **Day 12: TypeScript with Vue.js**\n\nIn this part of the series, we will focus on integrating **TypeScript** with **Vue.js**, one of the most popular frameworks for building dynamic user interfaces. TypeScript adds static typing and better tooling to Vue, improving code maintainability and preventing runtime errors. By the end of this post, we will have learnt how to set up and use TypeScript with Vue 3, and how it enhances the development experience for our **Task Manager** project.\n\n### **Why Use TypeScript with Vue.js?**\n\nVue.js, especially in its third version, fully supports TypeScript out of the box. By integrating TypeScript, we get the following advantages:\n1. **Type Safety**: TypeScript helps catch errors during development by ensuring that variables, props, and components adhere to the correct types.\n2. **Better Developer Experience**: With TypeScript, we get better autocompletion, documentation, and error checking, which speeds up development.\n3. **Maintainability**: Well-typed code is easier to understand and maintain, especially in larger applications where multiple components interact.\n\n### **Step 1: Setting Up TypeScript with Vue.js**\n\nVue 3 makes TypeScript integration seamless. Follow these steps to create a Vue project with TypeScript support.\n\n#### **Install the Vue CLI**\n```bash\nnpm install -g @vue/cli\n```\n\n#### **Creating a New Vue App with TypeScript**:\n\nTo set up a new Vue project with TypeScript, you can use Vue CLI:\n\n```bash\nvue create task-manager-vue\n```\n\nSelect **“Manually select features”**. For the purpose of this walkthrough, we will select Babel and TypeScript and select Vue version 3.\n\n```bash\nVue CLI v5.0.8\n? Please pick a preset: Manually select features\n? Check the features needed for your project: Babel, TS\n? Choose a version of Vue.js that you want to start the project with 3.x\n? Use class-style component syntax? No\n? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?\n Yes\n? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files\n? Save this as a preset for future projects? No\n```\n\nAfter the setup completes, you should see the following output:\n\n```bash\nSuccessfully created project task-manager-vue-app.\n👉  Get started with the following commands:\n\n $ cd task-manager-vue-app\n $ npm run serve\n```\n\n### **Project Structure Overview After Creating a Vue App**\n\nAfter you run **vue create task-manager-vue** with TypeScript selected, the following structure is generated:\n\n```\nbash\n\ntask-manager-vue/\n│\n├── node_modules/        # Installed dependencies\n├── public/              # Public assets (index.html, etc.)\n│   └── index.html       # The main HTML file for your app\n│\n├── src/                 # Your source code lives here\n│   ├── assets/          # Static assets like images and icons\n│   ├── components/      # Vue components you will create\n│   │   └── HelloWorld.vue  # Example component\n│   ├── App.vue          # Root component of the app\n│   ├── main.ts          # Entry point of the application\n│   └── shims-vue.d.ts   # TypeScript declaration for Vue files\n│\n├── tests/               # Unit or end-to-end tests (if selected during setup)\n├── .gitignore           # Files and folders to be ignored by git\n├── package.json         # Project metadata and dependencies\n├── tsconfig.json        # TypeScript configuration\n├── babel.config.js      # Babel configuration (if needed)\n└── README.md            # Project documentation\n```\n\n### **Key Files and Folders**\n\n#### **1. **public/index.html****:\n- This file serves as the main HTML entry point for our application.\n- Vue CLI injects the compiled app into this file during the build process.\n\n#### **2. **src/main.ts****:\n- This is the entry point of our Vue app. It initializes the Vue instance and mounts our app to a DOM element.\n- Since we’re using TypeScript, the file extension is **.ts** instead of **.js**.\n\nHere’s an example of what it might look like:\n\n```ts\nimport { createApp } from 'vue';\nimport App from './App.vue';\n\ncreateApp(App).mount('#app');\n```\n\n#### **3. **src/App.vue****:\n- This is the root component of our application. It serves as the base for all other components in your app.\n- Typically, this component contains a **<router-view>** for handling routing if  we are using Vue Router but in this case we are not using it.\n\n```vue\n<template>\n  <div id=\"app\">\n    <img alt=\"Vue logo\" src=\"./assets/logo.png\">\n    <HelloWorld msg=\"Welcome to Your Vue.js + TypeScript App\"/>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport HelloWorld from './components/HelloWorld.vue';\n\nexport default defineComponent({\n  name: 'App',\n  components: {\n    HelloWorld,\n  },\n});\n</script>\n\n<style>\n#app {\n  text-align: center;\n  color: #2c3e50;\n}\n</style>\n```\n\n#### **4. **src/components/****:\n- This folder holds all of our custom **Vue components**.\n- By default, Vue CLI generates an example component called **HelloWorld.vue**. You’ll create additional components here as your project grows.\n\n#### **5. **src/shims-vue.d.ts****:\n- This file helps TypeScript understand **.vue** files, which contain both HTML and JavaScript/TypeScript code.\n- It’s crucial for enabling TypeScript’s type checking inside Vue’s single-file components (SFCs).\n\n```ts\ndeclare module '*.vue' {\n  import { DefineComponent } from 'vue';\n  const component: DefineComponent<{}, {}, any>;\n  export default component;\n}\n```\n\n#### **6. **tsconfig.json****:\n- This file configures how TypeScript is used in our project. It specifies options such as module resolution, strict mode, and type checking.\n- You can customize the settings here to adjust TypeScript’s behavior in your project.\n\n### **Running the Project**\n\nOnce your Vue app is created, you can start the development server by running:\n\n```bash\nnpm run serve\n```\n\nThis will compile your application and start a local development server at **http://localhost:8080/**.\n\n### **Summary of the Project Structure**\n\n- ****public/****: Contains the static assets and the main **index.html** file.\n- ****src/****: The source directory that holds all your components, assets, and the entry point (**main.ts**).\n- ****App.vue****: The root component that serves as the foundation of your app.\n- ****components/****: Contains reusable Vue components, like the example **HelloWorld.vue**.\n- ****shims-vue.d.ts****: Ensures that TypeScript understands **.vue** files.\n- ****tsconfig.json****: Configures TypeScript’s behavior within the project.\n\nThis structure provides a clean and organized starting point for building our Vue.js app with TypeScript.\n\n### **Writing Vue Components with TypeScript**\n\nLet’s take a look at how to write Vue components using TypeScript. We'll start with a basic component example and then explore more advanced features.\n\n#### **Basic Vue Component with TypeScript**:\n\n```javascript\n<template>\n  <div>\n    <h3>{{ title }}</h3>\n    <p>{{ completed ? 'Completed' : 'Not Completed' }}</p>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  props: {\n    title: {\n      type: String,\n      required: true\n    },\n    completed: {\n      type: Boolean,\n      required: true\n    }\n  }\n});\n</script>\n```\n\n### Explanation:\n- **lang=\"ts\"** : This directive tells Vue to treat the script block as TypeScript.\n- **Typed Props**: We use TypeScript to ensure that the title is a string and completed is a boolean.\n\n### **Using the Composition API with TypeScript**\n\nVue 3 introduced the **Composition API**, which makes working with TypeScript even more flexible and powerful. Let’s see how to handle reactive data using the Composition API and TypeScript.\n\n#### **Example of a Task Component with Composition API**:\n\n```vue\n<template>\n  <div>\n    <h3>{{ title }}</h3>\n    <p>{{ isCompleted ? 'Completed' : 'Not Completed' }}</p>\n    <button @click=\"toggleCompletion\">Toggle Completion</button>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue';\n\nexport default defineComponent({\n  props: {\n    title: String,\n    completed: Boolean\n  },\n  setup(props) {\n    const isCompleted = ref(props.completed);\n\n    const toggleCompletion = () => {\n      isCompleted.value = !isCompleted.value;\n    };\n\n    return {\n      isCompleted,\n      toggleCompletion\n    };\n  }\n});\n</script>\n```\n\n#### **Explanation**:\n- ****ref(props.completed)****: We define **isCompleted** as a reactive reference using the **ref** function. TypeScript infers the type from the prop, ensuring that it’s always a boolean.\n- **Composition API**: The **setup** function allows you to manage component logic, making it easier to work with TypeScript in Vue.\n\n### **Applying TypeScript to the Task Manager**\n\nNow that you’re familiar with how TypeScript works with Vue.js, let’s apply these concepts to the **Task Manager** project.\n\n#### **Task Manager with TypeScript and Composition API**:\n\n```javascript\n// Task.vue\n<template>\n      <div>\n    <h2>Task Manager</h2>\n    <input v-model=\"newTaskTitle\" placeholder=\"Enter task title\" />\n    <button @click=\"addTask(newTaskTitle)\">Add Task</button>\n    <p v-if=\"errorMessage\" class=\"error\">{{ errorMessage }}</p>\n    <ul>\n      <li v-for=\"task in tasks\" :key=\"task.id\">\n        {{ task.title }} - {{ task.completed ? 'Completed' : 'Not Completed' }}\n        <button @click=\"toggleCompletion(task.id)\">Toggle Completion</button>\n      </li>\n    </ul>\n  </div>\n  </template>\n\n  <script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  \n  interface Task {\n    id: number;\n    title: string;\n    completed: boolean;\n  }\n  \n  export default defineComponent({\n  setup() {\n    const tasks = ref<Task[]>([]);\n    const newTaskTitle = ref<string>('');\n    const errorMessage = ref<string>('');\n\n    // Add a task only if the title is unique\n    const addTask = (title: string) => {\n      if (title.trim() === '') {\n        errorMessage.value = 'Task title cannot be empty!';\n        return;\n      }\n\n      const isDuplicate = tasks.value.some(task => task.title.toLowerCase() === title.toLowerCase());\n\n      if (isDuplicate) {\n        errorMessage.value = `Task with the title \"${title}\" already exists!`;\n        return;\n      }\n\n      errorMessage.value = '';  // Clear any previous error messages\n\n      tasks.value.push({\n        id: tasks.value.length + 1,\n        title: title.trim(),\n        completed: false\n      });\n\n      newTaskTitle.value = '';  // Clear the input field after adding the task\n    };\n\n    const toggleCompletion = (id: number) => {\n      const task = tasks.value.find(task => task.id === id);\n      if (task) {\n        task.completed = !task.completed;\n      }\n    };\n\n    return {\n      tasks,\n      newTaskTitle,\n      errorMessage,\n      addTask,\n      toggleCompletion\n    };\n  }\n});\n</script>\n\n<style>\n.error {\n  color: red;\n}\n</style>\n```\n\n#### Explanation:\n- **Typed State with ref**: The **tasks** array is defined with a TypeScript interface, ensuring that each task has the expected shape (**id**, **title**, and **completed**).\n- **Reactivity**: **tasks** is reactive, meaning that any change to the tasks array will automatically update the DOM.\n- **Function Types**: Both the **addTask** and **toggleCompletion** functions are explicitly typed, ensuring that the data remains consistent.\n\n### **Best Practices When Using TypeScript with Vue.js**\nHere are some best practices for using TypeScript in your Vue.js project:\n\n#### **1. Define Clear Interfaces for Props and State**:\nAlways define clear interfaces for your components’ props, state, and any other data. This improves readability and ensures that your components behave as expected.\n\n#### **2. Use the Composition API for Complex Components**:\nThe Composition API works well with TypeScript, especially for larger components where you have multiple reactive states or methods. It provides better type inference and organization.\n\n#### **3. Use TypeScript's Utility Types**:\nLeverage TypeScript’s utility types, such as **Partial**, **Omit**, and **Pick**, to handle complex data structures efficiently.\n\n#### **4. Enable TypeScript’s Strict Mode**:\nFor better type safety, enable TypeScript’s strict mode by adding this to your **tsconfig.json**:\n\n```json\n{\n  \"compilerOptions\": {\n    \"strict\": true\n  }\n}\n```\n\n#### **5. Type Assertion Sparingly**:\nAlthough TypeScript allows you to cast or assert types, avoid using type assertions (**as**) unless absolutely necessary. Instead, rely on TypeScript’s type inference wherever possible.\n\n### **What’s Next?**\nToday, we explored how to integrate **TypeScript** with **Vue.js**, learned how TypeScript improves your development experience in Vue, and applied these techniques to your **Task Manager** project. Tomorrow, we’ll dive into advanced **TypeScript with Asynchronous Code**, exploring how TypeScript handles promises, async/await, and error handling to ensure type safety in asynchronous workflows.\n\n**Resources for Further Reading**\n\n<a href=\"https://v3.vuejs.org/guide/typescript-support.html\" target=\"_blank\">TypeScript Handbook</a>\n\n<a href=\"https://v3.vuejs.org/guide/typescript-support.html\" target=\"_blank\">Vue 3 TypeScript Support Guide</a>\n\n\n<div class=\"post-navigation flex justify-between mt-8\">\n  <a href=\"/blog/learn-typescript-in-14-days-11\" class=\"prev-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">← Prev: Day 11 - Decorators in TypeScript</a>\n  <a href=\"/blog/learn-typescript-in-14-days-13\" class=\"next-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">Next: Day 13 - Asynchronous Code in TypeScript →</a>\n  </div>\n\n\n\n\n\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days Day 12","description":"In this part of the series, we will focus on integrating TypeScript with Vue.js, one of the most popular frameworks for building dynamic user interfaces.","author":"Steve Popoola","pubDate":"2024-10-12T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14days_12.eJiOmxTx.jpg","width":1200,"height":630,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14days_12.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14days_12.eJiOmxTx.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-11.md","slug":"learn-typescript-in-14-days-11","body":"## Day 11: Decorators in TypeScript\n\nIn this part of the series, we will be learning one of the more advanced and powerful features in TypeScript: **Decorators**.  If you are following this series, the last few parts may have been a bit advanced if you are new to TypeScript and may require more research and reading to fully grasp the concepts. This is why I have made sure to add a section for useful resources at the end of each part. \n\nDecorators provide a way to modify or enhance the behaviour of classes, methods, and properties without changing their implementation directly. By the end of this post, will have learnt how to create and apply decorators and see how they can simplify certain patterns in our code, especially for features like logging, validation, and metadata handling.\n\n### **What Are Decorators?**\n**Decorators** are a special type of declaration that can be attached to a class, method, property, or parameter. They allow us to modify the behaviour of the decorated entity. Decorators are widely used in frameworks like **Angular** for dependency injection and **NestJS** for building server-side applications, but we can also use them to enhance our own applications even if we are not using those frameworks.\n\nIn TypeScript, decorators are implemented using **ES7 decorator syntax** and are essentially functions that take specific arguments depending on what they are decorating.\n\n### Enabling Experimental Decorators\nBefore we dive into decorators, make sure you enable decorators in TypeScript by adding the following setting to your `tsconfig.json` file:\n\n```json\n{\n  \"compilerOptions\": {\n    \"experimentalDecorators\": true\n  }\n}\n```\n\nThis allows TypeScript to recognise the decorator syntax.\n\n### **Understanding Class Decorators**\n\nA **Class Decorator** is a function that is applied to the class constructor. It can be used to modify or add behaviour to a class without changing its definition.\n\n#### **Example of a Simple Class Decorator**:\n\n```typescript\nfunction logClass(constructor: Function) {\n  console.log(`Class \"${constructor.name}\" is being created.`);\n}\n\n@logClass\nclass Task {\n  constructor(public title: string) {}\n}\n\nconst task = new Task('Learn TypeScript');\n```\n\n#### **Explanation**:\nWhen the **Task** class is defined with the **@logClass** decorator, the **logClass** function is called with the **Task** class constructor as its argument. This results in the following output to the console;\n```bash\nClass \"Task\" is being created.\n```\n\n- **@logClass**: The **logClass** function is a **decorator** that logs a message when the `Task` class is instantiated.\n- **Class Decorators**: They receive the class constructor as an argument, allowing you to modify or extend the behaviour of the class.\n\n\n### **Method Decorators**\n\nA **Method Decorator** is applied to a method within a class and allows you to modify or enhance the behaviour of that method.\n\n#### **Example of a Method Decorator for Logging Execution Time**:\n\n```typescript\nfunction logExecutionTime(target: any, propertyKey: string, descriptor: PropertyDescriptor) {\n  const originalMethod = descriptor.value;\n  \n  descriptor.value = function (...args: any[]) {\n    console.time(`${propertyKey} execution time`);\n    const result = originalMethod.apply(this, args);\n    console.timeEnd(`${propertyKey} execution time`);\n    return result;\n  };\n}\n\nclass TaskManager {\n  @logExecutionTime\n  completeTask(taskId: number) {\n    for (let i = 0; i < 1e6; i++) {}  // Simulating a time-consuming operation\n    console.log(`Task ${taskId} completed.`);\n  }\n}\n\nconst taskManager = new TaskManager();\ntaskManager.completeTask(1);\n```\n\n#### **Explanation**:\n- The **logExecutionTime** function is a decorator that logs the execution time of a method.\n* The **@logExecutionTime** decorator is applied to the **completeTask** method in the **TaskManager** class, causing the **logExecutionTime** function to be called with the **completeTask** method's descriptor.\n* The **completeTask** method simulates a time-consuming operation and logs a message.\n* Creating an instance of the **TaskManager** class and calling the **completeTask** method results in the execution time being logged to the console.\n\nWhen the **TaskManager** class is defined with the **@logExecutionTime** decorator applied to the **completeTask** method, the **logExecutionTime** function is called with the **completeTask** method's descriptor. This results in the **completeTask** method being overridden to include timing logic.\n\nWhen the **completeTask** method is called on the **taskManager** instance, the following happens:\n1 The timer starts with the label **\"completeTask execution time\"**.\n2 The original **completeTask** method is executed, simulating a time-consuming operation and logging a message.\n3 The timer ends with the label **\"completeTask execution time\"**.\n4 The result of the original method is returned.\n\n\n### **Property Decorators**\nA **Property Decorator** is applied to a class property and can be used to modify or add metadata to properties.\n\n#### **Example of a Property Decorator for Validation**:\n\n```typescript\nfunction minLength(length: number) {\n  return function (target: any, propertyKey: string) {\n    let value: string;\n\n    const getter = function () {\n      return value;\n    };\n\n    const setter = function (newVal: string) {\n      if (newVal.length < length) {\n        throw new Error(`The ${propertyKey} must be at least ${length} characters long.`);\n      }\n      value = newVal;\n    };\n\n    Object.defineProperty(target, propertyKey, {\n      get: getter,\n      set: setter,\n    });\n  };\n}\n\nclass Task {\n  @minLength(5)\n  title: string;\n\n  constructor(title: string) {\n    this.title = title;\n  }\n}\n\ntry {\n  const task = new Task('Todo');\n} catch (error) {\n  console.error(error.message);  // Output: The title must be at least 5 characters long.\n}\n```\n\n#### **Explanation**:\nWhen the **Task** class is defined with the **@minLength(5)** decorator applied to the **title** property, the **minLength** function is called with the **title** property's descriptor. This results in the **title** property being overridden to include validation logic.\n\nWhen a new instance of the **Task** class is created with the title **'Todo'**, the following happens:\n1. The **title** property's setter function is called with the value **'Todo'**.\n2. The setter function checks if the length of **'Todo'** is at least 5 characters.\n3. Since **'Todo'** is only 4 characters long, an error is thrown with the message **\"The title must be at least 5 characters long.\"**.\n4. The error is caught in the **catch** block, and the error message is logged to the console.\n\n- **Use Case**: Property decorators can be used for validation, logging, or enforcing constraints on class properties.\n\n\n### **Parameter Decorators**\n\nA **Parameter Decorator** is used to add metadata to the parameters of class methods. These are less commonly used but can be helpful in certain scenarios like dependency injection or logging parameter usage.\n\n#### **Example of a Parameter Decorator for Logging Parameter Usage**:\n\n```typescript\nfunction logParameter(target: any, propertyKey: string, parameterIndex: number) {\n  const originalMethod = target[propertyKey];\n\n  target[propertyKey] = function (...args: any[]) {\n    console.log(`Parameter at index ${parameterIndex} for method ${propertyKey}:`, args[parameterIndex]);\n    return originalMethod.apply(this, args);\n  };\n}\n\nclass TaskManager {\n  completeTask(@logParameter taskId: number) {\n    console.log(`Completing task ${taskId}`);\n  }\n}\n\nconst taskManager = new TaskManager();\ntaskManager.completeTask(42);\n```\n\n#### **Explanation**:\nWhen the **TaskManager** class is defined with the **@logParameter** decorator applied to the **taskId** parameter of the **completeTask** method, the **logParameter** function is called with the **completeTask** method's descriptor and the index of the **taskId** parameter. This results in the **completeTask** method being overridden to include logging logic.\n\nWhen the **completeTask** method is called on the **taskManager** instance with the argument **42**, the following happens:\n1 The overridden **completeTask** method is executed.\n2 The value of the parameter at the specified index (in this case, **taskId** at index **0**) is logged to the console.\n3 The original **completeTask** method is called with the same arguments, and its result is returned.\n\n- **Use Case**: Parameter decorators are useful for logging, validation, or dependency injection on specific method parameters.\n\n### **Applying Decorators to the Task Manager**\n\nLet’s attempt to apply some decorators to the **Task Manager** project to improve logging, validation, and behaviour.\n\n#### **1. Logging Class Creation with a Class Decorator**:\n\n```typescript\nfunction logClassCreation(constructor: Function) {\n  console.log(`TaskManager class is being created.`);\n}\n\n@logClassCreation\nclass TaskManager {\n  completeTask(taskId: number) {\n    console.log(`Completing task ${taskId}`);\n  }\n}\n```\n\n#### **2. Validating Task Title Length with a Property Decorator**:\n\n```typescript\nfunction minLength(length: number) {\n  return function (target: any, propertyKey: string) {\n    let value: string;\n\n    const getter = function () {\n      return value;\n    };\n\n    const setter = function (newVal: string) {\n      if (newVal.length < length) {\n        throw new Error(`The ${propertyKey} must be at least ${length} characters long.`);\n      }\n      value = newVal;\n    };\n\n    Object.defineProperty(target, propertyKey, {\n      get: getter,\n      set: setter,\n    });\n  };\n}\n\nclass Task {\n  @minLength(3)\n  title: string;\n\n  constructor(title: string) {\n    this.title = title;\n  }\n}\n```\n\n#### **3. Logging Execution Time for Completing Tasks with a Method Decorator**:\n\n```typescript\nfunction logExecutionTime(target: any, propertyKey: string, descriptor: PropertyDescriptor) {\n  const originalMethod = descriptor.value;\n  \n  descriptor.value = function (...args: any[]) {\n    console.time(`${propertyKey} execution time`);\n    const result = originalMethod.apply(this, args);\n    console.timeEnd(`${propertyKey} execution time`);\n    return result;\n  };\n}\n\nclass TaskManager {\n  @logExecutionTime\n  completeTask(taskId: number) {\n    console.log(`Task ${taskId} completed.`);\n  }\n}\n```\n\n\n### **What’s Next?**\n\nIn this part of the series, we have learnt how to use **decorators** in TypeScript to modify and enhance the behaviour of classes, methods, properties, and parameters. Decorators provide a clean and reusable way to inject additional functionality like logging, validation, and metadata handling without modifying the core logic of our application.\n\nTomorrow, we’ll dive into TypeScript with **VueJS** to see how TypeScript can improve the development experience for modern web applications.\n\n### **Useful Resources**\n<a href=\"https://www.typescriptlang.org/docs/handbook/decorators.html\" target=\"_blank\">TypeScript Handbook - Decorators</a>\n\n<a href=\"https://www.udemy.com/course/understanding-typescript\" target=\"_blank\">Understanding TypeScript Course on Udemy</a>\n\n<div class=\"post-navigation flex justify-between mt-8\">\n  <a href=\"/blog/learn-typescript-in-14-days-10\" class=\"prev-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">← Prev: Day 10 - Utility Types In TypeScript</a>\n  <a href=\"/blog/learn-typescript-in-14-days-12\" class=\"next-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">Next: Day 12 - TypeScript with Vue.js →</a>\n  </div>\n\n\n\n\n\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days Day 11","description":"Decorators in TypeScript provides a way to modify or enhance the behaviour of classes, methods, and properties without changing their implementation directly.","author":"Steve Popoola","pubDate":"2024-10-11T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14days_11.Dfb4M7tB.jpg","width":1200,"height":630,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14days_11.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14days_11.Dfb4M7tB.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-10.md","slug":"learn-typescript-in-14-days-10","body":"\n## Day 10: Utility Types in TypeScript\n\n\nIn this part of the series, we will learn about **Utility Types** in TypeScript, which are built-in types that simplify many common type transformations. These utilities save us from writing repetitive code by allowing us to quickly create new types based on existing ones. By the end of this session, we will be familiar with the most commonly used utility types and how to use them to streamline the **Task Manager** project.\n\n### **Why Use Utility Types?**\nUtility types are built-in helpers provided by TypeScript to make type manipulation easier. They allow us to modify and transform existing types without having to manually redefine them. Whether we need to make properties optional, read-only, or pick and omit specific properties, utility types provide a clean and efficient way to work with types in our project.\n\n### **Common Utility Types**\n\nLet’s explore some of the most commonly used utility types in TypeScript.\n\n#### **1. Partial<Type>**\n\nThe **Partial**<Type> utility allows you to create a type where all properties of the original type are optional. This is useful when you don’t want to provide all properties when updating or initialising objects.\n\n```typescript\ninterface Task {\n  id: number;\n  title: string;\n  completed: boolean;\n}\n\nfunction updateTask(id: number, updates: Partial<Task>): Task {\n  const task = { id, title: 'Default Title', completed: false }; // Example task\n  return { ...task, ...updates };\n}\n\nconst updatedTask = updateTask(1, { title: 'Updated Title' });\nconsole.log(updatedTask);  // Output: { id: 1, title: 'Updated Title', completed: false }\n```\n\n#### **Explanation**:\n- **Partial**<Task>: The **Partial** utility creates a type where all properties of **Task** are optional.\n- **Use Case**: This is useful when updating only specific properties of an object without having to provide all properties.\n\n#### **2. Required<Type>**\n\nThe **Required<Type>** utility makes all properties of a type mandatory, overriding any optional properties in the original type.\n\n```typescript\ninterface Task {\n  id: number;\n  title?: string;\n  completed: boolean;\n}\n\nconst task: Required<Task> = { id: 1, title: 'Complete project', completed: true };\nconsole.log(task);\n```\n\n#### **Explanation**:\n- **Required<Task>**: This utility ensures that all properties, even optional ones, are required.\n- **Use Case**: Use this when you need all properties to be present, such as when dealing with data that must be fully populated.\n\n#### **3. Readonly<Type>**\n\nThe **Readonly<Type>** utility makes all properties of a type immutable, meaning they cannot be reassigned.\n\n```typescript\ninterface Task {\n  id: number;\n  title: string;\n  completed: boolean;\n}\n\nconst task: Readonly<Task> = { id: 1, title: 'Learn TypeScript', completed: false };\n// task.title = 'New Title';  // Error: Cannot assign to 'title' because it is a read-only property\n```\n\n#### **Explanation**:\n- **Readonly<Task>**: This utility ensures that no properties of the task can be modified after initialisation.\n- **Use Case**: Useful for scenarios where immutability is important, such as managing state or ensuring certain values don’t change after being set.\n\n#### **4. Pick<Type, Keys>**\n\nThe **Pick<Type, Keys>** utility allows you to create a type that includes only the specified keys from the original type.\n\n```typescript\ninterface Task {\n  id: number;\n  title: string;\n  completed: boolean;\n}\n\ntype TaskOverview = Pick<Task, 'id' | 'title'>;\n\nconst taskOverview: TaskOverview = { id: 1, title: 'Complete project' };\nconsole.log(taskOverview);\n```\n\n#### **Explanation**:\n- **Pick<Task, 'id' | 'title'>**: This creates a new type that only includes the **id** and **title** properties from **Task**.\n- **Use Case**: Use this when you only need specific properties from a larger object type.\n\n#### **5. Omit<Type, Keys>**\n\nThe **Omit<Type, Keys>** utility creates a type that excludes the specified keys from the original type.\n\n```typescript\ninterface Task {\n  id: number;\n  title: string;\n  completed: boolean;\n}\n\ntype TaskWithoutCompletion = Omit<Task, 'completed'>;\n\nconst task: TaskWithoutCompletion = { id: 1, title: 'New Task' };\nconsole.log(task);\n```\n\n#### **Explanation**:\n- **Omit<Task, 'completed'>**: This utility removes the **complete**d property from the **Task** type.\n- **Use Case**: Useful when you want to work with a type that excludes certain properties.\n\n### **Applying Utility Types to Task Manager**\n\nNow that we understand the common utility types, let’s apply them to enhance our **Task Manager** project.\n\n#### **1. Using ‘Partial’ for Task Updates**\n\nWe can simplify the task update process by using the **Partial** utility to make all properties of the **Task** type optional during an update.\n\n```typescript\nimport { Task } from './task';\n\nclass TaskManager {\n  private tasks: Task[] = [];\n\n  updateTask(id: number, updates: Partial<Task>): Task | undefined {\n    const task = this.tasks.find(task => task.id === id);\n    if (task) {\n      Object.assign(task, updates);\n    }\n    return task;\n  }\n}\n\nconst taskManager = new TaskManager();\ntaskManager.updateTask(1, { completed: true });\n```\n\n#### **Explanation**:\n- **Partial<Task>** allows us to update a task with only the fields we want to modify without requiring all properties.\n\n#### **2. Using ‘Readonly’ for Immutable Tasks**\n\nIn scenarios where tasks should be immutable after being added to the system, we can use the **Readonly** utility type.\n\n```typescript\nimport { Readonly } from 'typescript';\n\nconst readonlyTask: Readonly<Task> = { id: 1, title: 'Immutable Task', completed: false };\n// readonlyTask.completed = true;  // Error: Cannot assign to 'completed' because it is a read-only property\n```\n\n#### **Explanation**:\n- **Readonly<Task>** ensures that no task properties can be modified after it’s created.\n\n#### **3. Using 'Pick'` for Task Overview**\n\nIf we need to display only part of a task’s details (for example, only the **id** and **title**), we can use the **Pick** utility to extract these properties.\n\n```typescript\ntype TaskOverview = Pick<Task, 'id' | 'title'>;\n\nconst taskOverview: TaskOverview = { id: 1, title: 'Complete project' };\nconsole.log(taskOverview); // Output: { id: 1, title: 'Complete project' }\n```\n\n#### **Explanation**:\n- **Pick<Task, 'id' | 'title'>** allows us to create a lightweight version of the `Task` type that only includes specific properties.\n\n### **Other Useful Utility Types**\n\n#### **1. Record<Keys, Type>**\n\nThe **Record<Keys, Type>** utility creates an object type where the keys are of type **Keys** and the values are of type **Type**.\n\n```typescript\nimport { Task } from './task';\n\ntype TaskRecord = Record<number, Task>;\n\nconst tasks: TaskRecord = {\n  1: { id: 1, title: 'Learn TypeScript', completed: false },\n  2: { id: 2, title: 'Build Task Manager', completed: true },\n};\n```\n\n#### **Explanation**:\n- **Record<number, Task>** creates an object where each key is a number, and each value is a **Task**.\n\n#### **2. Exclude<Type, ExcludedUnion>**\n\nThe **Exclude<Type, ExcludedUnion>** utility removes certain types from a union.\n\n```typescript\ntype Status = 'pending' | 'completed' | 'archived';\ntype ActiveStatus = Exclude<Status, 'archived'>;\n\nconst taskStatus: ActiveStatus = 'completed'; // Valid\n// const archivedTask: ActiveStatus = 'archived'; // Error: Type '\"archived\"' is not assignable to type 'ActiveStatus'\n```\n\n#### **Explanation**:\n- **Exclude<Status, 'archived'>** removes the '**archived**' status, leaving only '**pending**' and '**completed**' as valid options.\n\n### **Example: Using Utility Types for Form Data**\n\nWe can combine **Partial** and **Readonly** to handle both optional fields and immutability. For instance, form fields may be optional during initial input, but once submitted, you want to prevent any modifications.\n\n```typescript\ninterface UserForm {\n  name: string;\n  email: string;\n  age: number;\n  address: string;\n}\n\n// A form that allows optional fields during input\ntype EditableForm = Partial<UserForm>;\n\n// Once submitted, the form data becomes read-only\ntype SubmittedForm = Readonly<UserForm>;\n\n// Example usage:\nconst editableForm: EditableForm = { email: 'john@example.com' };\nconst submittedForm: SubmittedForm = { name: 'John', email: 'john@example.com', age: 30, address: '100 London Rd, London' };\n\n// Editable form allows updating fields\neditableForm.name = 'Jane Doe';\n\n// Submitted form is read-only and prevents updates\n// submittedForm.name = 'Jane Doe'; // Error: Cannot assign to 'name' because it is a read-only property\n```\n\n#### **Explanation**:\n- **Partial<UserForm>** allows for flexibility during the form input stage, as not all fields need to be provided.\n- **Readonly<UserForm>** locks the form data after submission to ensure no further changes are made.\n\n### **What’s Next?**\n\nIn this part of the series, we learnt how to use **Utility Types** to simplify type transformations and manipulations in TypeScript. We applied utility types such as **Partial**, **Readonl**, **Pick**, and **Omit** to enhance the **Task Manager** project. These types are crucial for writing clean, maintainable code that is both flexible and type-safe.\n\nIn the next part of the series, we will dive into **Decorators in TypeScript**, an advanced feature  that allows us to add functionality to classes, methods, and properties in a clean and reusable way.\n\n### **Useful Resources**\n<a href=\"https://www.typescriptlang.org/docs/handbook/utility-types.html\" target=\"_blank\">TypeScript Documentation - Utility Types In TypeScript</a>\n\n<a href=\"https://www.typescripttutorial.net/typescript-tutorial/typescript-utility-types/\" target=\"_blank\">Understanding TypeScript Utility Types</a>\n\n\n<div class=\"post-navigation flex justify-between mt-8\">\n  <a href=\"/blog/learn-typescript-in-14-days-9\" class=\"prev-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">← Prev: Day 9 - Advanced Types In TypeScript</a>\n  <a href=\"/blog/learn-typescript-in-14-days-11\" class=\"next-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">Next: Day 11 - Decorators in TypeScript →</a>\n  </div>\n\n\n\n\n\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days Day 10","description":"In this part of the series, we will learn about **Utility Types** in TypeScript, which are built-in types that simplify many common type transformations.","author":"Steve Popoola","pubDate":"2024-10-10T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14days_10.CeiUkfKq.jpg","width":1200,"height":630,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14days_10.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14days_10.CeiUkfKq.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-9.md","slug":"learn-typescript-in-14-days-9","body":"\n## Day 9: Advanced Types In TypeScript\n\nIn this part of the series, we will explore **advanced types** in TypeScript, such as **mapped types**, **conditional types**, **intersection types**, and **type guards**. These features allows us to write more flexible, reusable, and powerful code. We’ll break down each concept into digestible examples, so that we can gain good understanding of how they work and how to apply them in practice.\n\n### **Intersection Types**\nIntersection types combine multiple types into one, meaning an object must satisfy all combined types.\n\n#### **Basic Example of Intersection Types**:\n\n```typescript\ninterface Person {\n  name: string;\n  age: number;\n}\n\ninterface Employee {\n  companyId: string;\n  position: string;\n}\n\ntype EmployeeDetails = Person & Employee;\n\nconst employee: EmployeeDetails = {\n  name: 'Alice',\n  age: 30,\n  companyId: '123',\n  position: 'Engineer'\n};\n\nconsole.log(employee);\n```\n\n#### **Explanation**:\n- **Person & Employee**: This combines the **Person** and **Employee** interfaces, meaning any object of type **EmployeeDetails** must have all properties from both interfaces.\n- **Use Case**: Intersection types are useful when creating objects that must conform to multiple contracts (e.g., a person who is also an employee).\n\n### Union Types\n\nUnion types allow a value to be one of several types, providing flexibility while maintaining type safety.\n\n#### **Union Type Example**:\n\n```typescript\nfunction printInfo(info: string | number): void {\n  if (typeof info === 'string') {\n    console.log(`Info is a string: ${info}`);\n  } else {\n    console.log(`Info is a number: ${info}`);\n  }\n}\n\nprintInfo('TypeScript');  // Output: Info is a string: TypeScript\nprintInfo(101);           // Output: Info is a number: 101\n```\n\n#### **Explanation**:\n- **string | number**: The **:info**: parameter can either be a **:string**: or a **:number**:.\n- **Type Narrowing**: Using **:typeof**:, we can differentiate between the types at runtime and handle each accordingly.\n\n### **Type Guards**\n\n**Type guards** are essential for working with union types. They let you narrow the type within a block of code, ensuring that TypeScript understands which type you're working with.\n\n#### **Example with instanceof Type Guard**:\n\n```typescript\nclass Dog {\n  bark(): void {\n    console.log('Woof!');\n  }\n}\n\nclass Cat {\n  meow(): void {\n    console.log('Meow!');\n  }\n}\n\nfunction makeSound(animal: Dog | Cat): void {\n  if (animal instanceof Dog) {\n    animal.bark();\n  } else {\n    animal.meow();\n  }\n}\n\nconst dog = new Dog();\nconst cat = new Cat();\n\nmakeSound(dog);  // Output: Woof!\nmakeSound(cat);  // Output: Meow!\n```\n\n#### **Explanation**:\n- **instanceof**: This checks if an object is an instance of a class. TypeScript will automatically narrow down the type based on the result.\n- **Use Case**: Type guards are useful when handling objects of different types in the same function, ensuring the correct methods are called for each type.\n\nLet’s try and pass something else into makeSound that’s not a Dog or Cat and see what happens.\n\n```typescript\nclass Sheep {\n  baah(): void {\n    console.log('Baah!');\n  }\n}\n\nconst sheep = new Sheep();\nmakeSound(sheep);  // Argument of type 'Sheep' is not assignable to parameter of type 'Dog | Cat'.\n```\n#### \nThe type guard prevented an object other than a Dog or a Cat from being passed into the function.\n\n#### **Example with \"in\" Keyword**:\n\n```typescript\ninterface Car {\n  drive(): void;\n}\n\ninterface Boat {\n  sail(): void;\n}\n\nfunction operateVehicle(vehicle: Car | Boat): void {\n  if ('drive' in vehicle) {\n    vehicle.drive();\n  } else {\n    vehicle.sail();\n  }\n}\n\nconst car: Car = { drive: () => console.log('Driving a car') };\nconst boat: Boat = { sail: () => console.log('Sailing a boat') };\n\noperateVehicle(car);   // Output: Driving a car\noperateVehicle(boat);  // Output: Sailing a boat\n```\n\n#### **Explanation**:\n- **'property' in object**: This checks whether a property exists in the object, allowing TypeScript to narrow the type.\n- **Use Case**: The **in** operator works well when dealing with object types that don’t have an explicit class relationship.\n\n### **Conditional Types**\n\n**Conditional types** in TypeScript allow you to define types that change based on a condition, enabling you to build more dynamic type logic. It uses syntax similar to ternary operators in JavaScript (**condition ? trueValue : falseValue**).\n\n#### **Simple Conditional Type Example**:\n\n```typescript\ntype IsString<T> = T extends string ? true : false;\n\ntype Test1 = IsString<string>;  // true\ntype Test2 = IsString<number>;  // false\n```\n\n#### **Explanation**:\n- **T extends string ? true : false**: This syntax defines a conditional type. It checks if **T** is a string, and if so, returns **true**; otherwise, it returns **false**.\n- **Use Case**: Conditional types are powerful when you need to change a type based on specific criteria or conditions.\n\n#### **Example: Conditionally Extract Properties**:\n\n```typescript\ninterface Task {\n  title: string;\n  completed: boolean;\n}\n\ntype ExtractCompleted<T> = T extends { completed: boolean } ? T : never;\n\ntype CompletedTask = ExtractCompleted<Task>;  // Task\ntype NonTask = ExtractCompleted<string>;      // never\n```\n\n#### **Explanation**:\n- **ExtractCompleted<T>**: This type checks if **T** has a **completed** property. If it does, it returns **T**; otherwise, it returns **never**.\n- **Use Case**: Conditional types are often used for type filtering, transformation, or inferring specific properties.\n\n### **Mapped Types**\n**Mapped types** allow you to transform the properties of an existing type, applying specific changes to each property. This is extremely useful when creating new versions of a type based on a transformation rule.\n\n#### **Basic Example of Mapped Types**:\n\n```typescript\ninterface Task {\n  title: string;\n  completed: boolean;\n}\n\ntype ReadOnlyTask = {\n  readonly [K in keyof Task]: Task[K];\n};\n\nconst task: ReadOnlyTask = {\n  title: 'Complete TypeScript Course',\n  completed: false\n};\n\n// task.title = 'New Title'; // Error: Cannot assign to 'title' because it is read-only\n```\n\n#### **Explanation**:\n- **[K in keyof T]**: This syntax iterates over each property in **Task**, and applies a transformation (**readonly** in this case).\n- **Use Case**: Mapped types allow you to easily create utility types like **Readonly**, **Partial**, or **Required**.\n\n#### **Example: Partial Type with Mapped Types**:\n\n```typescript\ntype PartialTask = {\n  [K in keyof Task]?: Task[K];\n};\n\nconst taskUpdate: PartialTask = {\n  title: 'Updated Title'  // Only some properties can be updated\n};\n\nconsole.log(taskUpdate);\n```\n\n#### **Explanation**:\n- **Partial**: Here, **PartialTask** makes all properties of **Task** optional, so you can pass only the properties you want to update.\n- **Use Case**: This is useful for creating types where not all properties are required.\n\n### **Applying Advanced Types to Task Manager**\n\nLet’s integrate these advanced types into our **Task Manager** project to simulate applying TypeScript’s advanced features to real-world scenarios.\n\n#### **Union Types for Task Status**:\n\n```typescript\ntype TaskStatus = 'completed' | 'pending' | 'archived';\n\ninterface Task {\n  id: number;\n  title: string;\n  status: TaskStatus;\n}\n\nfunction getTaskDetails(task: Task): string {\n  switch (task.status) {\n    case 'completed':\n      return `${task.title} is completed.`;\n    case 'pending':\n      return `${task.title} is pending.`;\n    case 'archived':\n      return `${task.title} is archived.`;\n    default:\n      return `${task.title} has an unknown status.`;\n  }\n}\n```\n\n#### **Mapped Types for Task Transformations**:\n\n```typescript\ntype ReadOnlyTask = {\n  readonly [K in keyof Task]: Task[K];\n};\n\nconst readonlyTask: ReadOnlyTask = {\n  id: 1,\n  title: 'Read-only Task',\n  status: 'completed'\n};\n\n// readonlyTask.title = 'New Title'; // Error: Cannot assign to 'title' because it is a read-only property\n```\n\n#### **Conditional Types for Task Filtering**:\n\n```typescript\ntype IsHighPriority<T extends Task> = T['status'] extends 'pending' ? true : false;\n\nconst task1: IsHighPriority<{ id: 1; title: 'Urgent Task'; status: 'pending' }> = true;\nconst task2: IsHighPriority<{ id: 2; title: 'Completed Task'; status: 'completed' }> = false;\n```\n\n\n### **What’s Next?**\n\nIn this part, we learnt how to use **Advanced Types** in TypeScript with in-depth examples. We covered intersection types, union types, type guards, conditional types, and mapped types, and applied them to the **Task Manager** project. Each example provided practical insights into how you can use these powerful features in your projects.\n\nIn the next part, we will deepen our knowledge of TypeScript by exploring **TypeScript’s Utility Types**\nIf you have any questions or comments, feel free contact me at steve [at] stevepopoola.uk.\n\n### **Useful Resources**\n<a href=\"https://www.typescriptlang.org/docs/handbook/intro.html\" target=\"_blank\">TypeScript Handbook</a>\n\n<a href=\"https://www.typescriptlang.org/docs/handbook/2/types-from-types.html\" target=\"_blank\">TypeScript Advanced Types</a>\n\n<a href=\"https://www.typescriptlang.org/docs/handbook/2/mapped-types.html\" target=\"_blank\">Mapped Types </a>\n\n<a href=\"https://www.typescriptlang.org/docs/handbook/2/narrowing.html\" target=\"_blank\">Type Guards in TypeScript</a>\n\n<a href=\"https://www.typescriptlang.org/docs/handbook/2/conditional-types.html\" target=\"_blank\">Conditional Types</a>\n\n\n<div class=\"post-navigation flex justify-between mt-8\">\n  <a href=\"/blog/learn-typescript-in-14-days-8\" class=\"prev-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">← Prev: Day 8 - Modules in TypeScript</a>\n  <a href=\"/blog/learn-typescript-in-14-days-10\" class=\"next-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">Next: Day 10 - Utility Types in TypeScript →</a>\n  </div>\n\n\n\n\n\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days Day 9","description":"In this part of the series, we will explore advanced types in TypeScript, such as mapped types, conditional types, intersection types, and type guards.","author":"Steve Popoola","pubDate":"2024-10-09T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14days_9.wG8DideP.jpg","width":1200,"height":630,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14days_9.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14days_9.wG8DideP.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-8.md","slug":"learn-typescript-in-14-days-8","body":"\n# Day 8: Modules in TypeScript\n\n### **Organising Your Code with Modules in TypeScript**\n\nWe have just gone past half-way through learning TypeScript in 14 days. If you have been following along, well done! In this part of the series, we will focus on **Modules** in TypeScript. As projects grow, organising code into manageable and reusable pieces becomes crucial. Modules help you break down code into logical units that can be reused across files. By the end of this session, you’ll understand how to create, import, and export modules and refactor our **Task Manager** project using modules.\n\n\n### **Why Use Modules in TypeScript?**\nModules allow you to **encapsulate functionality** and make it reusable across your project. Instead of having all your code in a single file, you can split your code into smaller, more manageable pieces. These pieces can then be **imported and exported** between files, improving code organisation, maintainability, and scalability.\n\n### **Creating and Exporting Modules**\nIn TypeScript, a module is simply a file. Anything defined in a file is **scoped** to that file by default. You can make it available to other files by using **export** statements.\n\n#### **Example of Exporting a Module**\n\nLet’s assume you have a **task.ts** file that defines a **Task** class. You can export it as a module like this:\n\n```typescript\n// task.ts\nexport class Task {\n  id: number;\n  title: string;\n  completed: boolean;\n\n  constructor(id: number, title: string, completed: boolean = false) {\n    this.id = id;\n    this.title = title;\n    this.completed = completed;\n  }\n\n  toggleCompletion(): void {\n    this.completed = !this.completed;\n  }\n}\n```\n\n#### **Explanation**:\n- **export** keyword: The **export** keyword makes the **Task** class available for import in other files.\n\n### **Importing Modules**\nNow that we’ve exported the **Task** class from **task.ts**, let’s import it in another file. For example, in **index.ts**, we can import the **Task** class and use it.\n\n#### **Example of Importing a Module**\n\n```typescript\n// index.ts\nimport { Task } from './task';\n\nconst task1 = new Task(1, 'Learn TypeScript');\nconst task2 = new Task(2, 'Build a Task Manager');\n\nconsole.log(task1, task2);\n```\n\n#### **Explanation**:\n- **import { Task }**: This imports the **Task** class from the **task.ts** file.\n- **Relative Path**: Notice the **./task** path. This is a relative import pointing to the file where the **Task** class is defined.\n\n### **Named Exports vs Default Exports**\nTypeScript supports two types of exports: **named exports** and **default exports**.\n\n#### **Named Exports**:\nNamed exports allow you to export multiple things from a module, and when you import them, you must use the same names.\n\n```typescript\n// utils.ts (Named Exports)\nexport function logMessage(message: string): void {\n  console.log(message);\n}\n\nexport function logError(error: string): void {\n  console.error(error);\n}\n\n// index.ts\nimport { logMessage, logError } from './utils';\n\nlogMessage('Everything is working!');\nlogError('Something went wrong!');\n```\n\n#### **Default Exports**:\nDefault exports allow you to export a single thing from a module. When you import it, you can give it any name.\n\n```typescript\n// settings.ts (Default Export)\nexport default {\n  theme: 'dark',\n  language: 'en'\n};\n\n// index.ts\nimport settings from './settings';\n\nconsole.log(settings.theme); // Output: dark\n```\n\n#### **When to Use Named vs Default Exports**:\n- **Named Exports**: Use when you want to export multiple things from a file, or when you want to import a specific part of a module.\n- **Default Exports**: Use when your file only exports a single value, class, or function.\n\n### Organising the Task Manager Project with Modules\n\nNow that we understand how modules work, let’s refactor the **Task Manager** project to use multiple modules, separating different parts of the code into logical units.\n\n#### **1. Create **task.ts** for Task Class**\n\nWe’ll move the **Task** class into its own module (**task.ts**) and export it.\n\n```typescript\n// task.ts\nexport class Task {\n  id: number;\n  title: string;\n  completed: boolean;\n\n  constructor(id: number, title: string, completed: boolean = false) {\n    this.id = id;\n    this.title = title;\n    this.completed = completed;\n  }\n\n  toggleCompletion(): void {\n    this.completed = !this.completed;\n  }\n\n  getDetails(): string {\n    return `${this.title} | ${this.completed ? 'Completed' : 'Incomplete'}`;\n  }\n}\n```\n\n#### **2. Create **taskManager.ts** to Manage Task Operations**\n\nNext, we’ll create a **taskManager.ts** file to manage adding, removing, and toggling tasks.\n\n```typescript\n// taskManager.ts\nimport { Task } from './task';\n\nexport class TaskManager {\n  private tasks: Task[] = [];\n\n  addTask(title: string): Task {\n    const newTask = new Task(this.tasks.length + 1, title);\n    this.tasks.push(newTask);\n    return newTask;\n  }\n\n  removeTask(id: number): void {\n    this.tasks = this.tasks.filter(task => task.id !== id);\n  }\n\n  toggleTaskCompletion(id: number): void {\n    const task = this.tasks.find(task => task.id === id);\n    if (task) {\n      task.toggleCompletion();\n    }\n  }\n\n  getAllTasks(): Task[] {\n    return this.tasks;\n  }\n}\n```\n\n#### **3. Import and Use Modules in **index.ts****\n\nFinally, in **index.ts**, we’ll import the **TaskManager** and use it to manage tasks.\n\n```typescript\n// index.ts\nimport { TaskManager } from './taskManager';\n\nconst taskManager = new TaskManager();\n\ntaskManager.addTask('Learn TypeScript');\ntaskManager.addTask('Build Task Manager');\ntaskManager.toggleTaskCompletion(1);\n\nconsole.log(taskManager.getAllTasks().map(task => task.getDetails()));\n```\n\n#### **Explanation**:\n- We separated task-related logic into modules (**task.ts** and **taskManager.ts**).\n- We used **named exports** to export the **Task** and **TaskManager** classes.\n- This modular structure improves code organisation and makes it easier to maintain and scale the project.\n\n### **Step 5: Re-Exporting Modules**\n\nIn larger projects, you may have multiple modules and want to re-export them from a single file for convenience. Let’s say you have **task.ts** and **taskManager.ts**, you can re-export them from an **index.ts** file.\n\n#### **Example of Re-Exporting Modules**\n\n```typescript\n// index.ts (Re-exporting)\nexport { Task } from './task';\nexport { TaskManager } from './taskManager';\n```\n\nNow, instead of importing from individual files, you can import everything from **index.ts**.\n\n```typescript\n// app.ts\nimport { Task, TaskManager } from './index';\n\nconst taskManager = new TaskManager();\ntaskManager.addTask('Learn TypeScript');\nconsole.log(taskManager.getAllTasks());\n```\n\n### **Step 6: Avoiding Circular Dependencies**\n\nOne thing to be cautious about when working with modules is **circular dependencies**. A **circular dependency** occurs when two or more modules depend on each other, creating a cycle. This can lead to issues where modules fail to load correctly or cause runtime errors.\n\n#### **Example of a Circular Dependency**:\n\n```typescript\n// A.ts\nimport { B } from './B';\nexport class A {}\n\n// B.ts\nimport { A } from './A';\nexport class B {}\n```\n\n#### **Solution**:\nTo avoid circular dependencies:\n- Break dependencies by creating a new module to handle shared logic.\n- Use **interfaces** or **dependency injection** to decouple the modules.\n\n### How Interfaces Help Avoid Circular Dependencies\nOne way to avoid circular dependencies is by using **interfaces** to define the types and behaviours needed by modules, instead of having modules directly depend on each other. This allows one module to depend on the **structure** (interface) rather than the **implementation** of another module.\n\n#### **Example Scenario: Circular Dependency**\nLet’s imagine a scenario where we have two classes: **TaskManager** and **TaskLogger**. The **TaskManager** is responsible for managing tasks, and the **TaskLogger** is responsible for logging when a task is added or removed.\n\n```typescript\n// taskManager.ts\nimport { TaskLogger } from './taskLogger'; // Circular dependency\nexport class TaskManager {\n  constructor(private logger: TaskLogger) {}\n\n  addTask(task: string): void {\n    this.logger.log(`Added task: ${task}`);\n  }\n}\n\n// taskLogger.ts\nimport { TaskManager } from './taskManager'; // Circular dependency\nexport class TaskLogger {\n  constructor(private manager: TaskManager) {}\n\n  log(message: string): void {\n    console.log(message);\n  }\n}\n```\n\nHere:\n- **TaskManager** imports **TaskLogger**.\n- **TaskLogger** imports **TaskManager**.\nThis creates a **circular dependency**, which can cause issues at runtime.\n\n**Use an Interface to Decouple the Dependencies**\n\nTo avoid circular dependencies, we can decouple these classes by using an **interface**. Instead of **TaskLogger** directly depending on **TaskManager**, it will depend on an interface that defines the behaviour **TaskManager** needs, but without requiring the full class definition.\n\n#### **1. Define an Interface for Task Logging**\n\n```typescript\n// loggerInterface.ts\nexport interface Logger {\n  log(message: string): void;\n}\n```\n\nThis interface defines the behaviour needed for logging tasks (**log**), but it doesn't import or depend on **TaskManager**.\n\n#### **2. Implement the Interface in **TaskLogger****\n\nNow, we can implement the **Logger** interface in the **TaskLogger** class.\n\n```typescript\n// taskLogger.ts\nimport { Logger } from './loggerInterface';\n\nexport class TaskLogger implements Logger {\n  log(message: string): void {\n    console.log(`[TaskLogger] ${message}`);\n  }\n}\n```\n\nHere, **TaskLogger** implements the **Logger** interface but doesn’t depend on **TaskManager** directly, breaking the cycle.\n\n#### **3. Refactor **TaskManager** to Use the Logger Interface**\n\nNow, **TaskManager** only depends on the **Logger** interface, rather than the full **TaskLogger** class. This breaks the circular dependency.\n\n```typescript\n// taskManager.ts\nimport { Logger } from './loggerInterface';\n\nexport class TaskManager {\n  constructor(private logger: Logger) {}\n\n  addTask(task: string): void {\n    this.logger.log(`Added task: ${task}`);\n  }\n}\n```\n\n#### **4. Wiring It All Together**\nFinally, in **index.ts** (or whichever file initialises the application), we wire everything together. This is where we inject the actual **TaskLogger** implementation into **TaskManager**.\n\n```typescript\n// index.ts\nimport { TaskManager } from './taskManager';\nimport { TaskLogger } from './taskLogger';\n\nconst logger = new TaskLogger();\nconst taskManager = new TaskManager(logger);\n\ntaskManager.addTask('Learn TypeScript');\n```\n\n### **Explanation**:\n- ****TaskManager**** now depends on the **Logger** interface, not the **TaskLogger** class, breaking the circular dependency.\n- We inject **TaskLogger** when we initialise **TaskManager** in the **index.ts** file. This way, the **TaskManager** and **TaskLogger** classes are decoupled.\n\n### **What’s Next?**\nToday, we learnt how to use **Modules** in TypeScript to organise our code into reusable and maintainable pieces. We applied modules to the **Task Manager** project, improving its structure. Tomorrow, we’ll dive into **TypeScript’s Advanced Types**, such as **mapped types** and **conditional types** to enhance our TypeScript skills further. If you have any questions or comments, feel free contact me at steve [at] stevepopoola.uk.\n\n\n<div class=\"post-navigation flex justify-between mt-8\">\n  <a href=\"/blog/learn-typescript-in-14-days-7\" class=\"prev-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">← Prev: Day 7 - Generics in TypeScript</a>\n  <a href=\"/blog/learn-typescript-in-14-days-9\" class=\"next-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">Next: Day 9 - Advanced Types In TypeScript →</a>\n  </div>\n\n\n\n\n\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days Day 8","description":"Day 8 of Learn TypeScript with me in 14 days. In this part of the series, we will focus on Modules in TypeScript. As projects grow, organising code into manageable and reusable pieces becomes crucial. Modules help you break down code into logical units that can be reused across files.","author":"Steve Popoola","pubDate":"2024-10-08T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14days_8.BuNtkmJk.jpg","width":1200,"height":630,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14days_8.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14days_8.BuNtkmJk.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-7.md","slug":"learn-typescript-in-14-days-7","body":"\n# **Day 7: Generics in TypeScript**\n\n#### Understanding Generics in TypeScript\n\nIn this part of the series, we will learn about **Generics** in TypeScript, a powerful feature that allows us to create reusable components, functions, and classes that work with different types while still maintaining type safety. By the end of this post, we will understand how to use generics in our code and apply them to our ongoing **Task Manager** project.\n\n### **Why Use Generics?**\nGenerics allow us to write code that is **flexible** and **reusable**, without sacrificing type safety. Instead of hardcoding a specific type, generics let you define **placeholders** for types that can be substituted when the function, class, or component is used. This makes it easier to create reusable code that works with a wide variety of data types.\n\n### **Understanding Generics with Functions**\nLet’s start by defining a simple generic function that works with different types of data. A common use case for generics is a function that accepts an array of any type and returns the first element.\n\n#### **Example of a Generic Function**:\n\n```typescript\nfunction getFirstElement<T>(arr: T[]): T {\n  return arr[0];\n}\n\nconst firstNumber = getFirstElement<number>([1, 2, 3]);\nconsole.log(firstNumber); // Output: 1\n\nconst firstString = getFirstElement<string>(['TypeScript', 'JavaScript']);\nconsole.log(firstString); // Output: TypeScript\n```\n\n#### **Explanation**:\n- The **T** is a **generic type parameter**. It acts as a placeholder for the actual type that will be provided when the function is called.\n- **Type Safety**: The function is type-safe, ensuring that the type of the input array and the return value match.\n- **Reusability**: The same function can be used for different types, such as arrays of numbers or strings.\n\nIn this example, we use **getFirstElement** for both an array of numbers and an array of strings without having to rewrite the function.\n\n### **Using Generics with Arrays**\n\nYou can use generics to create utility functions that work with arrays of any type. Let’s create a function that returns the last element of an array using generics.\n\n#### **Example: Get Last Element of an Array**\n\n```typescript\nfunction getLastElement<T>(arr: T[]): T {\n  return arr[arr.length - 1];\n}\n\nconst lastNumber = getLastElement<number>([10, 20, 30]);\nconsole.log(lastNumber); // Output: 30\n\nconst lastString = getLastElement<string>(['apple', 'banana', 'cherry']);\nconsole.log(lastString); // Output: cherry\n```\n\nHere, we can reuse the same logic for arrays of any type, further demonstrating how generics helps avoid duplication in code.\n\n### **Generics with Classes**\nGenerics can also be applied to **classes** to make them more flexible. Let’s create a generic class that can manage a list of items, regardless of the type of the items.\n\n#### **Example of a Generic Class**:\n\n```typescript\nclass List<T> {\n  private items: T[] = [];\n\n  addItem(item: T): void {\n    this.items.push(item);\n  }\n\n  getAllItems(): T[] {\n    return this.items;\n  }\n}\n\nconst numberList = new List<number>();\nnumberList.addItem(42);\nnumberList.addItem(84);\nconsole.log(numberList.getAllItems()); // Output: [42, 84]\n\nconst stringList = new List<string>();\nstringList.addItem('TypeScript');\nstringList.addItem('JavaScript');\nconsole.log(stringList.getAllItems()); // Output: ['TypeScript', 'JavaScript']\n```\n\n#### **Explanation**:\n- ****List<T>****: This generic class works with any type **T**. Whether it’s numbers, strings, or custom objects, this class manages a list of items of that type.\n- **Flexibility**: The class can now be reused to manage a list of any data type.\n\n### **Applying Generics to the Task Manager Project**\nLet’s see how we can apply generics to our **Task Manager** project to make it more flexible and reusable.\n\n#### **1. Create a Generic List Manager for Tasks**\n\nWe can create a generic class to manage different lists of tasks. Here’s how:\n\n```typescript\nclass TaskManager<T> {\n  private tasks: T[] = [];\n\n  addTask(task: T): void {\n    this.tasks.push(task);\n  }\n\n  getTasks(): T[] {\n    return this.tasks;\n  }\n}\n```\n\n#### **2. Use TaskManager to Manage Tasks**\n\nNow, we can use this generic **TaskManager** to manage our list of tasks.\n\n```typescript\nimport { Task } from './task';\n\nconst taskManager = new TaskManager<Task>();\n\ntaskManager.addTask(new Task('Learn TypeScript'));\ntaskManager.addTask(new Task('Build Task Manager'));\n\nconsole.log(taskManager.getTasks().map(task => task.getDetails()));\n```\n\n#### **Explanation**:\n- ****TaskManager<Task>****: We use **TaskManager** with the **Task** type to manage a list of tasks in the project.\n- This allows for type safety while still keeping the code flexible enough to work with other types if needed.\n\n### **Constraints in Generics**\nIn some cases, you may want to restrict the types that can be used in a generic. You can do this using **constraints**.\n\n#### **Example: Constraining a Generic to an Interface**\n\nLet’s say we want to create a generic function that only works with objects that have an **id** property. We can use a constraint to enforce this requirement.\n\n```typescript\ninterface Identifiable {\n  id: number;\n}\n\nfunction findById<T extends Identifiable>(items: T[], id: number): T | undefined {\n  return items.find(item => item.id === id);\n}\n\nconst tasks = [\n  { id: 1, title: 'Learn TypeScript' },\n  { id: 2, title: 'Build Task Manager' }\n];\n\nconst foundTask = findById(tasks, 2);\nconsole.log(foundTask); // Output: { id: 2, title: 'Build Task Manager' }\n```\n\n#### **Explanation**:\n- **T extends Identifiable****: This ensures that **T** must be an object with an **id** property.\n- **Type Safety**: The function will only work with types that adhere to the **Identifiable** interface.\n\n### **Generics with Multiple Type Parameters**\n\nYou can also use multiple type parameters in a generic function or class. Let’s create a function that pairs two values of different types.\n\n#### **Example: Pairing Two Values with Generics**\n\n```typescript\nfunction pair<U, V>(first: U, second: V): [U, V] {\n  return [first, second];\n}\n\nconst stringNumberPair = pair<string, number>('TypeScript', 2024);\nconsole.log(stringNumberPair); // Output: ['TypeScript', 2024]\n\nconst booleanStringPair = pair<boolean, string>(true, 'Success');\nconsole.log(booleanStringPair); // Output: [true, 'Success']\n```\n\n#### **Explanation**:\n- **<U, V>**: The function accepts two generic type parameters (**U** and **V**), allowing us to work with two different types.\n- **Tuple Return Type**: The function returns a tuple containing both values.\n\n### **What’s Next?**\nToday, we have learnt how to use **Generics** in TypeScript to create flexible and reusable functions, classes, and components. With Generics, we can write code that works with a variety of types while still ensuring type safety.\n\nIn the next part of the series, we will explore **Modules in TypeScript**, which will enable us organise our code into reusable and maintainable pieces. If you have any questions or comments, feel free contact me at steve [at] stevepopoola.uk.\n\n### **Useful Resources**\n\n- [TypeScript Handbook - Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html)\n- [TypeScript Playground](https://www.typescriptlang.org/play)\n\n<div class=\"post-navigation flex justify-between mt-8\">\n  <a href=\"/blog/learn-typescript-in-14-days-6\" class=\"prev-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">← Prev: Day 6 - Classes in TypeScript</a>\n  <a href=\"/blog/learn-typescript-in-14-days-8\" class=\"next-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">Next: Day 8 - Modules in TypeScript →</a>\n  </div>\n\n\n\n\n\n\n\n\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days Day 7","description":"Day 7 of Learn TypeScript with me in 14 days. In this part of the series, we will learn about Generics in TypeScript, a powerful feature that allows us to create reusable components, functions, and classes that work with different types while still maintaining type safety.","author":"Steve Popoola","pubDate":"2024-10-07T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14days_7.k6zoSpRf.jpg","width":1200,"height":630,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14days_7.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14days_7.k6zoSpRf.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-6.md","slug":"learn-typescript-in-14-days-6","body":"\n## Day 6 - Classes in TypeScript\nToday, we will  look  into **Classes** in TypeScript, which allow us to implement object-oriented programming (OOP) principles in a type-safe way. We’ll cover how to define classes, constructors, properties, methods, and also explore **getters** and **setters** for more control over how data is accessed and updated. By the end of this session, we will have refactored our **Task Manager** project using these concepts.\n\n**Why Use Classes in TypeScript?**\n\nClasses allow you to structure your code using the **object-oriented programming (OOP)** paradigm. In TypeScript, classes are enhanced with static typing, making them more robust than plain JavaScript classes. They allow you to:\n1. **Encapsulate data** and logic within objects.\n2. **Create reusable blueprints** (classes) for objects, such as tasks in our Task Manager.\n3. **Inherit and extend functionality** via inheritance, making your code more modular.\n\n### **Step 1: Defining a Simple Class**\n\nLet’s start by defining a simple class for **Task** in TypeScript.\n\n```typescript\nclass Task {\n  id: number;\n  title: string;\n  completed: boolean;\n\n  constructor(id: number, title: string, completed: boolean = false) {\n    this.id = id;\n    this.title = title;\n    this.completed = completed;\n  }\n\n  toggleCompletion(): void {\n    this.completed = !this.completed;\n  }\n}\n\nconst task = new Task(1, 'Learn TypeScript');\nconsole.log(task);\n```\n\n#### **Explanation**:\n- **Properties**: We define three properties: `id`, `title`, and `completed`.\n- **Constructor**: The `constructor` function initializes the properties when a new instance of the class is created.\n- **Method**: The `toggleCompletion` method is defined to mark a task as completed or incomplete.\n\n### **Step 2: Getters and Setters in TypeScript**\n\n**Getters** and **setters** provide a controlled way to access and modify properties of a class. Instead of directly accessing or modifying properties, you can use getters to retrieve values and setters to update them with additional logic or validation.\n\n#### **Example of Getters and Setters**:\n\nLet’s add a **getter** and **setter** for the **title** property, allowing us to retrieve and set the task title safely.\n\n```typescript\nclass Task {\n  private id: number;\n  private _title: string;\n  private completed: boolean;\n\n  constructor(id: number, title: string, completed: boolean = false) {\n    this.id = id;\n    this._title = title;\n    this.completed = completed;\n  }\n\n  // Getter for title\n  get title(): string {\n    return this._title;\n  }\n\n  // Setter for title with validation\n  set title(newTitle: string) {\n    if (newTitle.length > 0) {\n      this._title = newTitle;\n    } else {\n      console.log('Title cannot be empty.');\n    }\n  }\n\n  toggleCompletion(): void {\n    this.completed = !this.completed;\n  }\n\n  getStatus(): string {\n    return this.completed ? 'Completed' : 'Incomplete';\n  }\n}\n\nconst task = new Task(1, 'Learn TypeScript');\nconsole.log(task.title); // Output: Learn TypeScript\n\ntask.title = ''; // Output: Title cannot be empty.\ntask.title = 'Master TypeScript';\nconsole.log(task.title); // Output: Master TypeScript\n```\n\n#### **Explanation**:\n- **Getter (get title())**: This allows you to retrieve the task title as if it were a regular property **(task.title)**, but it’s controlled by the getter.\n- **Setter (set title(newTitle: string))**: The setter allows you to set a new value for the **title** property, but we’ve added validation to ensure the title isn’t empty. If an empty string is passed, it prints an error message instead of updating the title.\n\nBy using getters and setters, you gain fine-grained control over how your class properties are accessed and modified.\n\n### **Step 3: Refactoring the Task Manager with Classes, Getters, and Setters**\n\nLet’s refactor our **Task Manager** project to use the **Task** class with **getters** and **setters** for improved control.\n\n#### **1. Define the Task Class in task.ts with Getters and Setters**\n\n```typescript\nclass Task {\n  private static idCounter = 0;\n  private id: number;\n  private _title: string;\n  private completed: boolean;\n  dueDate?: Date;\n\n  constructor(title: string, dueDate?: Date) {\n    Task.idCounter++;\n    this.id = Task.idCounter;\n    this._title = title;\n    this.completed = false;\n    this.dueDate = dueDate;\n  }\n\n  // Getter for title\n  get title(): string {\n    return this._title;\n  }\n\n  // Setter for title with validation\n  set title(newTitle: string) {\n    if (newTitle.length > 0) {\n      this._title = newTitle;\n    } else {\n      console.log('Title cannot be empty.');\n    }\n  }\n\n  toggleCompletion(): void {\n    this.completed = !this.completed;\n  }\n\n  getDetails(): string {\n    return `Task: ${this.title} | Status: ${this.completed ? 'Completed' : 'Incomplete'}`;\n  }\n}\n\nexport { Task };\n```\n\n#### **2. Refactor the Task Creation Logic in index.ts**\n\n```typescript\nimport { Task } from './task';\n\nlet tasks: Task[] = [];\n\nfunction addTask(title: string, dueDate?: Date): void {\n  const newTask = new Task(title, dueDate);\n  tasks.push(newTask);\n}\n\nfunction toggleTaskCompletion(id: number): void {\n  const task = tasks.find(t => t['id'] === id);\n  if (task) {\n    task.toggleCompletion();\n  }\n}\n\nfunction updateTaskTitle(id: number, newTitle: string): void {\n  const task = tasks.find(t => t['id'] === id);\n  if (task) {\n    task.title = newTitle; // Using the setter to update the title\n  }\n}\n\naddTask('Learn TypeScript');\naddTask('Build Task Manager', new Date('2024-12-01'));\n\nconsole.log(tasks.map(task => task.getDetails())); // Get details of all tasks\nupdateTaskTitle(1, 'Master TypeScript');\nconsole.log(tasks.map(task => task.getDetails())); // Check if title was updated\n```\n\n#### **Explanation**:\n- We used a **getter** to access the task title, and a **setter** to update the title with validation.\n- We added a new function **updateTaskTitle()** to update the task’s title using the setter.\n- This refactor improves code maintainability and ensures that task titles cannot be set to empty values.\n\n### **Step 4: Inheritance in TypeScript Classes**\n\nTypeScript supports **class inheritance**, allowing one class to extend another, inheriting its properties and methods. Let’s create a **RecurringTask** class that extends **Task**.\n\n#### **Example of Inheritance**:\n\n```typescript\nclass RecurringTask extends Task {\n  recurrenceInterval: string;\n\n  constructor(title: string, recurrenceInterval: string, dueDate?: Date) {\n    super(title, dueDate);\n    this.recurrenceInterval = recurrenceInterval;\n  }\n\n  getDetails(): string {\n    return `${super.getDetails()} | Recurs: ${this.recurrenceInterval}`;\n  }\n}\n\nconst recurringTask = new RecurringTask('Weekly Meeting', 'Weekly');\nconsole.log(recurringTask.getDetails()); // Output includes recurrence information\n```\n\n#### **Explanation**:\n- **extends keyword**: The **RecurringTask** class inherits from **Task**, adding a new property: **recurrenceInterval**.\n- **Overriding Methods**: We override the `getDetails()` method to include recurrence information.\n\n### **Step 5: Applying OOP Principles to Task Manager**\n\nWith classes, getters, setters, and inheritance, you can now structure the **Task Manager** project using **OOP principles**:\n1. **Encapsulation**: Keep properties like **id** private, exposing only necessary methods.\n2. **Reusability**: Reuse task-related functionality by creating a parent **Task** class and extending it for specific types of tasks.\n3. **Inheritance**: Use inheritance to add more features (e.g., **RecurringTask**).\n4. **Getters and Setters**: Control how data is accessed and modified by using getters and setters to encapsulate logic and validation.\n\n### What’s Next?\n\nToday, we have learnt how to use classes in TypeScript to structure our code using object-oriented principles. We explored class inheritance, encapsulation, and the benefits of using classes for organising our code.\n\nTomorrow, we’ll explore **Generics** in TypeScript—a powerful feature that allows you to write flexible and reusable components and functions. If you have any questions or comments, feel free contact me at steve [at] stevepopoola.uk.\n\n### Useful Resources:\n<a href=\"https://www.typescriptlang.org/docs/handbook/2/classes.html\" target=\"_blank\">TypeScript Handbook - Classes</a>\n\n\n<div class=\"post-navigation flex items-center justify-between mt-8\">\n  <a href=\"/blog/learn-typescript-in-14-days-5\" class=\"prev-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">← Prev: Day 5 - Aliases Interfaces</a>\n\n  <a href=\"/blog/learn-typescript-in-14-days-7\" class=\"next-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">Next: Day 7 - Generics in TypeScript</a>\n</div>\n\n\n\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days Day 6","description":"Day 6 of Learn TypeScript with me in 14 days. In this part of the series, we will cover Classes** in TypeScript, which will allow us to implement object-oriented programming (OOP) principles in a type-safe way.","author":"Steve Popoola","pubDate":"2024-10-06T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14days_6.dOdnVPUJ.jpg","width":1200,"height":630,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14days_6.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14days_6.dOdnVPUJ.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-5.md","slug":"learn-typescript-in-14-days-5","body":"\n# Type Aliases and Interfaces in TypeScript\nIn this part, we’ll dive into **Type Aliases** and **Interfaces** in TypeScript. These features will help us organise our code more effectively, especially when dealing with complex data structures. By the end of this post, we will know when to use **Type Aliases** and **Interfaces**, and we’ll apply them to our **Task Manager** project for better type management.\n\n### **Why Type Aliases and Interfaces?**\nAs your projects grow, you’ll encounter scenarios where you need to model complex types. TypeScript offers two powerful tools for this: **Type Aliases** and **Interfaces**. Both help you define types for objects, arrays, and other data structures in a readable and reusable way. However, there are some differences between them, and understanding when to use each is key to writing maintainable code.\n\n### **Type Aliases vs. Interfaces**\n\n- **Type Aliases**: Give a name to any type, including primitives, unions, intersections, and objects.\n- **Interfaces**: Used primarily to describe the shape of objects and allow for extending or merging types. They are more suited to modeling objects and classes.\n\n### Type Aliases in TypeScript\n\nA **Type Alias** allows you to create a new name for any type. This is especially useful for simplifying complex types or creating reusable types across your codebase.\n\n#### **Basic Type Alias Example**\nLet’s say we often deal with task IDs that can be either a **number** or a **string**. Instead of repeating the **number | string** type everywhere, we can create a **type alias**:\n\n```typescript\ntype TaskId = number | string;\n\nlet id1: TaskId = 123;\nlet id2: TaskId = 'task-456';\n```\n\nHere, **TaskId** is a **type alias** for **number | string**. Now, whenever we need a task ID, we can use **TaskId** instead of repeating the union type.\n\n#### **Type Alias for a Function Signature**\nType aliases are also handy for defining function signatures. Let’s create a type alias for a function that finds a task by its ID:\n\n```typescript\ntype FindTask = (id: TaskId) => Task | null;\n\nconst findTask: FindTask = (id) => {\n  return tasks.find(task => task.id === id) || null;\n};\n```\n\nThis creates a reusable type **FindTask** for any function that takes a **TaskId** and returns either a **Task** or **null**.\n\n### **Interfaces in TypeScript**\nAn **Interface** defines the structure of an object. It’s like a blueprint that defines what properties an object should have and their types.\n\n#### **Basic Interface Example**\nWe’ve already used an interface for our **Task** in the Task Manager project. Here’s a quick refresher:\n\n```typescript\ninterface Task {\n  id: TaskId;\n  title: string;\n  completed: boolean;\n}\n\nlet myTask: Task = {\n  id: 1,\n  title: 'Learn TypeScript',\n  completed: false\n};\n```\n\nThis interface defines that every **Task** object must have an **id** (which can be a **number** or **string**), a **title** (string), and a **completed** status (boolean). TypeScript ensures that any object labeled as a **Task** conforms to this structure.\n\n#### **Optional Properties in Interfaces**\nYou can also mark properties as **optional** by adding a **?** after the property name. This can be useful if certain properties may not always be present.\n\n```typescript\ninterface Task {\n  id: TaskId;\n  title: string;\n  completed: boolean;\n  dueDate?: Date; // Optional property\n}\n\nlet taskWithDueDate: Task = {\n  id: 2,\n  title: 'Submit assignment',\n  completed: false,\n  dueDate: new Date('2024-10-10')\n};\n\nlet taskWithoutDueDate: Task = {\n  id: 3,\n  title: 'Study for exam',\n  completed: true\n};\n```\n\nHere, **dueDate** is an optional property. Some tasks may have a **dueDate**, while others may not, and TypeScript won’t throw an error if it’s missing.\n\n### **Extending Interfaces**\nOne of the advantages of **interfaces** is that they can be extended, meaning we can create new interfaces that build on top of existing ones.\n\nLet’s say we have a special type of task called a **PriorityTask** that extends a regular **Task** but adds a **priority** field:\n\n```typescript\ninterface PriorityTask extends Task {\n  priority: 'low' | 'medium' | 'high';\n}\n\nlet urgentTask: PriorityTask = {\n  id: 4,\n  title: 'Prepare presentation',\n  completed: false,\n  priority: 'high'\n};\n```\n\nHere, **PriorityTask** extends **Task** and adds a new field, **priority**. Now, any object that is a **PriorityTask** must have all the properties of a **Task**, plus the **priority** field.\n\n### **Combining Type Aliases and Interfaces**\nWe can also combine **Type Aliases** and **Interfaces** in our code to structure more complex data. For example, we might want to use a **Type Alias** for a union type and an **Interface** for the shape of an object.\n\n#### **Example: Combining Type Aliases and Interfaces**\nLet’s combine a **TaskId** (type alias) with a **Task** (interface) to show how they can work together in our code:\n\n```typescript\ntype TaskId = number | string;\n\ninterface Task {\n  id: TaskId;\n  title: string;\n  completed: boolean;\n}\n\nlet task1: Task = {\n  id: 1,\n  title: 'Learn TypeScript',\n  completed: false\n};\n```\n\nThe type alias **TaskId** is used inside the **Task** interface to keep the code clean and reusable.\n\n### **Applying Type Aliases and Interfaces to the Task Manager**\n\nNow, let’s refactor some parts of our Task Manager project by making good use of **Type Aliases** and **Interfaces**.\n\n#### **Refactor the **removeTask** Function**\n\nLet’s start by refining the **removeTask** function to use both the **TaskId** alias and the **Task** interface:\n\n```typescript\nfunction removeTask(id: TaskId): void {\n  const taskIndex = tasks.findIndex(task => task.id === id);\n  if (taskIndex !== -1) {\n    tasks.splice(taskIndex, 1);\n    console.log(`Task with id: ${id} has been removed.`);\n  } else {\n    console.log(`Task with id: ${id} not found.`);\n  }\n}\n\nremoveTask(1);\n```\n\nIn this function:\n- We use **TaskId** to type the **id** parameter.\n- The function is type-safe, ensuring we only pass a **TaskId** and modifying the **tasks** array accordingly.\n\n#### **Refactor the **addTask** Function**\n\nWe can also refactor the **addTask** function using an interface for the **Task** and type alias for the **TaskId**:\n\n```typescript\nfunction addTask(title: string): Task {\n  const newTask: Task = {\n    id: tasks.length + 1,\n    title,\n    completed: false\n  };\n  tasks.push(newTask);\n  return newTask;\n}\n\naddTask('Study TypeScript');\nconsole.log(tasks);\n```\n\nIn this case:\n- The function returns a **Task** object, which is also added to the **tasks** array.\n- TypeScript ensures the returned object conforms to the **Task** interface.\n\n### **Best Practices for Using Type Aliases and Interfaces**\n\n#### **When to Use Type Aliases**:\n- Use **type aliases** when you need to give a name to a primitive, union, or complex function type.\n- Type aliases are perfect for defining **unions** (e.g., **number | string**).\n- Use them for **function signatures**.\n\n#### **When to Use Interfaces**:\n- Use **interfaces** to define the structure of **objects**.\n- Interfaces are better for **extending** and building on top of existing types.\n- Use interfaces when working with **classes** or **object-oriented programming**.\n\n### **What’s Next?**\nToday, we’ve learnt how to use **Type Aliases** and **Interfaces** to create more structured and reusable code. We applied these tools to our **Task Manager** project, making it more type-safe and maintainable.\n\nTomorrow, we’ll dive into **Generics in TypeScript**, which will help us create reusable and flexible components. You’ll learn how to apply generics to functions, arrays, and classes.\n\nI hope today’s session has helped you understand what, how and when to use **Type Aliases** and **Interfaces** in TypeScript. Tomorrow, we’ll dive into **Generics in TypeScript** as we prepare to explore object-oriented programming in TypeScript. If you have any questions or comments, feel free contact me at steve [at] stevepopoola.uk.\n\n### Useful Resources:\n<a href=\"https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-aliases\" target=\"_blank\">TypeScript Handbook - Type Aliases</a>\n\n<a href=\"https://www.typescriptlang.org/docs/handbook/2/objects.html\" target=\"_blank\">TypeScript Handbook - Interfaces</a>\n<div class=\"post-navigation flex items-center justify-between mt-8\">\n  <a href=\"/blog/learn-typescript-in-14-days-4\" class=\"prev-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">← Prev: Day 4 - Functions in TypeScript</a>\n\n  <a href=\"/blog/learn-typescript-in-14-days-6\" class=\"next-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">Next: Day 6 - Classes in TypeScript</a>\n</div>\n\n\n\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days Day 5","description":"Day 5 of Learn TypeScript with me in 14 days. In this part of the series, we will cover what Type Aliases and Interfaces are and how they are used in TypeScript to make our code more readable and maintainable.","author":"Steve Popoola","pubDate":"2024-10-05T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14days_5.GRK3a3r8.jpg","width":1200,"height":630,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14days_5.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14days_5.GRK3a3r8.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-4.md","slug":"learn-typescript-in-14-days-4","body":"\n### **Day 4: Functions in TypeScript**\n\n\nWelcome to Day 4 of the series, Learn TypeScript With Me in 14 Days. Today, we’ll explore how **functions** work in TypeScript. We’will dive into how to define function parameters, return types, and make use of TypeScript’s features like **optional parameters** and **default values**. By the end of this part,  we will be able to confidently use functions in our **Task Manager** project and handle tasks more effectively.\n\n### **Why Are Functions Important in TypeScript?**\nFunctions are essential building blocks in any application. They encapsulate logic and allow you to reuse code efficiently. TypeScript enhances functions by adding type safety, helping to ensure that functions receive and return the correct data types. This reduces the chance of runtime errors and makes your code easier to maintain and understand.\n\n### **Basic Function Definition**\nIn TypeScript, you can define a function by specifying the **types** of the parameters and the **return type**. Let’s start with a simple example:\n\n```typescript\nfunction add(a: number, b: number): number {\n  return a + b;\n}\n\nconsole.log(add(5, 10)); // Output: 15\n```\n\nExplanation:\n- **a** and **b** are parameters of type **number**.\n- The return type of the function is also **number**.\n- TypeScript will throw an error if you try to pass anything other than numbers or if the return value is not a number.\n\nLet’s try and call the **add** function and see what happens if we try to pass invalid arguments;\n\n```typescript\nadd('5', 10); // Error: Argument of type 'string' is not assignable to parameter of type 'number'\n```\n\n### **Optional Parameters and Default Values**\nSometimes, you may not always need to provide all parameters to a function. TypeScript allows you to mark parameters as **optional** by adding a **?** after the parameter name.\n\nLet’s see an example:\n```typescript\nfunction greet(name: string, greeting?: string): string {\n  return `${greeting || 'Hello'}, ${name}!`;\n}\n\nconsole.log(greet('John')); // Output: Hello, John!\nconsole.log(greet('Jane', 'Hi')); // Output: Hi, Jane!\n```\n\n**Explanation**:\n- The **greeting** parameter is optional. If not provided, the function defaults to **'Hello'**.\n\nYou can also define **default values** for function parameters:\n\n```typescript\nfunction greetWithDefault(name: string, greeting: string = 'Hello'): string {\n  return `${greeting}, ${name}!`;\n}\n\nconsole.log(greetWithDefault('John')); // Output: Hello, John!\nconsole.log(greetWithDefault('Jane', 'Hi')); // Output: Hi, Jane!\n```\n\n### **Functions with Void and Return Types**\nIn TypeScript, if a function doesn’t return anything, its return type is **void**. This is useful for functions that perform actions without returning a value.\n\nExample:\n```typescript\nfunction logMessage(message: string): void {\n  console.log(message);\n}\n\nlogMessage('This is a log message');\n```\n\nIn this case, the function simply logs a message and does not return anything, so we explicitly declare the return type as **void**.\n\n### **Function Types**\nYou can use TypeScript to define types for functions themselves. This helps in scenarios where you want to ensure that a variable holds a function with a specific signature.\n\n#### **Example of a Function Type**:\nLet’s define a function that takes a **TaskId** and returns a **Task** or **null**. We can start by defining a **type alias** for this function:\n\n```typescript\ntype FindTask = (id: TaskId) => Task | null;\n\nconst findTask: FindTask = (id) => {\n  return tasks.find(task => task.id === id) || null;\n};\n```\n\n**Explanation**:\n- **FindTask** is a type alias that describes a function that accepts a **TaskId** and returns either a **Task** or **null**.\n- This makes it clear that **findTask** will follow this type definition, ensuring type safety in the code.\n\n### **Applying Functions to the Task Manager Project**\n\nLet’s now extend our Task Manager project by adding new functionality using TypeScript’s typed functions.\n\n#### **1. Add a  **taskCount** Function**\n\nThe **taskCount** function does not receive any argument but returns the number of tasks. The return type is a number.\n```typescript\nfunction taskCount(): number {\n    console.log(`Number of tasks: ${tasks.length}`);\n    return tasks.length;\n}\n```\n\n#### **2. Refactoring **toggleTaskCompletion** Function**\n\nNext, we’ll improve the **toggleTaskCompletion** function to ensure it has correct types and returns **void**.\n\n```typescript\nfunction toggleTaskCompletion(id: TaskId): void {\n  const task = tasks.find(task => task.id === id);\n  if (task) {\n    task.completed = !task.completed;\n    console.log(`Task \"${task.title}\" marked as ${task.completed ? 'completed' : 'incomplete'}.`);\n  } else {\n    console.log(`Task with id: ${id} not found.`);\n  }\n}\n\ntoggleTaskCompletion(1);\nconsole.log(tasks);\n```\n\nHere, TypeScript ensures:\n- The **id** passed is a valid **TaskId** (either **number** or **string**).\n- The function properly toggles the **completed** property and returns **void**.\n\n#### **3. Refactoring a **removeTask** Function**\n\nLet’s update our **removeTask** function. This function will allow us to remove a task based on its **id** which has a defined type of TaskId\n\n```typescript\nfunction removeTask(id: TaskId): void {\n  const taskIndex = tasks.findIndex(task => task.id === id);\n  if (taskIndex !== -1) {\n    tasks.splice(taskIndex, 1);\n    console.log(`Task with id: ${id} has been removed.`);\n  } else {\n    console.log(`Task with id: ${id} not found.`);\n  }\n}\n\nremoveTask(3);\nconsole.log(tasks);\n```\n\nExplanation:\n- We use **findIndex()** to locate the task by **id**.\n- If found, we remove the task using **splice()**.\n\n### Functions Returning Complex Types\nYou can also define functions that return more complex types, such as objects or arrays. Let’s create a function that returns all completed tasks from the task array:\n\n```typescript\nfunction getCompletedTasks(): Task[] {\n  return tasks.filter(task => task.completed);\n}\n\nconst completedTasks = getCompletedTasks();\nconsole.log('Completed tasks:', completedTasks); // Returns all tasks where 'completed' is true\n```\n\nExplanation:\n- The **getCompletedTasks** function returns an array of **Task** objects that have been marked as **completed**.\n- The return type **Task[]** ensures TypeScript knows the function will return an array of **Task** objects.\n\nPutting it all together:\n```typescript\n// types.ts\nexport interface Task {\n    id: number;\n    title: string;\n    completed: boolean;\n  }\n\nexport type TaskId = number | string;\n```\n\n```typescript\n// task.ts\nimport { TaskId, Task } from './types';\n\nlet tasks: Task[] = [\n  { id: 1, title: 'Learn TypeScript', completed: false },\n  { id: 2, title: 'Build a Task Manager app', completed: false },\n  { id: 3, title: 'Test Task Manager app', completed: false }\n];\n\nfunction addTask(title: string): void {\n    const newTask: Task = {\n      id: tasks.length + 1,\n      title: title,\n      completed: false\n    };\n    tasks.push(newTask);\n    console.log(`Task \"${title}\" has been added.`);\n  }\n\nfunction toggleTaskCompletion(id: TaskId): void {\n    const task = tasks.find(task => task.id === id);\n    if (task) {\n        task.completed = !task.completed;\n        console.log(`Task \"${task.title}\" marked as ${task.completed ? \n        'completed' : 'incomplete'}.`);\n    } else {\n        console.log(`Task with id: ${id} not found.`);\n    }\n  }\n\nfunction removeTask(id: TaskId): void {\n    const taskIndex = tasks.findIndex(task => task.id === id);\n    if (taskIndex !== -1) {\n        tasks.splice(taskIndex, 1);\n        console.log(`Task with id: ${id} has been removed.`);\n    } else {\n        console.log(`Task with id: ${id} not found.`);\n    }\n}\n\nfunction getCompletedTasks(): Task[] {\n    return tasks.filter(task => task.completed);\n}\n  \naddTask('Review TypeScript functions');\nconsole.log(tasks);\n\ntoggleTaskCompletion(1);\nconsole.log(tasks);\n\nremoveTask(3);\nconsole.log(tasks);\n\nconst completedTasks = getCompletedTasks();\nconsole.log('Completed tasks:', completedTasks);\n```\n\nIf all goes well, you should see the following output:\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/v1728071389/task_manager_output_day4_mbznlm.png)\n\n### **What We Covered**\nToday we have learnt  how functions work in TypeScript. We’ve covered:\n- Basic function definitions.\n- Optional parameters and default values.\n- Function types and how to define them.\n- Real-world use of functions in the Task Manager project.\n\n### **What’s Next?**\nIn the next part of the series, we will dive into **TypeScript Interfaces and Type Aliases** to make our code more structured and reusable. We’ll explore how these tools can help us model data and make the code even more maintainable.\n\nI hope today’s session gave you a good foundation for working with functions in TypeScript! Tomorrow, we’ll dive into **Day 5: Interfaces and Type Aliases**. \n\n### **Useful Resources**:\n<a href=\"https://www.typescriptlang.org/docs/handbook/2/functions.html\" target=\"_blank\">TypeScript Functions Documentation</a>\n\n<a href=\"https://www.typescriptlang.org/play\" target=\"_blank\">TypeScript Playground</a> (Test code snippets and see how TypeScript checks for errors)\n\nThat’s all for today! See you tomorrow for **Day 5: Interfaces and Type Aliases**. If you have any questions or run into any issues,  you can  contact me at steve [at] stephenpopoola.uk\n\n<div class=\"post-navigation flex items-center justify-between mt-8\">\n  <a href=\"/blog/learn-typescript-in-14-days-3\" class=\"prev-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">← Prev: Day 3 - Arrays and Objects in TypeScript</a>\n\n  <a href=\"/blog/learn-typescript-in-14-days-5\" class=\"next-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">Next: Day 5 - Type Aliases and Interfaces</a>\n</div>\n\n\n\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days Day 4","description":"Day 4 of Learn TypeScript with me in 14 days. In this part of the series, we will cover how functions work in TypeScript. We’will dive into how to define function parameters, return types, and make use of TypeScript’s features like optional parameters and default values","author":"Steve Popoola","pubDate":"2024-10-04T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14_days.DqvNiW2i.jpg","width":1200,"height":630,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14_days.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14_days.DqvNiW2i.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-3.md","slug":"learn-typescript-in-14-days-3","body":"\n\n# **Day 3: Arrays and Objects in TypeScript**\n\n\nIn this part, we will explore **arrays and objects** in TypeScript and see how they play a crucial role in organising and structuring our data. By the end of this post, we will have learnt how to define arrays and objects with specific types, and how to apply them to our ongoing **Task Manager** project.\n\n\n### **Why Arrays and Objects?**\n\nArrays and objects are essential data structures in any programming language, especially in JavaScript and TypeScript. They allow us to group multiple pieces of information and store them in a structured format. However, TypeScript adds a layer of type safety by enforcing that the contents of arrays and objects conform to specified types, preventing common runtime errors.\n\n### **Working with Arrays in TypeScript**\n\nArrays in TypeScript are similar to those in JavaScript, but with the added benefit of **type safety**. You can specify what type of elements an array will contain using the following syntax:\n\n```typescript\nlet numbers: number[] = [1, 2, 3, 4, 5];\n```\n\nHere, **numbers** is an array of **number** values. If you try to add a string to this array, TypeScript will throw an error.\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/v1727974224/ts_array_error_meznsk.png)\n\n\nThe following snippet shows how to define an array of strings for task titles.\n\n```typescript\nlet taskTitles: string[] = ['Learn TypeScript', 'Build Task Manager', 'Test the app'];\nconsole.log(taskTitles);\n```\n\nYou can push new elements into the array, but TypeScript will ensure that you only push strings.\n```typescript\ntaskTitles.push('Refactor code'); // Valid\ntaskTitles.push(123); // Error: Argument of type 'number' is not assignable to parameter of type 'string'\n```\n\n#### **Multidimensional Arrays**\nTypeScript also supports **multidimensional arrays**, which are arrays of arrays. \n```typescript\nlet matrix: number[][] = [\n  [1, 2, 3],\n  [4, 5, 6],\n  [7, 8, 9]\n];\n```\n\n### Arrays in the Task Manager Project\n\nLet us now apply arrays to our **Task Manager** project. We'll use an array to store multiple tasks, where each task follows the **Task** interface that we defined earlier.\n\n1. **Create an Array of Tasks**: Open the `index.ts` file and update it with an array of **Task** objects.\n\n```typescript\nimport { Task } from './task';\n\nlet tasks: Task[] = [\n  { id: 1, title: 'Learn TypeScript', completed: false },\n  { id: 2, title: 'Build Task Manager app', completed: false },\n  { id: 3, title: 'Test the app', completed: true }\n];\n\nconsole.log(tasks);\n```\n\nHere, **tasks** is an array that can only hold **Task** objects. TypeScript ensures that every object added to this array conforms to the **Task** interface. If you try to add an item that does not conform to the interface, TypeScript will throw an error.\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/v1727974225/ts_invalid_property_j0qvcv.png)\n\n### **Working with Objects in TypeScript**\n\nIn TypeScript, objects are structured data that contain key-value pairs, where the keys are strings (or symbols) and the values can be of any type.\n\n#### **Object with Inline Types**\n\nYou can define an object with inline types, like this:\n\n```typescript\nlet task = {\n  id: 1,\n  title: 'Learn TypeScript',\n  completed: false\n};\n```\n\nBut TypeScript shines when you define an **interface** for your object structure, as we did in the previously.\n\n#### **Creating Objects Using Interfaces**\n\nLet’s revisit the **Task** interface and create an object using this structure.\n\n```typescript\ninterface Task {\n  id: number;\n  title: string;\n  completed: boolean;\n}\n\nlet myTask: Task = {\n  id: 1,\n  title: 'Complete the TypeScript tutorial',\n  completed: false\n};\n\nconsole.log(myTask);\n```\n\nIn this example, TypeScript enforces the shape of the object to ensure that it has the **id**, **title**, and **completed** fields with the correct types.\n\n\n### **Objects in the Task Manager Project**\n\n#### **Refactoring the Task Manager**\n\nNow that we have a list of tasks stored in an array, let’s write a few functions to work with this data. We’ll define functions to:\n1. Add a new task.\n2. Toggle the completion status of a task.\n3. Remove a task.\n\n#### **1. Add a New Task**\n\nCreate a function **addTask** that adds a new task to the array. This function will receive the title of the task and create a new **Task** object with a unique **id**.\n\n```typescript\nfunction addTask(title: string): void {\n  const newTask: Task = {\n    id: tasks.length + 1,\n    title: title,\n    completed: false\n  };\n  tasks.push(newTask);\n}\n\naddTask('Review TypeScript notes');\nconsole.log(tasks);\n```\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/v1727974224/ts_add_task_lgrrmi.png)\n\nIn this code:\n- The **addTask** function takes a **title** as an argument.\n- It creates a new task with a unique **id** (based on the length of the **tasks** array).\n- The new task is added to the **tasks** array.\n\n#### **2. Toggle Task Completion**\n\nNow, let’s write a function that toggles the completion status of a task.\n\n```typescript\nfunction toggleTaskCompletion(taskId: number): void {\n  const task = tasks.find(t => t.id === taskId);\n  if (task) {\n    task.completed = !task.completed;\n  }\n}\n\ntoggleTaskCompletion(2);\nconsole.log(tasks);\n```\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/v1727974224/ts_toggle_task_mfps8w.png)\n\nHere’s what’s happening:\n- The **toggleTaskCompletion** function receives a task **id**.\n- It finds the task in the **tasks** array using JavaScript's **find()** method.\n- If the task is found, it toggles the **completed** status by flipping the boolean value.\n\n**3. Remove a Task**\n\nHere is how we remove a task from the task array\n\n```typescript\nfunction removeTask(id: number): void {\n    const taskIndex = tasks.findIndex(task => task.id === id);\n    if (taskIndex !== -1) {\n      tasks.splice(taskIndex, 1);\n      console.log(`Task with ID ${id} has been removed`);\n    } else {\n        console.log(`Task with ID ${id} not found`);\n    }\n}\n\nremoveTask(2);\nconsole.log(tasks);\n\n```\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/v1727974224/ts_array_item_removed_wfeyoy.png)\n\n**Code explanation:**\n- The **removeTask** function takes an Id of type TaskId (which can be either a number or string).\n* **Finding the Task**: It uses **findIndex()** to search for the task with the matching id.\n* **Removing the Task**: If the task is found (taskIndex !== -1), it is removed from the array using splice(). If not, a message is logged stating that the task was not found.\n\nWith these three functions, we have built the foundation for adding and managing tasks in our Task Manager app. Both arrays and objects are now fully utilised and typed in our TypeScript project.\n\n### **TypeScript’s Readonly and Optional Properties**\n\n#### **Readonly Properties**\nSometimes, you want to ensure that certain properties of an object can’t be modified after the object is created. TypeScript provides a **readonly** modifier for this purpose.\n\n```typescript\ninterface Task {\n  readonly id: number;\n  title: string;\n  completed: boolean;\n}\n\nlet newTask: Task = {\n  id: 1,\n  title: 'Write a blog post',\n  completed: false\n};\n\n// newTask.id = 2; // Error: Cannot assign to 'id' because it is a read-only property\n```\n\nBy adding **readonly** to the **id** field, TypeScript ensures that once a task is created, its **id** cannot be changed.\n\n#### **Optional Properties**\nSometimes, not all properties of an object are required. You can define **optional properties** by adding a `?` to the property name in the interface.\n\n```typescript\ninterface Task {\n  id: number;\n  title: string;\n  completed?: boolean;\n}\n\nlet incompleteTask: Task = {\n  id: 2,\n  title: 'Incomplete task'\n};\n\nconsole.log(incompleteTask); // Output: { id: 2, title: 'Incomplete task' }\n```\n\nIn this example, **completed** is an optional property, meaning the **Task** object doesn’t need to include it when it's created.\n\n### **What’s Next?**\nToday, we learned how to work with arrays and objects in TypeScript. We used arrays to store multiple tasks and objects to define the structure of each task. With these tools, we can now begin building more complex features in our Task Manager app.\n\nIn the next part of the series, we will explore **functions in TypeScript** in more detail. You’ll learn how to define and type functions, handle optional parameters, and return types, further extending our Task Manager functionality.\n\n### **Useful Resources**:\n<a href=\"https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#arrays\" target=\"_blank\">TypeScript Handbook - Arrays</a>\n\n<a href=\"https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#object-types\" target=\"_blank\">TypeScript Handbook - Objects</a>\n\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find\" target=\"_blank\">JavaScript find method</a>\n\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex\" target=\"_blank\">JavaScript findIndex method</a>\n\nThat’s all for today! See you tomorrow for **Day 4: Functions in TypeScript**. If you have any questions or run into any issues,  you can  contact me at steve [at] stephenpopoola.uk\n\n\n<div class=\"post-navigation flex items-center justify-between mt-8\">\n  <a href=\"/blog/learn-typescript-in-14-days-2\" class=\"prev-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">← Prev: Day 2 - Arrays and Objects in TypeScript</a>\n\n  <a href=\"/blog/learn-typescript-in-14-days-4\" class=\"next-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">Next: Day 4 - Functions and Return Types</a>\n</div>\n\n\n\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days Day 3","description":"Day 3 of Learn TypeScript with me in 14 days. In this part of the series, we will cover how to work with arrays and objects in TypeScript. We will use arrays to store multiple tasks and objects to define the structure of each task.","author":"Steve Popoola","pubDate":"2024-10-03T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14days_3.f3mDvu4x.jpg","width":1200,"height":800,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14days_3.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14days_3.f3mDvu4x.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-2.md","slug":"learn-typescript-in-14-days-2","body":"\n\n### Understanding Basic Types in TypeScript\n\nToday, we will dive into one of the core features of TypeScript: **basic types**. By the end of this post, we will gain some understanding of how TypeScript's type system works and how it can help us write more reliable, maintainable code. We’ll explore how to define types for variables and functions, and apply these types to our  **Task Manager** project.\n\n### **What Are Types in TypeScript?**\n\nIn JavaScript, variables are dynamic. A variable can hold any value at any time, which is flexible but can lead to bugs that are hard to track down. TypeScript, on the other hand, allows you to declare **types** for variables, functions, and objects. This way, you can specify what kind of data a variable is allowed to hold, ensuring your code is type-safe.\n\nBy adding types, TypeScript helps catch errors at compile time rather than at runtime. This means fewer bugs in production and more confidence in your code.\n\nLet’s try an example of how TypeScript helps to catch these errors by writing the same logic in both JavaScript and TypeScript.\n\n**JavaScript Example (No Compile-Time Type Checking)**\n```javascript // JavaScript allows this, but it's a potential source of runtime errors\nlet value = 42; // Initially a number\nconsole.log(value); // 42\n\nvalue = \"Now it's a string\"; // Reassigned to a string\nconsole.log(value); // \"Now it's a string\"\n\nvalue.toFixed(2); // Runtime error! .toFixed is a method for numbers, not strings\n```\n\n**TypeScript Example (Compile-Time Type Checking)**\n```typescript\n// TypeScript enforces types, preventing errors early at compile time\nlet value: number = 42; // Declaring 'value' as a number\nconsole.log(value); // 42\n\nvalue = \"Now it's a string\"; // Compilation error: Type 'string' is not assignable to type 'number'\n\nvalue.toFixed(2); // This is safe since 'value' is always a number\n\n```\n\n### **Common Basic Types:**\n1. **String**\n\n   The **string** type represents textual data.\n   ```typescript\n   let color: string = \"blue\";\n   color = \"red\";\n   ```\n   \n2. **Number**\n\n   The **number** type represents both integers and floating-point values.\n   ```typescript\n   let decimal: number = 6;\n   let hex: number = 0xf00d;\n   let binary: number = 0b1010;\n   let octal: number =  0o744;\n3. **Boolean**\n\n    The **boolean** type represents true or false values.\n    ```typescript\n    let isDone: boolean = false;\n    ```\n\n4. **Any**\n\n   The **any** type is a way to opt-out of type checking. It can be used when you don't want a particular value to cause type-check errors.\n   ```typescript\n   let notSure: any = 4;\n   notSure = \"maybe a string instead\";\n   notSure = false; // okay, definitely a boolean\n   ```\n\n5. **Array**\n\n   A collection of elements of the same type (e.g., number[], string[]).\n   ```typescript\n   let list: number[] = [1, 2, 3];\n   let list: Array<number> = [1, 2, 3];\n   ```\n   \n6. **Object**\n\n   The **object** type represents any non-primitive type.\n\n   ```typescript\n   let obj: object = { name: \"John\", age: 30 };\n   ```\n\n\n### **Using The Basic Types**\n\nLet’s start by defining some variables with basic types in TypeScript.\n\n1. **Create a New File**: Open your project and create a new file named `types.ts` in the `src` folder.\n\n     ```bash\n      touch src/types.ts\n    ```\n\n2. **Add Some Basic Type Definitions**: Add the following code inside `types.ts`:\n\n    ```typescript\n    let taskTitle: string = 'Complete TypeScript tutorial';\n    let taskId: number = 1;\n    let isCompleted: boolean = false;\n\n    console.log(`Task: ${taskTitle} (ID: ${taskId}) - Completed? ${isCompleted}`);\n    ```\n\nIn this example:\n- **taskTitle** is typed as a **string**.\n- **taskId** is typed as a **number**.\n- **isCompleted** is typed as a **boolean**.\n\nBy specifying these types, TypeScript will prevent you from accidentally assigning a value of the wrong type, like trying to assign a string to **taskId**.\n\n### **Arrays and Objects**\n\nIn TypeScript, you can define arrays with a specific type for all the elements it contains. For example, an array of numbers would be typed as **number[]**.\n\n```typescript\nlet taskIds: number[] = [1, 2, 3, 4];\ntaskIds.push(5); // Valid\ntaskIds.push('six'); // Error: 'six' is not assignable to type 'number'\n```\n\nHere, **taskIds** is an array that can only hold numbers. If you try to push a string into it, TypeScript will give you a helpful error message.\n\nYou can also define types for objects using an interface or inline object types. Let’s define an object type for a task in our Task Manager app:\n\n```typescript\nlet task: { id: number, title: string, completed: boolean } = {\n  id: 1,\n  title: 'Complete TypeScript tutorial',\n  completed: false\n};\n```\n\nThis is an object with three properties, and each property has a defined type. TypeScript ensures that every property follows the declared type.\n\n### **Defining an Interface for a Task**\nAs your project grows, it is good practice to use **interfaces** for defining the shape of an object, which makes your code more reusable and easier to maintain. Let’s define an interface for our **Task** object:\n\n```typescript\ninterface Task {\n  id: number;\n  title: string;\n  completed: boolean;\n}\n\nlet task1: Task = {\n  id: 1,\n  title: 'Complete TypeScript tutorial',\n  completed: false\n};\n```\n\nBy using this interface, you can now use the **Task** type throughout your code. If you accidentally forget a property or use an incorrect type, TypeScript will warn you.\n\n### **Functions and Types**\n\nYou can also define types for function parameters and return values. This ensures that your functions receive the correct input and produce the correct output.\n\n```typescript\nfunction toggleTaskCompletion(task: Task): Task {\n  return { ...task, completed: !task.completed };\n}\n\nconst updatedTask = toggleTaskCompletion(task1);\nconsole.log(updatedTask);\n```\n\nIn this example:\n- The **toggleTaskCompletion** function takes a **Task** as a parameter and returns a **Task** object with the **completed** field toggled.\n- ***{ ...task }*** This is using the \"spread syntax\" (...) to create a shallow copy of the task object. It takes all the properties of the task and copies them into a new object.\n- **completed: !task.completed**: This updates the completed property of the copied task. The ! operator negates the value of task.completed. If it was true, it becomes false, and vice versa.\n\nTypeScript checks that the parameter passed to the function is a valid **Task** object and that the function’s return type matches the expected **Task** type.\n\n### **Applying Types to the Task Manager Project**\n\nNow that we understand the basics of TypeScript types, let’s apply them to our Task Manager project.\n\n#### **1. Update the **Task** Interface**:\n\nIn your project, create a file named **task.ts** inside the **src** folder. This file will contain the **Task** interface and any related types.\n\n```bash\ntouch src/task.ts\n```\n\nAdd the **Task** interface to the **task.ts** file:\n\n```typescript\nexport interface Task {\n  id: number;\n  title: string;\n  completed: boolean;\n}\n```\n\nNow you can import this **Task** interface wherever you need it in your project.\n\n#### **2. Using the Task Interface in Code**:\nLet’s modify **index.ts** to use the **Task** interface we just defined. First, import the **Task** interface:\n\n```typescript\nimport { Task } from './task';\n\nlet tasks: Task[] = [\n  { id: 1, title: 'Learn TypeScript', completed: false },\n  { id: 2, title: 'Build a Task Manager app', completed: false }\n];\n\nconsole.log(tasks);\n```\n\nHere, we’ve created an array of **Task** objects. TypeScript will now enforce that every object in the **tasks** array conforms to the **Task** interface.\n\n\n### **What’s Next?**\nNow that we’ve learnt about basic types and applied them to our Task Manager project, we’ll build on this foundation by exploring **arrays, objects, and functions in more depth** in the next session.\n\nI hope you found today’s session informative and practical! Tomorrow, we’ll continue our journey with **Day 3: Arrays and Objects in TypeScript**. \n\n### **Useful Resources**:\n<a href=\"https://www.typescriptlang.org/docs/handbook/basic-types.html\" target=\"_blank\">TypeScript Documentation</a>\n\n<a href=\"https://www.typescriptlang.org/play\" target=\"_blank\">TypeScript Playground</a>(Great for testing code snippets)\n\nIf you have any questions or run into any issues, you can contact me at steve [at] stephenpopoola.uk.\n\n<div class=\"not-prose text-center\"><div class=\"post-navigation flex items-center justify-between mt-8\">\n  <a href=\"/blog/learn-typescript-in-14-days-1\" class=\"prev-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">← Prev: Day 1 - Introduction To TypeScript</a>\n\n  <a href=\"/blog/learn-typescript-in-14-days-3\" class=\"next-post inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300\">Next: Day 3 - Arrays and Objects in TypeScript</a>\n</div>\n\n\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days Day 2","description":"Day 2 of Learn TypeScript with me in 14 days. We'll cover basic types and how TypeScript helps to catch errors at compile time, making it easier to write more reliable and maintainable code","author":"Steve Popoola","pubDate":"2024-10-02T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14days_2.BlzeXtL4.jpg","width":1200,"height":801,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14days_2.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14days_2.BlzeXtL4.jpg&f=webp"}},{"id":"learn-typescript-in-14-days-1.md","slug":"learn-typescript-in-14-days-1","body":"\n### **Personal Journey: Why I Delayed Learning TypeScript**\n\nWhen I first started as a junior developer, my relationship with JavaScript was, to put it lightly, complicated. As someone who preferred writing backend code, I spent most of my time in the comfort zone of **PHP**, focusing on structured, server-side logic. When I was **thrust into front-end development**, it felt like being dropped in a foreign land. My **understanding of JavaScript concepts was basic at best**, and I often struggled with its quirks like asynchronous code, closures, and the lack of strict typing.\n\nThe transition from PHP to JavaScript was not an easy one for me. While PHP had a more structured, server-side logic that I understood, **JavaScript’s dynamic and sometimes unpredictable nature** often left me frustrated. For a long time, I stuck to basic jQuery to get things done, but I always felt like I was **patching solutions** rather than deeply understanding the language.\n\nAs I slowly learned more about JavaScript, things began to make more sense, but by then I had developed a sort of resistance to moving beyond it—especially when I heard about TypeScript. I felt like I had just finally *grasped* JavaScript. Why complicate things again by introducing a superset language like TypeScript?\n\n**Why TypeScript Now?**\nOver time, as I took on larger and more complex JavaScript projects, the shortcomings of dynamic typing became apparent. Simple type-related errors that could have been caught early caused bugs that took hours to troubleshoot. Watching my colleagues adopt TypeScript and seeing the benefits they reaped, I knew it was time to stop delaying and dive in. I realized that **TypeScript could actually help me write better, more reliable code**—and that it wasn’t something to be afraid of but rather a tool to help avoid the very issues I struggled with in JavaScript.\n\nSo, here we are! Over the next 14 days, we’ll learn TypeScript together, and I’ll share my insights, frustrations, and breakthroughs with you in real-time.\n\n### **What is TypeScript?**\nTypeScript is a superset of JavaScript developed by Microsoft that adds static typing to the language. It allows you to catch potential bugs at compile time rather than runtime, making your code more reliable and maintainable.\n\n#### **Key Features of TypeScript:**\n1. **Static Typing**: Helps catch type-related errors early.\n2. **Optional Types**: You can add types incrementally to existing JavaScript code.\n3. **Modern JavaScript Features**: TypeScript supports the latest ECMAScript standards and transpiles down to compatible JavaScript.\n4. **Great Tooling**: TypeScript provides better autocompletion, type checking, and refactoring capabilities in editors like VSCode.\n\n**Why TypeScript?**\n- You avoid a lot of runtime errors by catching issues early.\n- It enhances code readability and makes the codebase easier to maintain.\n- As projects scale, TypeScript reduces the risk of type errors, which becomes invaluable for large teams and complex applications.\n\n### **Project Setup: Task Manager**\nThroughout the next 14 days, we will be building a simple **Task Manager** app where you can create, update, and manage tasks. By the end of the series, you’ll have a fully working app written in TypeScript.\n\n### **Step 1: Setting Up TypeScript**\n\n#### 1. **Install Node.js and npm**\nIf you haven’t already, you need to install **Node.js**, which comes with **npm** (Node Package Manager). This will allow you to install TypeScript and other development dependencies.\n\n- <a href=\"https://nodejs.org\" target=\"_blank\">Download Node.js</a>  (choose the LTS version)\n- Verify the installation by running these commands in your terminal:\n  ```bash\n  node -v\n  npm -v\n  ```\n\n#### 2. **Install TypeScript**\nOnce Node.js is installed, you can install TypeScript globally on your system using npm. Open your terminal and run:\n\n```bash\nnpm install -g typescript\n```\n\nYou can verify the installation by running:\n\n```bash\ntsc -v\n```\n\nThis command will show you the installed version of TypeScript.\n\n#### 3. **Initialize a TypeScript Project**\nNow, let’s initialize a new TypeScript project. Create a folder for your project and navigate into it:\n\n```bash\nmkdir task-manager\ncd task-manager\n```\n\nInside this folder, initialize a new TypeScript project:\n\n```bash\ntsc --init\n```\n\nThis creates a **tsconfig.json** file, which contains all the configuration options for TypeScript. In the **compilerOptions** options, set the `outDir`  to **./dist** You can leave the remaining settings for now.\n\n### A Brief Overview of the tsconfig.json file\nThe **tsconfig.json** file is the core configuration file for your TypeScript project. It controls how TypeScript compiles the code. Here are a few important settings:\n\n- **\"target\"**: Specifies the JavaScript version that TypeScript should compile down to. By default, it’s set to **es5**, but you can change it to **es6** or newer if needed.\n- **\"outDir\"**: This specifies where the compiled JavaScript files should go. We set it to **\"dist\"** in our case.\n- **\"rootDir\"**: This tells TypeScript where the source files are located. We’ll be working from the **src** folder.\n\nYou can edit these settings later to match the needs of your project.\n\n#### 4. **Setting up the Project Directory**\nLet’s organize our project folder. In the root folder of your project, create two directories:\n\n```bash\nmkdir src dist\n```\n\n- **src**: This is where we will write our TypeScript code.\n- **dist**: This is where the compiled JavaScript code will be output.\n\n### **Step 2: Writing Your First TypeScript Program**\n\nNow let’s create our first TypeScript file inside the `src` folder.\n\n1. **Create a File**: Inside the **src** folder, create a file called **index.ts**.\n\n```bash\ntouch src/index.ts\n```\n\n2. **Add a Simple Program**: Open **index.ts** in your editor (e.g., VSCode), and add the following code:\n\n```typescript\nlet greeting: string = 'Hello, TypeScript!';\nconsole.log(greeting);\n```\n\nHere, you are explicitly typing the variable **greeting** as a string. If you try to assign a non-string value to the **greeting** variable, TypeScript will throw an error at compile time, catching the issue before you even run the code.\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/v1727808020/ts_error_hekofx.png)\n\n### **Step 3: Compiling TypeScript**\n\nTo convert the TypeScript code into JavaScript, we need to compile it. Run the following command in your terminal:\n\n```bash\ntsc\n```\n\nThis command compiles all `.ts` files in the `src` folder based on the configuration in `tsconfig.json`. The compiled JavaScript file will be placed in the `dist` folder. You should see a new file at `dist/index.js`.\n\n```javascript\nvar greeting = 'Hello, TypeScript!';\nconsole.log(greeting);\n```\n\nNow, you can run the generated JavaScript code using Node.js:\n\n```bash\nnode dist/index.js\n```\n\nYou should see the output:\n\n```\nHello, TypeScript!\n```\n \nLet’s try another example by creating a simple function that takes two numbers as arguments and returns their sum. We will use TypeScript to enforce that both arguments are numbers.\n\n```typescript\nlet firstNumber: number = 5;\nlet secondNumber: number = 10;\nlet result: number = firstNumber + secondNumber;\nconsole.log(result);\n```\n\nIf you compile the above and run it, you should get the output **15**. \n\nCongratulations! You’ve just written and compiled your first TypeScript program.\n\n### **What’s Next?**\nToday was all about getting our environment set up and writing our first TypeScript program. Tomorrow, we’ll dive deeper into TypeScript by exploring **basic types**. We’ll use this knowledge to start defining types for the tasks in our project and lay the groundwork for our Task Manager app.\n\nI hope today’s session was fun and informative! Tomorrow, we’ll start diving deeper into TypeScript’s powerful type system. Stay tuned for **Day 2: Basic Types**.\n\nLet me know if you have any questions or if you had any issues getting everything set up by contacting me at steve [at] stephenpopoola.uk.\n\n### **Useful Resources**:\n<a href=\"https://www.typescriptlang.org/docs/\" target=\"_blank\">TypeScript Documentation</a>\n\n<a href=\"https://nodejs.org/\" target=\"_blank\">Node.js Download</a>\n\n<a href=\"https://code.visualstudio.com/\" target=\"_blank\">Visual Studio Code (Recommended code editor)</a>\n\n\n<div class=\"not-prose text-center\">\n   <a href=\"/blog/learn-typescript-in-14-days-2\" class=\"mt-10 next-post inline-block bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-300\">Next: Day 2 - Basic Types in TypeScript →\n  </a>\n</div>\n\n","collection":"blog","data":{"title":"Learn TypeScript With Me in 14 Days Day 1","description":"Learn TypeScript with me in 14 days. We'll cover the basics, advanced topics, and build a project together.","author":"Steve Popoola","pubDate":"2024-10-01T00:00:00.000Z","heroImage":{"src":"/_astro/learn_typescript_14days_1.DeGmrTy1.jpg","width":1200,"height":800,"format":"jpg","fsPath":"/app/src/content/blog/images/learn_typescript_14days_1.jpg"},"series":"Learn TypeScript with Me","tags":["typescript","javascript"],"heroImageUrl":"/_image?href=%2F_astro%2Flearn_typescript_14days_1.DeGmrTy1.jpg&f=webp"}},{"id":"importance-of-context-switching-for-developers.md","slug":"importance-of-context-switching-for-developers","body":"\nI must confess that I first learnt about context switching at the 2024 C3 Dev Festival from a talk given by Braden Coyer  titled \"The Power of a Second Brain in a Developer's Workflow,\" highlighting the importance of context switching for developers. This article explores the key insights from Coyer's talk and discusses why context switching is essential for modern software developers.\n\n## Understanding Context Switching\nContext switching refers to the process of shifting focus from one task to another. In software development, this often involves moving between different projects, coding languages, or even different stages of the development lifecycle. Effective context switching allows developers to maintain productivity and deliver high-quality work despite the constant influx of new tasks and priorities.\n\n## Why Context Switching is Inevitable\nDevelopers often juggle multiple responsibilities: from coding and debugging to handling team communications and client feedback. While focusing on a single task for an extended period is ideal, real-world demands make context switching inevitable. Whether shifting between codebases, switching between frontend and backend work, or attending meetings, developers must learn to navigate these transitions seamlessly.\n\n## The Challenges of Context Switching\nWhile context switching is necessary, it is not without its challenges. Switching between tasks can lead to cognitive overload, where the brain struggles to keep up with the constant shifts in focus. Studies have shown that every time we shift focus, there is a “cognitive load” as the brain takes time to adjust. For developers, this might mean losing track of where they left off in a complex problem or taking extra time to re-familiarise themselves with the details of a project. Context switching, when unmanaged, can lead to inefficiencies, mental fatigue, and even coding errors..\n\nBraden Coyer emphasised that the key to effective context switching lies in understanding and managing these challenges. He introduced the concept of a \"second brain\"—a system or set of tools that helps developers organise their thoughts, tasks, and priorities, thereby reducing the cognitive load associated with context switching.\n\n## The Power of a Second Brain\nA \"second brain\" can take many forms, from digital note-taking apps to project management tools. The idea is to externalise information and tasks, freeing up mental bandwidth for more critical thinking and problem-solving. Coyer highlighted several benefits of using a second brain:\n1. **Reduced Cognitive Load**: By offloading tasks and information to a second brain, developers can reduce the mental effort required to remember and manage multiple tasks.\n2. **Improved Focus**: With a clear and organised system for tracking tasks and priorities, developers can focus more deeply on the task at hand, leading to higher-quality work.\n3. **Enhanced Productivity**: A second brain helps developers prioritise tasks more effectively, ensuring that they are working on the most important and urgent items.\n4. **Better Decision Making**: By having a comprehensive view of all tasks and projects, developers can make more informed decisions about where to allocate their time and resources.\n\n## Practical Tips for Effective Context Switching\nI realised as I was listening to the talk that I had actually been harnessing the power a second brain by doing the following, which I can share as tips for effective context switching.\n1. **Document Everything**:  Regularly documenting your work—not just for team collaboration but for your own benefit—makes it easier to dive back into a project after stepping away. Take advantage of digital note-taking apps, project management tools, and task trackers to organise your thoughts and tasks. Tools like Bear, Notion, Trello, Jira and Notes for iOS can be invaluable for creating a second brain.\n2. **Prioritise Tasks**: Use a system like the Eisenhower Matrix to prioritise tasks based on their urgency and importance. This helps ensure that you are focusing on the most critical tasks first.\n3. **Time Blocking**: Minimise context switching by scheduling specific time blocks for deep work and separate blocks for meetings or interruptions. This strategy allows you to focus on one task at a time..\n4. **Take Breaks**: Short breaks can help reset your focus and reduce the mental fatigue associated with context switching. Techniques like the Pomodoro Technique can be useful for managing breaks effectively.\n5. **Set Clear Boundaries**: Establish clear boundaries between different tasks and projects. This can include setting specific time slots for different activities or using separate workspaces for different projects.\n6. **Automation and Shortcuts**: Automate routine tasks and use shortcuts for recurring activities. This reduces the mental effort of remembering processes, further mitigating the effects of context switching.\n\n## Conclusion\nWhile context switching is often seen as an unavoidable hurdle in software development, by understanding the challenges and leveraging the power of a second brain, developers can enhance their productivity, reduce cognitive load, and deliver high-quality work.\n\nAs the demands of software development continue to grow, the ability to effectively manage multiple tasks and projects will become increasingly critical. By adopting the principles and practices outlined in Coyer's talk, developers can thrive in a fast-paced and ever-changing industry.\n\nEffective context switching is not just about managing tasks but also about managing our minds. By embracing the power of a second brain, developers can unlock new levels of productivity and creativity, ultimately leading to more successful and fulfilling careers.\n\n\n#### References ####\nCoyer, B. (2024). The Power of a Second Brain in a Developer's Workflow. Presented at the 2024 C3 Dev Festival.\n","collection":"blog","data":{"title":"The Importance of Context Switching for Software Developers","description":"Leveraging the power of effective context switching to allow developers maintain productivity and deliver high-quality work despite the constant influx of new tasks and priorities","author":"Steve Popoola","pubDate":"2024-09-11T00:00:00.000Z","heroImage":{"src":"/_astro/context_switching.D8K4YFW-.jpg","width":800,"height":549,"format":"jpg","fsPath":"/app/src/content/blog/images/context_switching.jpg"},"tags":["productivity"],"heroImageUrl":"/_image?href=%2F_astro%2Fcontext_switching.D8K4YFW-.jpg&f=webp"}},{"id":"how-lets-encrypt-revolutionised-web-security.md","slug":"how-lets-encrypt-revolutionised-web-security","body":"\n## Introduction\nSSL (Secure Sockets Layer), more commonly known now as TLS (Transport Layer Security), is a fundamental technology for securing data exchanged over the internet. SSL/TLS encrypts data between web servers and browsers, ensuring that sensitive information such as passwords, credit card details, and personal data remain secure from eavesdropping and tampering.\n\nI remember vividly in the early 2010s how obtaining an SSL certificate was a costly and cumbersome process, often reserved for large organizations and businesses with the resources to afford them. \n\n## Life Before Let's Encrypt\nBack then, securing a website via SSL was optional. You would develop a website for a client and give them the option to secure their website or not. Most of the time, if the website was just informational, the client would decline. Even for those that were transactional, they would redirect their users to other secure websites to handle the transactions for them rather than go through the complexity of acquiring an SSL certificate.\n\nObtaining a certificate back then could cost anywhere from $50 to several hundred dollars annually, depending on the level of validation and warranty offered. This cost was prohibitive for small businesses, personal websites, and non-profit organizations.\n\n Additionally, the manual steps required to generate a certificate signing request (CSR), submit it to a certificate authority (CA), and install the certificate on a server were often seen as a barrier for those without technical expertise. As a result, many websites, particularly smaller ones, operated without SSL, leaving user data vulnerable to interception and manipulation.\n\n## Introduction of Let's Encrypt\nFounded in 2014 by the Internet Security Research Group (ISRG), Let's Encrypt was created with a mission to make SSL certificates free and easy to install. By offering free SSL certificates, Let's Encrypt aimed to promote a more secure and privacy-respecting web. Unlike traditional CAs, Let's Encrypt operates as a non-profit entity, relying on the support of sponsors and donations to cover its operational costs. The goal was clear: eliminate financial and technical barriers to SSL adoption and encourage a global shift towards HTTPS.\n\n## Impact on SSL Adoption and Web Security\nThe impact of Let's Encrypt on SSL adoption has been nothing short of transformative. Since its launch, there has been a dramatic increase in the number of websites using HTTPS. This surge in adoption has had several positive effects:\n- Improved Security: By making SSL more accessible, Let's Encrypt has contributed to a significant reduction in the amount of unencrypted web traffic, enhancing the overall security of the internet.\n\n- Enhanced User Trust: HTTPS is not just about encryption; it also signals to users that a website is trustworthy. This has led to increased user trust and confidence, particularly in e-commerce and online services.\n\n- SEO Benefits: Major search engines like Google began favoring HTTPS websites in their rankings, further incentivizing website owners to adopt SSL.\n\n- \"HTTPS by Default\" Mentality: With Let's Encrypt lowering the barrier to entry, HTTPS has become the norm rather than the exception. Web developers and website owners increasingly see HTTPS as a default requirement rather than an optional feature.\n\n## Challenges and Criticisms\nDespite its many successes, Let's Encrypt has faced its share of challenges and criticisms:\n\n- Domain Validation and Misuse: As a domain-validated (DV) certificate authority, Let's Encrypt only verifies domain ownership, not the identity of the website owner. This has led to instances where malicious actors have obtained SSL certificates for phishing sites, relying on users’ trust in the HTTPS padlock symbol.\n\n- Renewal and Outage Management: While Let's Encrypt's automated renewal process is a significant improvement over manual renewals, it has occasionally led to complications during outages or when automation scripts fail.\n\nLet's Encrypt has addressed these concerns by improving validation processes and collaborating with the cybersecurity community to mitigate abuse.\n\n## Wildcard Certificates\nWhen Let's Encrypt was initially introduced, you could only secure single domains/subdomains. After 2018,  Let's Encrypt began offering wildcard certificates to meet the needs of its users better, while still maintaining high-security standards through the ACME protocol for automation and renewal.\n\nWhile this was widely applauded, there was the criticism of the inability to automatically renew wildcard certificates. I personally ran into an issue where we wanted to generate a wildcard certificate for a multitenant application. The process went well until we discovered that we would have to manually renew the certificate every 90 days. I found out later that this was a policy decision by Let's Encrypt due to the fact that certificate issuance and renewals involve creating specific DNS records to prove domain ownership.\n\nLet's Encrypt's policy of not automatically renewing wildcard certificates is primarily a security measure designed to ensure greater control and oversight of wildcard certificate usage. However, it can also be seen as a criticism because it increases the administrative effort required for managing these certificates, potentially leading to expired certificates and associated service disruptions\n\n## The Future of SSL and Let's Encrypt\nAs we look to the future, the role of Let's Encrypt in web security remains vital. While SSL/TLS encryption is a crucial component of web security, it is just one piece of a larger puzzle. \n\nLet's Encrypt continues to innovate, with ongoing improvements to the ACME protocol and initiatives aimed at further simplifying and automating web security. The future will likely see Let's Encrypt expanding its offerings to address emerging security challenges and contribute to a safer internet for all.","collection":"blog","data":{"title":"How Let's Encrypt Revolutionised Web Security","description":"A look into how LetsEncrypt changed the landscape of securing websites with SSL.","author":"Steve Popoola","pubDate":"2024-08-29T00:00:00.000Z","heroImage":{"src":"/_astro/ssl_website_security.BcPcoUI1.jpg","width":1000,"height":571,"format":"jpg","orientation":1,"fsPath":"/app/src/content/blog/images/ssl_website_security.jpg"},"tags":["web","security"],"heroImageUrl":"/_image?href=%2F_astro%2Fssl_website_security.BcPcoUI1.jpg&f=webp"}},{"id":"batch-processing-with-aws-batch-part-2.md","slug":"batch-processing-with-aws-batch-part-2","body":"\nIn <a href=\"/blog/batch-processing-with-aws-batch-part-1\">Part 1</a> of this topic, we started looking into AWS Batch as a solution to a problem, which needed to automated with batch processing. We began by simulating the problem with the creation  of a large number of files in an S3 bucket using a script. We created and configured our custom docker image to process the job and we pushed the image to our Amazon Elastic Container Repository (Amazon ECR)\n\n### Configure Batch Compute Environment\nNext, we need to set up a compute environment and job definition. This involves setting up the compute environment to run our jobs. AWS offers three ochestration types; Fargate, EC2 and Elastic Kubernetes (EKS). For the purpose of this tutorial, we will use Fargate which is the recommended option as it launches and scales the compute to closely match the resource requirement that you specify for the container.\n\n\nOnce you are logged in, enter 'batch' in the search box at the top. If you haven't accessed AWS Batch before, you will see the landing page with a button \"Get started\", click on the button.\n\nOne thing to look out for, which tripped me up is to ensure that you select the right region. If you create a batch in a different region from your default region, you will get an error, \"unable to fetch credentials\".\n\nFirst, we will set up a compute environment. This is the environment that AWS Batch will run in. Click on 'Compute environments in the sidebar'\n- Click on Fargate\n- Enter a name in the Name field (ie compute-environment-for-s3-job)\n- Click next\n- On the instance configuration page, enter the maximum vCPUs (256)\n- Accept the defaults by clicking 'Next'\n- Click on 'Create comput environment' button\n\n\n### Configure Job Definition.\n- On the \"Configure job and orchestration type\" page, select Fargate. \n- On the \"Create a compute environment\" page, enter your environment name, Example: \"remove-large-files-from-s3-env\"\n- Execution role: This is very important. Task execution role grants EC2 agents permission to make AWS API calls on your behalf. Without this, your jobs will fail. \nIf you haven't done this, follow the steps;\n- Head over to the IAM page, click on roles\n- Click on the \"Create role\" button\n- Select AWS Service\n- Under use case, select EC2\n- Click next and under 'Add permissions', search of \"S3\". Select the appropriate permissions. For this simulation, I selected \"AmazonS3FullAccess\"\n- Enter Role name and click on 'Create role'\n\nBack in our job configuration page, for \"Execution role\" select the role you just created. For the container configuration, you will need to enter the URI of your repository. You can copy this from your ECR repository. It should something like, \"12341234.dkr.ecr.eu-west-2.amazonaws.com/aws-batch-s3:latest\". Click \"next\" till you get to the last page where you'll see the 'Create job definition' button. Click on that and we are done defining our job.\n\n### Configure Create Job Queue.\nNext we create a job queue. This is to enable AWS Batch know how to queue the jobs especially where a large number of jobs are being executed.\n- Click on Job queues in the left menu icon\n- Enter Name \"remove-files-from-s3-job-queue\"\n- select the compute eneviroment created earlier\nYou can leave the rest of the options anc click on the \"Create job queue\" button.\n\n### Create Job.\n- Click on the menu icon on the left of the page and click on \"Jobs\". \n- Click on the \"Submit new job\" button\n- On the \"Configure job page\", enter the job name. In this case, I am entering, \"remove-files-from-s3-job\"\n- Remember the Job definition we created earlier? Select that from the Job definition dropdown.\n- Select the job queue we created earlier from the \"Job queue\" dropdown.\n- In the \"Container overrides\", we enter the command we want AWS Batch to run. Let us test that everything works by entering the following;\n```sh\n [\"aws\", \"s3\", \"ls\"],\n ```\n- Click \"next\" button to navigate the to the \"Review and submit\" page. \n- Click the \"Create job\" button.\n\nThe status of the job will intially show, \"submitted\", \"starting\" and finally \"running\". If all goes well, the next status should be \"succeeded\". If not, it will show failed. Batch will provide a link to cloudwatch under the \"Log stream name\" detail. This will either show you the output of your successful job run or reason for failure. If our job succeeded, you should see something like the image below;\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/v1724239410/aws_batch_cloudwatch_vzhn4h.png)\n\nThis shows the output of the command we gave our job so we know it works! Let's now create a new job with the command we need to delete those files we uploaded to S3.\n\nWe will repeat the process of creating a job. You can use the same name as above \"remove-files-from-s3-job\". Select the job definition and job queue as we did before. In the container overrides input, we will now enter the following;\n```sh\n[\"aws\", \"s3\", \"rm\", \"s3://steve-large-data-bucket\", \"--recursive\"]\n```\nAll that is left is to review and click on the \"create job\" button. And...job done!\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/v1724239969/aws_batch_log_events_kyzuey.png)\n\n## Conclusion\nThis was just a simple example of how you can use AWS Batch for handling computing workloads. It simplifies and automates the execution of computing workloads by taking care of managing the underlying resources in a cost-efficient manner. Workloads can be as simple as our simulation above or as complex as processing hundreds or thousands of batch computing jobs.\n","collection":"blog","data":{"title":"Batch Processing With AWS Batch - Part 2","description":"This is the second part of Using AWS Batch, a fully managed service that can be used to efficiently run workloads without the overhead of configuring and managing the resources required to run the workloads.","author":"Steve Popoola","pubDate":"2024-08-28T00:00:00.000Z","heroImage":{"src":"/_astro/batch_processing_2.BaguXluE.jpg","width":1024,"height":1024,"format":"webp","fsPath":"/app/src/content/blog/images/batch_processing_2.jpg"},"tags":["aws","batch processing"],"heroImageUrl":"/_image?href=%2F_astro%2Fbatch_processing_2.BaguXluE.jpg&f=webp"}},{"id":"batch-processing-with-aws-batch-part-1.md","slug":"batch-processing-with-aws-batch-part-1","body":"## The Problem\nI was recently approached by a development team to help solve a problem with their application. They store their images on AWS S3 but over time, one of their processes generated and stored large amounts of temporary images in several folders. This caused some latency issues and slowed down their application until the they found the code that was generating the images and removed it.\n\n## Potential Solutions\nThe problem was that by this time, the amount of images generated needed to be removed. The first idea that popped into my head was, 'Delete the bucket, problem solved'. Easy, right? I wish! Deleting the bucket meant that other data needed by the business would be deleted. Other options came to mind, like moving needed data into another bucket and delete. Easy enough but not easy if you don't know exactly which folders to delete within the bucket. \n\n## The Choice - AWS Batch\nWhile I was thinking about possible solutions, I remembered  <a href=\"https://aws.amazon.com/batch/\">AWS Batch</a> from when I wrote my AWS Solutions Architect exam. In this article, I will explain what AWS Batch is and simulate the above problem while using Batch to solve it.\n\nBatch takes care of the provisioning and scaling of resources, which means you don't need to worry about the underlying infrastructure. This allows you to focus on defining the job and how it should be executed. In terms of scalabality, it can automatically scale up and down based on the volume and requirements of the jobs. It supports diverse workloads, from a few jobs to hundreds of thousands of jobs. \n\nAWS Batch can significantly reduce costs for batch processing. It dynamically allocates the least expensive compute resources available, optimizing cost without compromising performance. It integrates seamlessly with other AWS services like Amazon S3, Amazon RDS, AWS Lambda, and more. This integration allows you to build complex workflows and data pipelines efficiently.\n\nBatch jobs can be defined by using Docker containers, which provide a consistent and reproducible environment for your applications. This makes it easier to manage dependencies and ensure consistency across different stages of the job lifecycle. \n\n## Problem Simulation and Solution\nTo showcase how AWS Batch works, I will create a simulation of the problem where a large number of files from a specific folder in an S3 bucket needs to be deleted. Granted there are other ways to do this but they could either be too risky (i.e deleting the entire bucket) or slow, for instance trying to use an SDK to make API calls or trying to manually delete the files from the management console. With AWS Batch, you only need to configure the compute resources, the job queue, create the job, dispatch it and go about doing other things while the service processes the job. You can also configure cloudwatch to notify you when the job is done so you don't need to keep checking to see if it has completed.\n\n### Generate and Store Documents\nLet us start my simulating storing a large quantity of items in an S3 bucket. First, we need to create an s3 bucket where we will store our items. You can do that through the AWS management console by typing \"s3\" into the search box. I will however use the aws cli because it is quicker and I don't need to login to AWS in the browser to perform the commands. If you would like to follow along, you will need to be aware of the following prerequisites;\n- You need an AWS account with necessary permissions to create and manage S3 buckets, EC2 instances, and AWS Batch resources.\n- AWS CLI installed and configured with your AWS credentials.\n\n```sh\naws --profile=personal s3 mb s3://steve-large-data-bucket\n```\n\nThe above command can be broken down as follows;\n- **aws**: The aws cli. \n- **--profile=personal**: I have multiple AWS accounts I work with. This tells aws to use my personal account which I am using for this simulation. If you are following along and have only one aws account, you don't need this.\n- **s3**: The service you want to run the command on\n- **mb**: The command to create a bucket\n- **s3 mb s3://steve-large-data-bucket**: The bucket name.\n\nIf you ran the above command successfully, you should get a response like this:\n```sh\nmake_bucket: steve-large-data-bucket\n```\n\nYou can confirm that the bucket has been created by running the following command;\n```sh\naws s3 ls\n```\n\nNow that we have a bucket, it is time to simulate the storing of large quantity of items in the S3 bucket. We will achieve this with a simple script \"upload_files.sh\".\n\n```sh\n#!/bin/bash\nBUCKET_NAME=\"steve-large-data-bucket\"\nNUM_FILES=1000\n\nfor i in $(seq 1 $NUM_FILES)\ndo\n  FILE_NAME=\"file_$i.txt\"\n  echo \"This is file number $i\" > $FILE_NAME\n  aws s3 cp $FILE_NAME s3://$BUCKET_NAME/$FILE_NAME\n  rm $FILE_NAME\ndone\n\n```\n\nHopefully the above script is self explanatory. In summary, it is generating 1000 files and storing them in my S3 bucket.\n\nWe run the script by making it executable and running it.\n```sh\nchmod +x upload_files.sh\n./upload_files.sh\n```\n\nDepending on your internet speed, this would probably take a while to finish uploading.\n\n### Create Custom Docker Image\nTo set up our job on AWS Batch, we will need to do the following;\nWe need to create a custom docker image and push it to <a href=\"https://aws.amazon.com/ecr/\">Amazon Elastic Container Registry (ECR)</a> which is Amazon's repository for docker images. We need this as the base to set up our job definition.\n\nFor our custom docker image, we can create a simple Dockerfile using the base amazonlinux image.\n\n```sh\nFROM amazonlinux\n\nRUN yum install -y aws-cli && \\\n    yum clean all\n\nRUN if [ ! -e /usr/bin/aws ]; then ln -s /usr/bin/aws2 /usr/bin/aws; fi\n```\n\n Once saved, we build the image;\n ```sh\n docker build -t aws-batch-s3 .\n ```\n\nNext we push the image to ECR. Make sure you authenticate first otherwise you will encounter authentication errors.\nOne easy way to do this is by doing the following;\n\n```sh\nAWS_ACCOUNT_ID=[your aws account id]\nREGION=[your aws region]\n\naws ecr get-login-password | docker login --username AWS --password-stdin $AWS_ACCOUNT_ID.dkr.ecr.$REGION.amazonaws.com\n```\n\nWhen you run the last command, you should get a response;\n```sh\nLogin Succeeded\n```\n\nNow let's tag and push our custom docker image to ecr as follows;\n```sh\ndocker tag aws-batch-s3:latest $AWS_ACCOUNT_ID.dkr.ecr.$REGION.amazonaws.com/aws-batch-s3:latest\n\ndocker push $AWS_ACCOUNT_ID.dkr.ecr.$REGION.amazonaws.com/aws-batch-s3:latest\n```\nPlease note, you will need to have created a repository in Amazon ECR to match the above, otherwise you will encouter errors.\n\nThe first part of this topic focuses on setting up the environment and preparing the necessary resources in AWS, while the next part will delve into using the AWS Management Console to complete the setup and see AWS Batch in action.\n","collection":"blog","data":{"title":"Batch Processing With AWS Batch - Part 1","description":"Using AWS Batch, a fully managed service that can be used to efficiently run workloads without the overhead of configuring and managing the resources required to run the workloads.","author":"Steve Popoola","pubDate":"2024-08-21T00:00:00.000Z","heroImage":{"src":"/_astro/batch_processing.DKeUw1bb.jpg","width":1024,"height":754,"format":"jpg","orientation":1,"fsPath":"/app/src/content/blog/images/batch_processing.jpg"},"tags":["aws","batch processing"],"heroImageUrl":"/_image?href=%2F_astro%2Fbatch_processing.DKeUw1bb.jpg&f=webp"}},{"id":"self-hosting-with-coolify.md","slug":"self-hosting-with-coolify","body":"\nSelf-hosting has become an increasingly attractive option for developers looking to gain more control over their applications and reduce dependency on third-party hosting services. One powerful tool that simplifies the self-hosting process is <a href=\"https://coolify.io/\" target=\"_blank\">Coolify</a>. In this article, we'll explore the benefits of using Coolify for self-hosting, using my blog built with Astro as an example. We’ll also discuss some challenges new users might face and how to overcome them, especially regarding DevOps complexities like SSL and network connections.\n\n\nBefore switching to Coolify, I used <a href=\"https://dokku.com/\" target=\"_blank\">Dokku</a> and <a href=\"https://www.netlify.com/\" target=\"_blank\">Netlify</a> for hosting my applications. Each of these solutions has its merits, but they also come with limitations.\n\n\nDokku is quite easy to set up, supports a wide range of applications, and allows self-hosting. It however requires more hands-on management and manual configuration for deployments, updates, and scaling. Managing plugins and dependencies can be quite cumbersome especially for someone who does not have DevOps experience.\n\n\nNetlify is excellent for static site deployments, CI/CD integration and an intuitive interface. It is perfect for frontend projects with a focus on speed and ease of use.\nIt is however limited to static sites and serverless functions. It lacks the flexibility needed for more complex applications or full-stack projects. Monthly costs can add up as the project scales.\n\n\nThe decision to transition from Dokku and Netlify to Coolify was driven by several key factors:\n\n1. **Ease of Use**: Coolify offers a user-friendly interface that simplifies deployment and management processes, reducing the need for manual intervention compared to Dokku.\n\n2. **Versatility**: Unlike Netlify, which is ideal for static sites, Coolify supports a wide range of applications, including full-stack projects. This makes it a more versatile solution for developers who need to host diverse types of applications.\n\n3. **Cost Efficiency**: By allowing me to host applications on personal hardware (like a mini computer) and cloud VPS, Coolify offers a cost-effective alternative to Netlify, where costs can escalate with increased usage.\n\n4. **Integrated Features**: Coolify’s support for Nixpacks simplifies dependency management, a feature that significantly enhanced my development workflow compared to the more manual setup required by Dokku.\n\n\nTo illustrate the benefits of Coolify, let me share my experience of self-hosting my blog built with <a href=\"https://astro.build/\" target=\"_blank\">Astro</a>. I hosted Coolify on a mini computer in my home but deployed my application to a remote VPS hosted on <a href=\"https://www.civo.com/\" target=\"_blank\">Civo</a>. This setup provided the best of both worlds: local control with cloud scalability.\n\n![Coolify Settings](./images/coolify_settings.jpg)\n\nInstalllig Coolify on my home PC running Ubuntu linux was quitge straightforward. I just ran the following as instructed in the manual;\n```bash\n> curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash\n```\nOnce it finished installing, the UI became available on port 8000. The two most important concepts to understand in Coolify are Projects and Servers. In my setup, I configured two servers, my home server where Coolify in installed and the remote server where my application is built and deployed using the Coolify proxy. My project was hosted in a private repository on Github but the process of configuring it as a source was seamless as I was able to create a Github application to grant Coolify permission to access my code. Once configured, all I need to do is make changes, push to the repository and Coolify handles the deployment.\n \nOne of the standout features of Coolify is its support for Nixpacks. Nixpacks automatically detects your project's dependencies and installs them for you, making the setup process much smoother. For my Astro blog, Nixpacks ensured that all necessary packages were installed without any manual intervention, saving time and reducing the risk of errors.\n\nWhile Coolify simplifies many aspects of self-hosting, new users might encounter some challenges. One issue I faced was related to the Sharp library, which Astro uses for image processing. During the production build, the Sharp dependency kept failing because it wasn't being installed properly.\n\nTo solve this problem, I utilised the \"build command\" field where you can specify custom commands to run before the build process. By adding `yarn install sharp && yarn build` to this field, I ensured that Sharp was installed correctly before the build, resolving the issue.\n\nHere’s how I configured the build command in Coolify:\n\n1. Open Coolify and navigate to your project settings.\n2. Locate the \"Build Command\" field.\n3. Enter the following command:\n   ```bash\n   yarn install sharp && yarn build\n   ```\n4. Save the configuration and redeploy your application.\n\nThis simple adjustment made all the difference, allowing the build process to complete successfully and ensuring that my blog's images were processed correctly.\n\n\nSelf-hosting with Coolify offers numerous benefits, from simplified deployment to increased control and cost efficiency. While there may be challenges, such as dependency issues, Coolify provides the tools and flexibility to overcome them easily. By leveraging features like Nixpacks and customizable build commands, you can ensure a smooth self-hosting experience.\n\nMy journey of hosting an Astro blog with Coolify demonstrates how powerful and user-friendly this tool can be. Whether you're a seasoned developer or new to self-hosting, Coolify provides a robust platform to host and manage your applications efficiently. By choosing Coolify over previous solutions like Dokku and Netlify, I gained a versatile, cost-effective, and easy-to-use platform that perfectly meets my hosting needs.","collection":"blog","data":{"title":"Self Hosting With Coolify","description":"Self-hosting has become an increasingly attractive option for developers looking to gain more control over their applications and reduce dependency on third-party hosting services. This article explores the benfits of using Coolify for self-hosting.","author":"Steve Popoola","pubDate":"2024-07-30T00:00:00.000Z","heroImage":{"src":"/_astro/server_hosting.ZbHew1_A.jpg","width":1000,"height":666,"format":"jpg","fsPath":"/app/src/content/blog/images/server_hosting.jpg"},"tags":["self hosting","web development"],"heroImageUrl":"/_image?href=%2F_astro%2Fserver_hosting.ZbHew1_A.jpg&f=webp"}},{"id":"rebuilding-my-blog-with-astro.md","slug":"rebuilding-my-blog-with-astro","body":"\n\nTransitioning from an outdated platform to a modern, efficient one can be a daunting task. This was my reality when I decided to rebuild my blog. Previously, my blog was built with <a href=\"https://gridsome.org/\" target=\"_blank\">Gridsome</a>, a framework I cherished for its simplicity and performance. However, development on Gridsome slowed significantly, and to compound issues, <a href=\"https://tina.io/forestry/\" target=\"_blank\">Forestry.io</a>, the CMS I used, was acquired and rebranded. With these challenges, I embarked on a journey to find a new solution that would meet my needs. After exploring various options like <a href=\"https://nuxt.com/\" target=\"_blank\">Nuxt</a> and <a href=\"https://nextjs.org/\" target=\"_blank\">Next.js</a>, I was introduced to <a href=\"https://astro.build/\" target=\"_blank\">Astro</a>. This is the story of how I rebuilt my blog with Astro.\n\n#### The Search for a New Framework\n\nWhen it became clear that Gridsome was no longer being actively developed, I knew I had to move on. I needed a modern framework that could handle static site generation and offer great performance. I first explored <a href=\"https://nuxt.com/\" target=\"_blank\">Nuxt</a>, a powerful and flexible framework that seemed promising. <a href=\"https://nextjs.org/\" target=\"_blank\">Next.js</a> was another contender, known for its server-side rendering and static site generation capabilities. Both were impressive, but they came with a learning curve and complexity I wasn't ready to tackle.\n\n#### Discovering Astro\n\nEnter <a href=\"https://astro.build/\" target=\"_blank\">Astro</a>. I was chatting with one of my friends about my search for a new framework to rebuild my blog with. She mentioned Astro and I decided to have a go at it. I learnt that Astro promises to deliver faster websites by default, focusing on performance and simplicity. It allows you to build sites with your favorite frameworks like React, Vue, or Svelte, but only ships the minimal amount of JavaScript needed. Having developed with Vuejs for many years, this sounded like the perfect solution for my needs.\n\n### Quick Astro Primer\n\nTo get started with Astro, follow these installation steps and basic setup guidelines.\n\n#### Installation Steps\n\n1. **Install Node.js**: Make sure you have Node.js installed. You can download it from [Node.js](https://nodejs.org/). Make sure you have the latest version of Node.js installed. One of the gotchas I tripped on was my version being less than v20.\n\n2. **Create a New Astro Project**: Run the following command in your terminal to create a new Astro project:\n   ```sh\n   npm create astro@latest\n   ```\n   Follow the prompts to set up your project.\n\n3. **Navigate to Your Project Directory**: Change into the newly created directory:\n   ```sh\n   cd your-project-name\n   ```\n\n4. **Install Dependencies**: Install the required dependencies using:\n   ```sh\n   npm install\n   ```\n\n5. **Run the Development Server**: Start the development server to see your project in action:\n   ```sh\n   npm start\n   ```\n\n6. **Build Your Project**: Once you are ready to deploy, build your project with:\n   ```sh\n   npm run build\n   ```\n\n### Setting Up a Blog with Astro\n\nHere’s a quick guide to setting up a blog with Astro, including generating content from Markdown files and managing content collections.\n\n#### Generating Content from Markdown Files\n\n1. **Create a Content Directory**: Create a `content` directory in the root of your project and add a `blog` folder inside it. This is where your Markdown files will reside.\n\n2. **Add a Sample Markdown File**: Create a sample blog post in `content/blog`:\n   ```markdown\n   ---\n   title: \"My First Blog Post\"\n   description: \"Welcome to my new blog!\"\n   pubDate: \"2024-07-16\"\n   author: \"Your Name\"\n   ---\n\n   This is the content of my first blog post.\n   ```\n\n3. **Configure Content Collections**: In your `src/content/config.ts` file, define your blog collection:\n   ```typescript\n   import { defineCollection, z } from 'astro:content';\n\n   const blogCollection = defineCollection({\n     schema: ({ image }) => z.object({\n       title: z.string(),\n       description: z.string(),\n       author: z.string(),\n       pubDate: z.coerce.date(),\n       updatedDate: z.coerce.date().optional(),\n       heroImage: image().optional(),\n     }),\n   });\n\n   export const collections = { \n     blog: blogCollection \n   };\n   ```\n\n4. **Fetch and Display Blog Posts**: In a new file `src/pages/blog/[slug].astro`, fetch and display your blog posts:\n   ```astro\n   ---\n   import { getCollection, type CollectionEntry } from 'astro:content';\n   import BlogPostLayout from '../../layouts/BlogPostLayout.astro';\n\n   export async function getStaticPaths() {\n     const posts = await getCollection('blog');\n     return posts.map((post) => ({\n       params: { slug: post.slug },\n       props: { post },\n     }));\n   }\n\n   const { post } = Astro.props;\n   const { Content } = await post.render();\n   ---\n\n   <BlogPostLayout {...post.data}>\n     <Content />\n   </BlogPostLayout>\n   ```\n\n### Benefits of Astro's Image Component\n\nOne of the standout features of Astro is its Image component. This component brings several benefits that enhance the performance and user experience of my blog:\n\n- **Automatic Image Optimization**: Astro's Image component automatically optimizes images for various screen sizes and resolutions. This means that users get the best quality images without unnecessary data, resulting in faster load times.\n  \n- **Responsive Images**: With the Image component, you can easily define different image sizes for different devices. This ensures that the appropriate image size is served based on the user's device, further improving load times and reducing bandwidth usage.\n  \n- **Lazy Loading**: Images are lazy-loaded by default, which means they only load when they come into the viewport. This improves the initial load time of the page and provides a smoother user experience.\n\n- **Modern Image Formats**: Astro supports modern image formats like WebP, which offer better compression and quality compared to traditional formats like JPEG and PNG. This further enhances performance and reduces the size of images served to users.\n\nIntegrating Astro's Image component into my blog was straightforward and provided immediate benefits in terms of performance and user experience.\n\n#### The Sharp Issue\n\nOne significant issue I encountered during the rebuild was with the `sharp` image processing library. In my local environment, I had to run `yarn add sharp --ignore-engines` to get images to render correctly. This step ensured that `sharp` was installed despite any engine incompatibilities.\n\nHowever, in production, I kept hitting the error: \"Could not process image request: MissingSharp: Could not find Sharp.\" This was particularly frustrating because `sharp` was already installed locally. After some troubleshooting, I decided to replicate the local workaround in the production build process.\n\nI use <a href=\"https://coolify.io\" target=_blank class='text-blue-800'>Coolify</a> to build and deploy my blog. I added the following to the Coolify build command field: `yarn install & yarn add sharp --ignore-engines`. And voila! It worked! This experience taught me the importance of ensuring that all necessary dependencies are correctly installed in the production environment. I believe this should be documented and hope it helps anyone who encounters this problem.\n\n#### Deploying with Coolify\n\nDeployment was another area where I needed a robust solution. I decided to use Coolify, a self-hosting platform that simplifies deployment and continuous integration. Coolify made it possible to deploy my Astro site effortlessly and automatically apply changes whenever I pushed updates to my repository.\n\nCoolify provided a seamless deployment experience:\n- **Self-Hosting**: With Coolify, I could host my site on my own server, giving me full control over the deployment environment.\n- **Automatic Deployments**: Every time I pushed changes to my Git repository, Coolify detected the updates and redeployed my site, ensuring that my blog was always up-to-date.\n\n#### The Result\n\nAfter a few days of learning and building, my blog was fully transitioned to Astro. The results were impressive:\n- **Improved Performance**: Astro's performance optimizations, along with the benefits of its Image component, were evident. My site loaded faster, providing a better experience for my readers.\n- **Simplified Content Management**: Managing content with Astro's collections was intuitive and efficient.\n- **Seamless Deployment**: Coolify made the deployment process painless, allowing me to focus on creating content rather than managing infrastructure.\n\nRebuilding my blog with Astro was a rewarding experience. Despite the initial learning curve, Astro's simplicity, performance benefits, and flexibility made it an excellent choice for my needs. Combined with the power of Coolify for deployment, I now have a modern, efficient blog that I can easily manage and update. \n\nIf you're looking to transition from an older platform or simply want to explore new possibilities for your static site, I highly recommend giving Astro a try. And if you encounter issues with `sharp`, remember the trick: `yarn install & yarn add sharp --ignore-engines` can save you a lot of frustration. The benefits of Astro's Image component also make it an attractive option for anyone looking to optimize their site's performance and user experience.","collection":"blog","data":{"title":"Rebuilding My Blog with Astro","description":"Taking you on a journey through the process of rebuilding my blog using Astro, a modern static site generator. Join me as I explore Astro's unique approach to building fast, optimized websites and how it transformed my blogging experience.","author":"Steve Popoola","pubDate":"2024-07-16T00:00:00.000Z","heroImage":{"src":"/_astro/astro_blog_image.thoHX4gN.jpg","width":1920,"height":1080,"format":"jpg","fsPath":"/app/src/content/blog/images/astro_blog_image.jpg"},"tags":["blog","astro"],"heroImageUrl":"/_image?href=%2F_astro%2Fastro_blog_image.thoHX4gN.jpg&f=webp"}},{"id":"setting-up-load-balanced-ec2-instances-with-terraform.md","slug":"setting-up-load-balanced-ec2-instances-with-terraform","body":"In the <a href=\"/blog/setting-up-infrastructure-on-aws-with-terraform-part-1/\">Part 1</a> of this series, we went through provisioning an EC2 instance with <a href=\"https://www.terraform.io/\" target=\"_blank\">Terraform</a>. In this second part, we will be taking a step further by provisioning a load balancer serving requests for two EC2 instances.\n\nFirst let’s answer the question, What is a Load Balancer and why would you need to provision one?  You can imagine a load balancer as a Traffic Marshall, directing requests to and from your web servers.  The application servers share a private network with the load balancer which is exposed to the internet,  allowing the load balancer receive requests from clients (end users)  and route the request  to any of the application servers. The load balancer  then receives the response from the servers and returns it to the client(s).\n\nOne advantage of load balancers is that when one of the servers go down for any reason, the application does not go down as in the case where you only have one server running the application.  The load balancer routes the request to the other servers available giving the administrator the opportunity to repair or replace the faulty server.\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/c_scale,w_auto:100,dpr_auto/v1670538139/uploads/aws_lb_cxnxym.jpg)\n\nNow that we know what a load balancer is and what it does, let’s now look the requirements needed to create a load balanced infrastructure on <a href=\"https://aws.amazon.com/\" target=\"_blank\">AWS</a>.\n\nIn the context of AWS, the standard practice is to create the application servers in different available zones. This is to ensure that even if anything happens to one availability zone, the load balancer can still serve requests to servers in other availability zones. To create a load balancer in AWS, we will need to create the following;\n\n**A Listener** - A listener checks for connection requests from client. Rules are set to determine what should happen when certain conditions are met in the request.\n\n**Target Groups** - A target group consists of one or more registered targets, for example, EC2 instances. A health check is configured on each target group which enables the load balancer determine whether the target is healthy or not. If a target is healthy, then requests be be routed to that target otherwise, requests are routed to other targets.\n\nBased on what we have now learnt. Let’s start making changes to the code we wrote in Part 1.\n\nFirst, let’s define a couple of variables.  We will create these variables in a file called, variables.tf.\n\nI have added a few comments to describe what  each variables stands for.\n```json\nvariable “server_port” {\n  description = “The port the server will use for HTTP requests”\n  type        = number\n  default     = 80\n}\n\nvariable \"alb_name\" {\n  description = \"The name of the Load Balancer\"\n  type        = string\n  default     = \"example-alb\"\n}\n\nvariable \"instance_security_group_name\" {\n  description = \"The name of the security group for the EC2 Instances\"\n  type        = string\n  default     = \"example-instance-sg\"\n}\n\nvariable \"alb_security_group_name\" {\n  description = \"The name of the security group for the ALB\"\n  type        = string\n  default     = \"example-alb-sg\"\n}\n```\nNext, we will update our \\`main.tf\\` file.  I will highlight some of the changes and try to explain what the change is about.\n\nIdeally, we could have created a load balancer and a bunch of EC2 instances, then associate each EC2 instance to the load balancer. That would work but it is not very flexible. Instead, what we would do is leverage  one of the features of AWS known as Auto scaling. What this does is to monitors your application and adjusts resources in line with demand.\n\nThe first thing we are going to do therefore is create a launch configuration resource.   Launch configuration is simply a template that an auto scaling group uses to launch EC2 instances.\n\n```json\n# Create launch configuration for ASG\nresource \"aws_launch_configuration\" \"examplelc\" {\n  name_prefix          = \"examplelc_config-\"\n  image_id             = \"ami-04842bc62789b682e\"\n  instance_type        = \"t2.micro\"\n  security_groups      = [aws_security_group.instance.id]\n  user_data            = file(\"userdata.tpl\")\n  lifecycle {\n    create_before_destroy = true\n  }\n```\n\nMost of  configuration is self explanatory bit I will highlight two of the items. ***user_data** and  ***lifecycle***  EC2 grant us the ability to define user data which is a set of instructions on what should happen when the each EC2 instance in the Auto scaling group is created.  We have created a file called ***user-data.tpl*** which contains the following;\n\n```sh\n    #!/bin/bash\n    sudo apt update -y &&\n    sudo apt install -y nginx\n    \n    AWS_INSTANCE_ID=`curl -s http://169.254.169.254/latest/meta-data/instance-id`\n    HOSTNAME=`curl -s http://169.254.169.254/latest/meta-data/hostname`\n    \n    cat > index.html << EOF\n        <html>\n            <head>\n                <title>Terraform In Action</title>\n                <script src=\"https://cdn.tailwindcss.com\"></script>\n            </head>\n            <body>\n                <div class=\"bg-gray-50 p-6\">\n                        <div class=\"mb-6 text-3xl flex justify-center overflow-hidden\">\n    \n                            <h1>Terraform In Action</h1>\n                        </div>\n    \n                        <div class=\"flex\">\n                            <div class=\"w-1/3\">Instance ID:</div>\n                            <div>${AWS_INSTANCE_ID}</div>\n                        </div>\n                            <div class=\"flex\">\n                            <div class=\"w-1/3\">Host:</div>\n                            <div>${HOSTNAME}</div>\n                        </div>\n                            <div class=\"flex\">\n                            <div class=\"w-1/3\">Availability Zone:</div>\n                            <div>${AZ}</div>\n                        </div>\n                    </div>\n            </body>\n        </html>\n    EOF\n    \n    sudo cp index.html /var/www/html/index.html\n```\n\nThe template is a shell script executed once the instance is created and running. It installs nginx, created an html file and copies the file to the document root  so that it can be accessed once load balancer starts serving requests.\n\nThe ***_lifecycle_*** configuration ensures that before an existing instance is destroyed, it would first provision a new instance that would replace it.\n\nNow that we have our launch configuration in place, we can now create the autoscaling group.\n\n```json\n  resource \"aws_autoscaling_group\" \"examplelc\" {\n    launch_configuration = aws_launch_configuration.examplelc.id\n    availability_zones   = data.aws_availability_zones.all.names\n    min_size = 2\n    max_size = 4\n    target_group_arns = [aws_lb_target_group.asg.arn]\n    health_check_type = \"ELB\"\n  \n    tag {\n      key                 = \"Name\"\n      value               = \"example-webserver\"\n      propagate_at_launch = true\n    }\n  }\n  ```\n\nThe autoscaling group _examplelc_ above, will use the launch configuration we created previously. We have defined that it should create the instances in any of the availability zones in our region. The minimum number of instances that should be created is 2 while the maximum is 4.  We define the health check configuration that the load balancer will use to verify that each instance is healthy so it can route requests accordingly.\n\nNext we define the security groups both for the instances as well as the load balancer.\n```json\n  resource \"aws_security_group\" \"instance\" {\n    name = var.instance_security_group_name\n  \n    ingress {\n      from_port   = var.server_port\n      to_port     = var.server_port\n      protocol    = \"tcp\"\n      cidr_blocks = [\"0.0.0.0/0\"]\n    }\n  \n    ingress {\n      from_port   = var.ssh_port\n      to_port     = var.ssh_port\n      protocol    = \"tcp\"\n      cidr_blocks = [\"0.0.0.0/0\"]\n    }\n  \n    egress {\n      from_port   = 0\n      to_port     = 0\n      protocol    = \"-1\"\n      cidr_blocks = [\"0.0.0.0/0\"]\n    }\n  }\n  \n  resource \"aws_security_group\" \"alb\" {\n    name = var.alb_security_group_name\n  \n    # Allow inbound HTTP requests\n    ingress {\n      from_port   = 80\n      to_port     = 80\n      protocol    = \"tcp\"\n      cidr_blocks = [\"0.0.0.0/0\"]\n    }\n  \n    # Allow all outbound requests\n    egress {\n      from_port   = 0\n      to_port     = 0\n      protocol    = \"-1\"\n      cidr_blocks = [\"0.0.0.0/0\"]\n    }\n  }\n  ```\n\nNext, we define some data sources. These are information defined outside our configuration but required to provision our resources.\n\n```json\n  data \"aws_vpc\" \"default\" {\n    default = true\n  }\n  \n  data \"aws_subnets\" \"default\" {\n      filter {\n      name   = \"vpc-id\"\n      values = [data.aws_vpc.default.id]\n    }\n  }\n  \n  data \"aws_availability_zones\" \"all\" {}\n  ```\n\nWe are specifying to Terraform that the default vpc, subnets and all availability zones in our region should be used for the resources we are creating.\n\nLet’s now create our load balancer.\n```json\n    resource \"aws_lb\" \"myapp\" {\n      name               = var.alb_name\n      load_balancer_type = \"application\"\n      subnets            = data.aws_subnets.default.ids\n      security_groups    = [aws_security_group.alb.id]\n    }\n    \n    resource \"aws_lb_target_group\" \"asg\" {\n      name     = var.alb_name\n      port     = var.server_port\n      protocol = \"HTTP\"\n      vpc_id   = data.aws_vpc.default.id\n    \n      health_check {\n        path     = \"/\"\n        protocol = \"HTTP\"\n        matcher  = \"200\"\n        interval = 15\n      }\n    }\n    \n    resource \"aws_lb_listener_rule\" \"asg\" {\n      listener_arn = aws_lb_listener.http.arn\n      priority     = 100\n    \n      condition {\n        path_pattern {\n          values = [\"*\"]\n        }\n      }\n    \n      action {\n        type             = \"forward\"\n        target_group_arn = aws_lb_target_group.asg.arn\n      }\n    }\n    \n    resource \"aws_lb_listener\" \"http\" {\n      load_balancer_arn = aws_lb.myapp.arn\n      port              = 80\n      protocol          = \"HTTP\"\n    \n      # By default, return a simple 404 page\n      default_action {\n        type = \"fixed-response\"\n    \n        fixed_response {\n          content_type = \"text/plain\"\n          message_body = \"404: page not found\"\n          status_code  = 404\n        }\n      }\n    }\n```\nAll the values starting with `var.` are defined in our `variables.tf` file. For instance,  the name of our load balancer; `var.alb_name`  is defined as `example-alb`\n\n```json\n    variable \"alb_name\" {\n      description = \"The name of the Load Balancer\"\n      type        = string\n      default     = \"example-alb\"\n    }\n```\nTo create our load balancer, we  defined the name, type, subnet and vpc group in the ***aws_lb resource***\n\nWe create the target group, _aws_lb_target_group_ which will contain references to all the instances that will be served by the load balancer as well as including the health check settings.\n\nWe create  the listener rule, _aws_lb_listener_rule_  which tells the load balancer to only allow requests meeting a particular pattern. In this case, we want the load balancer to handle requests matching anything.\n\nLastly we create the load balancer listener, aws_lb_listener  where we configure the port and the kind of request to listen to, in this case, **HTTP**\n\nFinally, a new file ***_outputs.tf_***  has been introduced. This file is what Terraform uses to output any information when it is in the process of provisioning our resources.\n```json\n  output \"alb_dns_name\" {\n    value       = aws_lb.myapp.dns_name\n    description = \"The domain name of the load balancer\"\n  }\n```\n\nWe want Terraform to output the load balancer domain once it has been provisioned. This is useful so that we can simply just copy it and visit the page in our browser.\n\nWe have now taken a step further in our journey to setting up infrastructure on AWS using Terraform. In this second part, we created an autoscaling group  containing a minimum of 2 and a maximum of 4 EC2 instances. We then created a load balancer listening on port 80 and configured it to serve requests to the EC2 instances.\n\nYou can find the source code in <a href=\"https://github.com/stevepop/terraform-primer\" target=\"_blank\">here</a>","collection":"blog","data":{"title":"Setting Up Load Balanced EC2 Instances with Terraform","description":"Part 2 of Setting Up Infrastructure on AWS With Terraform. Povisioning a load balancer serving requests for two EC2 instances.  ","author":"Steve Popoola","pubDate":"2022-12-08T00:00:00.000Z","heroImage":{"src":"/_astro/server_infra.p8BUlsC9.jpeg","width":1080,"height":718,"format":"jpg","fsPath":"/app/src/content/blog/images/server_infra.jpeg"},"tags":["aws","ec2","terraform"],"heroImageUrl":"/_image?href=%2F_astro%2Fserver_infra.p8BUlsC9.jpeg&f=webp"}},{"id":"setting-up-infrastructure-on-aws-with-terraform-part-1.md","slug":"setting-up-infrastructure-on-aws-with-terraform-part-1","body":"This primer  is written to help those new to Infrastructure-as-code get their feet wet,  setting up infrastructure with <a href=\"https://www.terraform.io/\" target=\"_blank\">Terraform</a> on AWS\n\nInfrastructure as code (iaC) allows the person responsible for building servers and provisioning the server with everything that it needs to function. It also let’s you define every step that is required to set up resources in a way that can be easily readable. One major advantage of iaC over normal ways of provisioning infrastructure is that it allows the author (s) to define all the resources to be created, changed or destroyed only once and used to create the required resources multiple times to create one, a dozen, hundred or thousands of resources.\n\nAnother major advantage of using iaC over conventional means of creating infrastructure is that rather than relying on someone’s notes, which may change over time or get missing, configurations can be saved into version control and share among individuals or teams.\n\n## Terraform  \nAccording <a href=\"https://www.terraform.io/\" target=\"_blank\">Terraform’s</a> own documentation,\n> Terraform is HashiCorp’s infrastructure as code tool. It lets you define resources and infrastructure in human-readable, declarative configuration files, and manages your infrastructure’s lifecycle. Using Terraform has several advantages over manually managing your infrastructure.\n\n \n### Installation\n\nPlease see link to install Terraform in your operating system [https://developer.hashicorp.com/terraform/tutorials/aws-get-started/install-cli](https://developer.hashicorp.com/terraform/tutorials/aws-get-started/install-cli \"https://developer.hashicorp.com/terraform/tutorials/aws-get-started/install-cli\"))\n\n\n### Building Our First Infrastructure on AWS\n\nIn this first exercise, we will be provisioning an EC2 instance on AWS.  An EC2 instance on AWS is a virtual machine that can run any service and it is based on images available for different operating systems. For this exercise, we will be building an Ubuntu based EC2 instance.\n\nTo follow along, you need to have installed Terraform. Verify that this is running by executing this command in your terminal.\n```sh\nterraform —version\n```\n\nMake sure that the version is the most recent version. At the time of this writing, the current version is ***1.3.5***.  Also make sure that you have installed the AWS cli tool and have configured your aws credentials. With that out of the way, let’s get started!\n\nCreate a folder in a location you can easily remember and change directory to that location. For beginners, I recommend a code editor like VSCode and also recommend that you install the official Terraform plugin. This will make things easier for you, I promise!\n\nLet’s write our first terraform configuration and I will try to explain as we go along.\n\nIn the new folder you created, create a file called  ***main.tf***\n```tf\n  terraform {\n    required_providers {\n      aws = {\n        source  = \"hashicorp/aws\"\n        version = \"~> 4.16\"\n      }\n    }\n  \n    required_version = \">= 1.0.11\"\n  }\n  \n  provider \"aws\" {\n    region  = \"eu-west-2\"\n  }\n  \n  resource \"aws_instance\" \"web_server\" {\n    ami           = \"ami-04842bc62789b682e\"\n    instance_type = \"t2.micro\"\n  \n    tags = {\n      Name = \"ExampleWebServer\"\n    }\n  }\n```\n\nThe **terraform** block contains the settings that Terraform will use to provision your infrastructure. The most important item here is the `required_providers`. This is used to tell Terraform which provider to use and will determine where your resources will be created. In this case, we want to create an EC2 instance in AWS so our provider is ***aws*** as declared in the terraform block.  The **provider** is a plugin which Terraform uses to create and manage our resources. The resource block takes two arguments; r_esource type_ and _resource name_. In our example above, our resource type is ***aws_instance*** and the resource name is ***web_server***\n\nThe first thing we have to do is to initialise the directory in which we have created our terraform project.  This allows Terraform to download and install the providers  which we have defined in our configuration - in this case,  ***aws***\n\nFrom the command line, run the following command;\n```sh\nterraform init\n```\n\nIf all goes well, you should see something that looks like the following;\n\n> Initializing the backend...\n>\n> Initializing provider plugins...\n>\n> \\- Finding hashicorp/aws versions matching \"\\~> 4.16\"...\n>\n> \\- Installing hashicorp/aws v4.40.0...\n>\n> \\- Installed hashicorp/aws v4.40.0 (signed by HashiCorp)\n>\n> Terraform has created a lock file .terraform.lock.hcl to record the provider\n>\n> selections it made above. Include this file in your version control repository\n>\n> so that Terraform can guarantee to make the same selections by default when\n>\n> you run \"terraform init\" in the future.\n>\n> Terraform has been successfully initialized!\n\nWhoop! We are now on our way to creating our first resource.  To ensure that your configuration syntax is correct, you can run the following command;\n\n```sh\nterraform-primer terraform validate\n    \nSuccess! The configuration is valid.\n```\n\nNext we tell terraform to apply our configuration with the `apply` command. This should come as no surprise since Terraform uses declarative commands;\n```sh\nterraform apply\n```\n\nOnce we run the above command, terraform will print out it's execution plan. It tells you what actions it will take to create the infrastructure that you have defined in your configuration. It will however request that you confirm if you are happy with the changes. If you confirm, it goes ahead and makes the changes but if you decline, it will not make any change.\n\nLet’s go ahead and confirm that we are happy with the execution plan.\n\nIf all goes well, you should see the following;\n\n> aws_instance.web_server: Creating...\n>\n> aws_instance.web_server: Still creating... \\[10s elapsed\\]\n>\n> aws_instance.web_server: Still creating... \\[20s elapsed\\]\n>\n> aws_instance.web_server: Still creating... \\[30s elapsed\\]\n>\n> aws_instance.web_server: Creation complete after 32s \\[id=i-0df0104334a4d8fc1\\]\n>\n> Apply complete! Resources: 1 added, 0 changed, 0 destroyed.\n\nWhoop! You have just created your first Infrastructure on AWS! Log in to your AWS console, navigate to your EC2 page and you should see your ***ExampleWebServer*** already running.\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/c_scale,w_auto:100,dpr_auto/v1669068838/uploads/Screenshot_2022-11-21_at_21.27.05_amzo22.png)\n\nOne important thing to note here. When you  executed  ***terraform apply***  terraform created a  ***terraform.tfstate*** in your directory. This is what terraform uses to track changes to your infrastructure so be careful not to delete this file! Ideally it is always better to store terraform state in a remote storage like AWS S3 especially when working in a team but that is beyond the scope of this primer.  You can inspect  current state by running ***terraform show***\n\n> Another great feature of terraform is that because it keeps track of what was created, when you run the ***terraform destroy*** command  it removes all the resources that it created according to your configuration. This means if you have other resources that you created outside of terraform, they will remain untouched.\n\n### Configuration Changes\nLet’s make a change to the configuration above and let’s see how terraform handles that.  Our EC2 instance was created with **Ubuntu 20.04** which was configured in our resource using its ami but we’ve decided that we want to upgrade to Ubuntu 22.04. What do we do? Easy! All we need to do is change the image id to ***ami-0f540e9f488cfa27d***  which is for **Ubuntu 22.04**.\n\nOnce you have changed it, run ***terraform apply*** again.  Terraform will create another execution plan telling you the changes it wants to make. In this case, it will destroy our current EC2 instance and replace it with a new one provisioned with the new AMI that we configured\n\n**Destroy Infrastructure**\nAs mentioned earlier, because Terraform keeps track of its state, when you decide to remove all the resources you created, it only removes what it created based on your configuration. Let’s go ahead and remove the EC2 instance we created. Run the command ***terraform destroy***\n\nYou should see the execution plan and the summary;\n\n```sh \nPlan: 0 to add, 0 to change, 1 to destroy.\n```\n\nOnce you confirm, terraform will go ahead and remove the EC2 instance we created.\n\nWe have only just scratched the surface of what we can do with terraform. In the next part of this series, we will explore provisioning multiple EC2 instances  with a load balancer.","collection":"blog","data":{"title":"Setting Up Infrastructure on AWS With Terraform (Part 1)","description":"A primer written to help those new to Infrastructure-as-code get their feet wet, setting up infrastructure with Terraform on AWS.","author":"Steve Popoola","pubDate":"2022-11-21T21:55:00.000Z","heroImage":{"src":"/_astro/terraform_image_part_1.DACE8J87.jpeg","width":1000,"height":561,"format":"jpg","orientation":1,"fsPath":"/app/src/content/blog/images/terraform_image_part_1.jpeg"},"tags":["infrastructure-as-code","terraform"],"heroImageUrl":"/_image?href=%2F_astro%2Fterraform_image_part_1.DACE8J87.jpeg&f=webp"}},{"id":"app-deployment-to-ecs-for-beginners.md","slug":"app-deployment-to-ecs-for-beginners","body":"Amazon Elastic Container Service (ECS) is a container management service by Amazon Web Services. It can be used to run and manage application running in containers in what is known as a ‘cluster’.\n\nIn order to understand how ECS works, you need to understand the underlying technology of the service that ECS manages.  ECS supports and **Docker** and allows you to run distributed applications across different containers by automating processes that you would otherwise spend hours setting up.\n\nSimply put, Docker is a software platform that allows you to build and deploy applications in what is referred to as containers. These are lightweight execution environments running in an operating system but isolated from one another.\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/c_scale,w_auto:100,dpr_auto/v1666189120/uploads/Docker_Diagram_bfkcj3.png)\n\nWhat are the benefits of Docker you might ask? That really isn’t the goal of this article but I will mention a few reasons why developers use Docker.\n\n- It allows for easy sharing of codebase that should run in any operating system that supports Docker\n\n- It allows for easy testing of application in different environments and library versions. Take for instance, you develop a JavaScript application in Node 16 and want to test if it works in Node 14. You simple just build a Node image tagged v14 and run the application within the container.\n\n- It is portable - This means that docker containers can run in any environment where Docker is supported wether it’s on your laptop, a PC, a server or in the cloud. I actually run an application in Docker containers on my Raspberry PI at home.\n\nRight, so let’s get into deploying a containerised application in ECS.  I have decided to write on this step approach because I encountered some gotchas when I started looking into deploying to ECS and will share them as we go along.\n\nSo first thing we will do is create a sample application and test it locally to make sure it works before we create a Docker container that the application will run in.  To save time and space, I have written a sample Flask application and have included the link here.  [https://github.com/stevepop/flask-app.git](https://github.com/stevepop/flask-app.git)\n\nYou can either clone the application or write the code yourself.  Flask is a Python based web development framework so you need to have Python installed on your computer to follow along with this article.\n\nTest Application - To test that the application works, execute the following command within the folder where you downloaded the code. In my own case, I am running this from a folder I named, ‘flask-app’\n```sh\nFLASK_APP=server.py flask run\n```\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/c_scale,w_auto:100,dpr_auto/v1666189120/uploads/terminal_console_qnbvaj.png)\n\nThe above image is what you should see if it runs successfully. Visit http://127.0.0.1:5000.  You should see a json object;\n\n```json\n{\n  message: “Working fine\n}\n  ```\n\nIf you add **/tasks** to that link, you will a json object with an array of task items displayed.\n\nOnce we are sure that everything works, it is now time for us to create our Docker container. This is not a Docker primer so I will not be going into the details of the Dockerfile. One thing I will however point out is the line, **EXPOSE 5000**. This is very important because it will be required for running the application successfully in ECS. With this line, we are telling the container to make this port available to the host environment so that requests can come into the container through that port. When we get to adding a container to ECS, we will see why this is important.\n\nThe next step is to build the image. We do this by running the command \n```sh\ndocker build -t flask_app .\n```\nMake sure you add the **.** at the end. This is one of the gotchas new beginners to docker fall into. We are basically telling docker that what you need to build this image is in current directory.\n\nOnce the image is built, we need to start the container and test if the application runs. This is done by executing the command;\n\n```sh\ndocker run -d --name flask-app -p 5000:5000 flask-app\n```\n\nLet’s break the above command down into it’s integral parts;\n\n<strong>sh docker run.</strong>  We are telling docker to start a new container and run the image we just created with the following parameters;\n\n<strong>d</strong> - Run the container in the background. Without this, Docker will keep running the application at the console and you will need to terminate it manually.\n\n<strong>--name flask-app</strong>   Name to give the container. Without this, Docker will give it a random name.\n\n<strong>p</strong>- Expose port 5000 within the container to port 5000 on the host computer.\n\n<strong>flask-app</strong> - The name of the image to use.\n\nVisit the same link we used for testing the application before we built our container and you should see the same response.\n\nNow that our Docker container is running our application successfully, the next step is to deploy our application to ECS. If you are following along, you need the following;\n\n* Without the need to say it, you’ll need an AWS account.\n* You will need to create a user on your IAM page. The user must have the following permissions;\n   -  AmazonEC2ContainerRegistryFullAccess\n   - AmazonECS_FullAccess\n   - AmazonElasticContainerRegistryPublicFullAccess\n* Finally you need to make sure that you configure your user’s ***aws_access_key_id*** and ***aws_secret_access_key*** in your ***.aws/credentials***`\n\nOne the above are in place, you are good to go.\n\n**Step 1 - Create a Repository.**  \n* Log in to your AWS console and search for ‘ECS’\n* Click on ‘Repositories’ link on the left side menu.\n* On the ‘Create repository’ page, enter a name in the Repository name field and click on ‘create’. -\n* Once the repository is created, click on the name to visit the new repository you just created. At the top of the page is a button labelled, ‘View push commands’. -\n* Depending on your operating system, AWS gives you the steps you need to follow to push your image to your repository along with the explanation of each command. It is simply a matter of copying the commands and executing it in your command line. Make sure you are executing the commands within the folder you created application in.\n\n**Step 2 - Create Cluster.**  \n* Go to ECS page. The quickest way is to enter ‘ecs’ in the search bar.\n* Click on the ‘Clusters’ link on the left side menu.\n* Click on the blue “Create Cluster” button\n* We are using Linux for this tutorial so if you are following along, click on the “EC2 Linux + Networking” box. If you are however using Windows, you will need to select “EC2 Windows + Networking”.\n  - Enter Cluster name - In this example, I am using “FlaskAppCluster”\n  - Leave the Provisioning Model on ‘On Demand Instance’\n  - For “EC2 Instance type” select \\`t2.micro\\`\n  - You can leave the Key pair as ‘None’. If you would like to ssh into the EC2 instance to troubleshoot or just to look around, you will need to first of all create a key pair. How you do this is beyond the scope of this tutorial but this is created when you create a new user.\n  - For Networking;\n    - Select the default VPC\n    - For subnet, you can select one or more subnet from the dropdown, for example \\`us-east-1a\\` and \\`us-east-1b\\`\n    - Select \\`enable\\` for Auto assign public IP\n   - Security group - Select default\n   - Container instance IAM role\n     - Select ***ecsInstanceRole*** This is the role the ECS container needs to make calls to the Amazon ECS API actions on your behalf.\n* Click on ***Create***\n\nAt this point, ECS will create all the resources required for your container to run using the image that you stored in your ECR repository. You can see your new cluster by clicking on the blue ‘View Cluster’ button. If you cluster created successfully, you should see the status marked as ‘Active’.\n\n**Step 3  - Task Definition.**  \nThe underlying resource needed to power our container is ready but we need to give ECS specific instructions on how to create our container.\n\n* On the ‘Clusters’ page, click on ‘Task Definitions’ on the left side menu.\n* Click on the blue ‘Create new Task Definition’ button\n* Click on the EC2 box and click on ‘Next step’\n* Enter the ‘Task definition name’ (For example FlaskAppTask’)\n* Task role: Select \\`ecsTaskExecutionRole\\`\n* Network mode: Leave the option on ‘default’\n* In the Task execution IAM role section\n  * Task execution role: select \\`ecsTaskExecutionRole\\`\n  * Task memory - enter 100MB\n  * Task CPU - enter  ‘1 vCPU’\n* Click on the ‘Add container’ button\n  * Enter Container name - (Example - FlaskApp)\n  * Image - Open another tab and go to ECS. Click on ‘Repositories’. Click on the new repository you created then copy the URI by clicking on the ‘Copy URI’ icon. Paste the image URI in the image field\n  *   Port mappings: Remember the command we used to run docker locally? We had this  \\`-p 5000:5000\\`  which means expose port 5000 in the container to port 5000 on the host. We will be doing the same here. Enter 5000 in both fields under ‘Port mappings’\n  * Click ‘create’\n* Scroll to the bottom of the page and click the blue ‘Create’ button\n\n**Step 4 - Run Task.**\n\nNow we have created everything needed to power up our container.\n\n* On the Task Definition page, click on the ‘Actions’ tab then click on ‘Run Task’.\n* Launch type: Click on ‘EC2’\n* Click on the blue ‘Run Task’ button. You should see a ‘Created tasks successfully’ notification. At the bottom of the screen, you’ll see the status of the task. Click on the link under the ‘Task column’. On the new page, you will see the status of the container(s) and the Status should show ‘**RUNNING**’.\n\n**Step 5 - Test application.** \n\nAWS ECS has told us everything is running and that there are no problems. The only way we will know our application is running for sure is to test.  First go to your EC2 page. Again, you can quickly navigate there by searching at the top. Once on the page, the first thing we want to do is make sure that we allow traffic on the ports we have specified for the host, which is 5000.  This can be done with the following steps;\n\n* Click on ‘Security Groups’ in the left menu\n* Select the checkbox of ‘default’ security group or the security group you selected when you created your Task Definition\n* At the bottom section of the page, click on the ‘Inbound rules’ tab\n* Click on the ‘Edit inbound rule\n* Click on the ‘Add rule’ button\n  *   Under type, Select ‘Custom TCP’\n  *   Protocol should be ‘TCP’\n  *   Port range - Enter 5000\n  *   Source - select \\`0.0.0.0/0\\`\n  *   Click on ‘Save rules’\n\nWe have now allowed the host of our container to listen on port 5000.  \n\nYou can now click on the ‘EC2 Dashboard’ on the left menu. Click on Instances. You should see the instance running named \\`ECS Instance - EC2ContainerService-FlaskAppCluster\\` where the last part of the name will be the name you gave the cluster.\n\nIn the Details tab on the page, you should see the public IPv4 address or Public IPv4 DNS. Copy any of this two and paste in your browser. Add port you allowed in the security group, in our case \\`:5000\\`\n\nIf you have been following this tutorial, you should see the following;\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/c_scale,w_auto:100,dpr_auto/v1666189122/uploads/public_url_1_dvfel0.png)\n\nIf you add the \\`/tasks\\` route, you should see the following;\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/c_scale,w_auto:100,dpr_auto/v1666189122/uploads/public_url_2_jsyl7d.png)\n\nCongratulations! You have deployed your first application to Amazon ECS!\n\n**Gotchas To Watch Out For**\n\nThere were a couple of gotchas I encountered which caused some head scratching so if you are reading this, I have probably saved you hours or even days of trying to figure our what the issue is.\n\n**Port issues** - You encounter a message when you trying to run your container locally that the port is already used. You will need to check applications running on your computer to determine if you are using a port that is already being used. I encountered this problem on my Mac and the frustrating part was that I had no application running on port 5000. It turns out that under ‘Sharing’ in System Preferences, ‘AirPlay Receiver ‘ is using port 5000. Unchecking this solved the problem.\n\n**Format error on ECS** - This was another one that took me a couple of days to figure out. You may not encounter this issue if you are building your images in Windows or on a Mac Intel based processor. I initially built the container image on my Macbook Air M1 using Docker’s Arm64 version. When I pushed the image to ECR and tried to run the image to create containers, the task failed. I had to dig into the logs to see the cryptic, ‘invalid format error’. \n\nThere are two options for overcoming this problem. The first is to run x86_64 Docker images on your ARM64 Mac machine, using emulation. The drawback of this approach is that emulation causes performance issues on the mac. The other option which I adopted was to build the image on an Intel based machine and that worked as expected.  Like i mentioned earlier, this will only impact anyone using Macs with M* processors.\n\nThis has been a fairly long article but I hope it helps anyone trying to get their feet wet with deployment of applications to ECS.","collection":"blog","data":{"title":"App Deployment To ECS For Beginners","description":"A guide on how to deploy a web application to Amazon Elastic Container Service (ECS) Container Service (ECS)","author":"Steve Popoola","pubDate":"2022-10-20T00:00:00.000Z","heroImage":{"src":"/_astro/ecs_containers_100.-BhDclkv.jpg","width":800,"height":530,"format":"jpg","fsPath":"/app/src/content/blog/images/ecs_containers_100.jpg"},"tags":["aws","ecs","docker","web development"],"heroImageUrl":"/_image?href=%2F_astro%2Fecs_containers_100.-BhDclkv.jpg&f=webp"}},{"id":"flutter-development-on-mac-m1.md","slug":"flutter-development-on-mac-m1","body":"I have been doing some flutter development on my Mac Intel for a while but not too long ago, I bought my Macbook Air M1 and tried to set up my Flutter environment.\n\nMy initial attempt was full of issues and I decided to document my process of fixing the issues and getting the environment up and running.\n\nThe first thing I did was to install flutter. There are two ways of doing this. The first option is to download the installation bundle which is a zip file. The other option is to clone directly from Flutter's Github repository.\n```sh\ngit clonehttps://github.com/flutter/flutter.git-b stable\n```\n\nI decided to download the zip file, unzipped it and added the path to my .zshrc file\n\n```sh\ncd ~/dev\n$ unzip ~/Downloads/flutter_macos_2.5.3-stable.zip\nexport PATH=\"$PATH:`pwd`/flutter/bin\"\n```\n\nThe next thing was to run `flutter doctor`. My first run highlighted missing android command line tools.\n```sh\n[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)\n✗ cmdline-tools component is missing \n✗ Android license status unknown. \nRun `flutter doctor --android-licenses` to accept the SDK licenses. \nSee https://flutter.dev/docs/get-started/install/macos#android-setup for more details.\n```\n\nThe easiest way to solve this problem is to install Android Studio. Once installed, open and go to SDK Manager. Select Android SDK on the left hand side\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/c_scale,w_auto:100,dpr_auto/v1637089706/uploads/android_sdk_dvt3bs.png)\n\nClick on Android SDK Command-line Tools (latest) and click on the checkbox to download and install it. One it is installed, if you run `flutter doctor` again, it will show \"Android license status unknown error\". To resolve this, run the following in the command line,\n\n```sh\nflutter doctor --android-licenses\n```\n\nWhen I got past this, I hit another issue. This time, it was Java. The line highlighted in flutter doctor was\n\n```sh\n✗ Unable to find bundled Java version.\n```\n\nI visited the Java website but apparently there was no ARM compatible version. After some research, I found some alternatives sources where I could obtain ARM compatible JDK. I did later find out that Java took care of M1 compatible Java in version 11 but at this time I wanted to install Java 8 so I visited this site and got it [https://www.azul.com/downloads/?os=macos&architecture=arm-64-bit&package=jdk](https://www.azul.com/downloads/?os=macos&architecture=arm-64-bit&package=jdk)\n\nOnce installed, set the ***JAVA_HOME*** path\n\n```sh\nsh export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-8.jdk/Contents/Home/jre\n```\n\nAt this point, it looked like everything was all good until I ran \n```sh\nflutter doctor` \n```\nagain and saw the following issues;\n\n```sh\nWarning: CocoaPods not installed. Skipping pod install.\n    CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.\n    Without CocoaPods, plugins will not work on iOS or macOS.\n    For more info, see https://flutter.dev/platform-plugins\n```\n\nThe suggested solution was to install cocoapods, no problem, so I ran,\n\n```sh\nsudo gem install cocoapods\n```\n\nThat triggered a whole lot of errors. After several researches again, it turned out the way to solve this was to install my own version of ruby instead of the using the system one. I therefore decided to install rbenv which would enable me install and use any version of ruby. Once installed, I ran ***sudo gem install cocoapods*** again and voila!\n\nThis time I ran ***flutter doctor*** again and everything showed okay on all steps! Phew! That was a journey and I hope it helps someone else embarking on the same route.","collection":"blog","data":{"title":"Flutter Development on Mac M1","description":"I have been doing some flutter development on my Mac Intel for a while but not too long ago, I bought my Macbook Air M1 and tried to set up my Flutter environment.","author":"Steve Popoola","pubDate":"2021-11-16T00:00:00.000Z","heroImage":{"src":"/_astro/flutter_mobile.Dec3sPYw.jpeg","width":1080,"height":780,"format":"jpg","fsPath":"/app/src/content/blog/images/flutter_mobile.jpeg"},"tags":["flutter","mobile development"],"heroImageUrl":"/_image?href=%2F_astro%2Fflutter_mobile.Dec3sPYw.jpeg&f=webp"}},{"id":"tailwind-typography-plugin.md","slug":"tailwind-typography-plugin","body":"\nWhen I first started writing articles for this blog, one of the first challenges I encountered was the display of code blocks in my articles. I tried a number of things and ended up writing the following CSS to handle the display;\n```css\n.article-content p {\n    margin-bottom: 15px;\n}\n\n.markdown {\n    & code {\n        @apply font-mono text-sm inline bg-black p-2 text-gray-200 px-1;\n    }\n    & pre code {\n        margin: 15px 15px;\n        @apply block bg-black p-4 rounded;\n    }\n}\n  ```\n    \n\nWhile the above works, I didn't really like it because I am using TailwindCSS, which is meant to rapidly build websites without leaving my HTML. In this case, I was forced to leave my HTML because out of the box, there was no utility class that would look into my HTML and style my articles and ensure my code blocks are rendered appropriately.\n\nA while ago I was chatting with my friend [@vivgui](https://twitter.com/vivgui), founder of [TailwindMade](tailwindmade.com) and she told me about the Tailwind Typography plugin which has a prose class that would nicely solve my problem. \n\nFirst thing I had to do was upgrade TailwindCSS from version 1.x to 2.x in my project. Then I installed the typography plugin\n```sh\nyarn add @tailwindcss/typography\n```\n\nIf you are using npm then you will install the plugin with\n```sh\nnpm install @tailwindcss/typography\n```\n\nOnce that is done, all you have to do is add the plugin into the plugin section of your tailwind.config.js file.\n```json\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('@tailwindcss/typography'),\n    // ...\n  ],\n}\n```\n\nWith that done,  all I had to do was add the `prose` class to my Article component. By the way, I use [Gridsome](https://gridsome.org/)  to develop my site and Forestry.io for my CMS which makes it possible for me to create my blog posts in Markdown and publish it by pushing to my GIT repository which automatically deploys to [Netlify](https://www.netlify.com/).\n\nThis was how I added the ***prose*** class to my Article component;\n```html\n<Layout>\n    <article class=\"prose lg:prose-xl mx-auto py-8\">\n      <div class=\"flex-1 bg-white\">\n        <div class=\"article-heading my-10\">\n          <h1\n            class=\"w-full text-center text-gray-600 text-xl md:text-4xl px-6 py-2\"\n          >{{ $page.article.title }}</h1>\n          <div class=\"flex justify-center text-gray-600 text-xs text-base md:text-lg\">\n            <span class=\"text-center\">Posted on {{ $page.article.date | formatDate }}</span>\n            <span class=\"ml-2\">\n              -\n              <ReadingTime :content=\"$page.article.content\" />\n            </span>\n          </div>\n        </div>\n        <div class=\"flex justify-center mb-8\">\n          <g-image :src=\"$page.article.hero_image\"></g-image>\n        </div>\n\n        <div class=\"mx-auto\">\n          <div\n            v-html=\"$page.article.content\"\n            class=\"article-content text-gray-700 text-base md:text-xl px-6 mb-5\"\n          ></div>\n        </div>\n      </div>\n    </article>\n  </Layout>\n</template>\n```\n\nJust adding the ***prose*** class solved the problem. It added typography styles to my Article HTML so I no longer needed the CSS I wrote previously which means I am now back to developing my website design without the need for me to leave my HTML. There are more customisations you can for your use case such as adding colour modifiers and responsive variants.\n\nYou can read more about the TailwindCSS Typography  plugin [here](https://github.com/tailwindlabs/tailwindcss-typography)","collection":"blog","data":{"title":"TailwindCSS Typography Plugin","description":"Explore the power of the TailwindCSS Typography Plugin in this blog post. Learn how to enhance your text styling effortlessly with this versatile plugin, and see examples of how it can improve the readability and aesthetics of your web content.","author":"Steve Popoola","pubDate":"2021-01-19T00:00:00.000Z","heroImage":{"src":"/_astro/tailwind_typography_1.CBkrbYqC.jpg","width":1000,"height":667,"format":"jpg","fsPath":"/app/src/content/blog/images/tailwind_typography_1.jpg"},"tags":["css","tailwindcss","web development"],"heroImageUrl":"/_image?href=%2F_astro%2Ftailwind_typography_1.CBkrbYqC.jpg&f=webp"}},{"id":"trying-out-laravel-sail.md","slug":"trying-out-laravel-sail","body":"A few days ago, Laravel Sail was released as a lightweight docker environment for a Laravel application. This comes in the form of a docker-compose file created with new Laravel applications (From Laravel 8) and is supported on MacOs, Linux and Windows.\n\nThe Laravel documentation is an excellent resource for learning how to use Sail but this article is my step by step experience of trying out Laravel Sail.\n\nI decided to create a new project to test this so I ran the command;\n```sh\nlaravel new sail_testing\n```\n\nI ran into my first error;\n```html\n    Server error: `GET http://cabinet.laravel.com/latest.zip` resulted in a `522 Origin Connection Time-out` response:\n    <html>\n    <head><title>522 Origin Connection Time-out</title></head>\n    <body bgcolor=\"white\">\n    <center><h1>522 Origin Conne (truncated...)\n```\n\nThis was because I was using an old version of the Laravel installer. I simply removed and re-installed the installer.\n\n```sh\ncomposer global remove laravel/installer\ncomposer global require laravel/installer\n```\n\nI was now able to proceed with creating the new Laravel application. The first thing I noticed that a docker-compose file was added into the project.  It was quite simple to understand. There were blocks for the services; Webserver, MySQL, Redis, Mailhog and optional ones like Selenium and Memcached.\n\nIf requiring Sail to be used in an existing application. You simply just have to install the composer dependency;\n\n```sh\ncomposer require laravel/sail --dev\n```\n\nI am not sure but it is possible the Sail will only work on Laravel application from version 8 since it requires, **illuminate/contracts v8** and **illuminate/support v8.0** but I might be wrong since for the purpose of this test I only tried it with a fresh Laravel 8 application.\n\nOnce installed, the next step is to publish Sail's _docker-composer.yml_ by running\n```sh\nphp artisan sail:install\n```\n\nNow, the moment we have been waiting for. Getting Sail up and running!\n\n```sh\n./vendor/bin/sail up\n```\n\nRunning the above command downloads all the images and creates all containers in the _docker-compose.yml_ file.\nYou can configure a bash alias to the sail command so you don't have to type _.**/vendor/bin/sail**_ up repeatedly.\n```sh \nalias sail='bash vendor/bin/sail\n```\n\n**Useful commands**\n```sh\nsail up     // start sail\nsail up -d` // start in \"detached\" mode\nsail down   // stop sail\n```\n\nWhen using Sail, some of the commands we run using Artisan, Composer and Npm will change slightly;\n\n```sh\nsail artisan run_command\n```\n\nYou can also run ***php*** commands while using Sail\n```sh\nsail php --version\nsail php index.php\n```\n\n**Composer**\nLaravel Sail container includes a Composer 2.x installation so new dependencies can be installed as follows;\n```sh\nsail composer require laravel/sanctum\n```\n\n**NPM**\nYou can run ***node*** and ***npm*** commands with Sail\n```sh\nsail node --version\nsail npm run prod\n```\n\n#### **Services**\n**MySQL** - Once your containers have been started, the MySQL instance will be available to your application and can be accessed using a MySQL client to connect on localhost port 3306. A volume is created to ensure that the your data is persisted even when you shut down your containers. The database will use the same name as what was configured in your ***env*** file.\n\n**Redis**: Like MySQL, a volume is also created for Redis to ensure that your redis data is persisted even when you shut down your containers. The Redis instance is configured using the ***REDIS_HOST*** configuration in your ***.env*** file.\n\nThere is a whole lot more you can do with Sail including running unit and feature tests, browser testing with Laravel Dusk and Previewing emails with Mailhog. Details on how to do this is clearly outlined in the Laravel documentation.\n\n#### **My Conclusions**\nSail was quite simple to install and work with. This will no doubt provide a low barrier of entry for developers who have been reluctant to switch to Docker for their  development environments.\n\nI have tried out several Docker packages and libraries for Laravel development but Sail feels a lot cleaner without the need to add unnecessary configuration files within my applications.\n\nAs soon as started my docker environment with Sail, I was able to load the home page of my application. I initially had an issue with port 80 but that was because I was running Laravel Valet which uses Nginx on port 80. Once that was stopped however and I restarted my containers, I was able to view my application home page, connect to MySQL and connect to Redis.\n\nFor more on Laravel Sail, visit the documentation [https://laravel.com/docs/8.x/sail](http://cabinet.laravel.com/latest.zip)","collection":"blog","data":{"title":"Trying Out Laravel Sail","description":"Trying Out Laravel Sail - Created Docker environments for Laravel applications.","author":"Steve Popoola","pubDate":"2020-12-12T00:00:00.000Z","heroImage":{"src":"/_astro/laravel_sail_image.Cyx6QXNI.jpeg","width":1080,"height":810,"format":"jpg","fsPath":"/app/src/content/blog/images/laravel_sail_image.jpeg"},"tags":["docker","laravel","web development"],"heroImageUrl":"/_image?href=%2F_astro%2Flaravel_sail_image.Cyx6QXNI.jpeg&f=webp"}},{"id":"backing-up-mysql.md","slug":"backing-up-mysql","body":"\nMost web applications require databases for storing data. If the data is normalised (Where one table is related to another through an Identifier) then most likely a Database Management System like Mysql, PostgresSQL or SQLite would be used. Access to data using these is by SQL. \n\nOne of the things that need to be seriously considered when managing a data is backing up your database.\n\nMy friend and Colleague in the Laravel UK Slack channel, Simon Bennet wrote a great article on The Ultimate Guide to mysqldump. It is very good learning resource for novices and good reference for those who are experienced. Visit the link here [https://snapshooter.com/learn/mysqldump-ultimate-guide](https://snapshooter.com/learn/mysqldump-ultimate-guide \"The Ultimate Guide to mysqldump\")","collection":"blog","data":{"title":"Backing Up MySQL","description":"Backing up your MySQL Databases.","author":"Steve Popoola","pubDate":"2020-07-07T00:00:00.000Z","heroImage":{"src":"/_astro/backing_up_mysql_001.DMD2V385.jpeg","width":1080,"height":810,"format":"jpg","fsPath":"/app/src/content/blog/images/backing_up_mysql_001.jpeg"},"tags":["databases","mysql","backups"],"heroImageUrl":"/_image?href=%2F_astro%2Fbacking_up_mysql_001.DMD2V385.jpeg&f=webp"}},{"id":"managing-instances-with-aws-scheduler.md","slug":"managing-instances-with-aws-scheduler","body":"AWS Instance Scheduler is a service used as a means to reduce the cost of services on AWS by ensuring that services are started up when in use and stopped when not in use. In my case, I needed to reduce of running our UAT and Demo EC2 instances at work. There are about 10 of those running round the clock and I reckon that if I was able to ensure that these instances are only running during work hours we could be saving about 60% costs on AWS.\n\nIt should be noted that there will be some negligible costs involved in setting AWS Instance scheduler. This is because other services will need to be created and run to set up the stack required for this purpose. The main work-horse is AWS Lambda which lets us run code without needing to provision a server. This code is what is executed to start/stop the required services. Lamda however cannot run itself, it needs to be triggered.\n\nThis is where CloudWatch comes in. CloudWatch triggers AWS Lamda which reads the CloudFormation state from DynamoDB and executes the required function on the instances and then updates CloudWatch so that the state can be read the next time the Lamda function runs. All this is deployed using what is called a CloudFormation stack. CloudFormation is an infrastructure as code provisioning tool which provides a common language to enable us model and provision AWS resources in our cloud environment.\n\nTo set up AWS instance scheduler, we follow the steps below;\n\n1. **Login to your AWS** console and search for CloudFormation\n2. **Click on Create Stack**. In Step 1, we either have a template ready, use a sample template or create a new template using the Designer. For the purpose of this exercise, we'll select 'Template is ready' and select 'Amazon S3 URL. In the Amazon S3 field we paste this link; [https://s3.amazonaws.com/solutions-reference/aws-instance-scheduler/latest/instance-scheduler.template](https://s3.amazonaws.com/solutions-reference/aws-instance-scheduler/latest/instance-scheduler.template \"https://s3.amazonaws.com/solutions-reference/aws-instance-scheduler/latest/instance-scheduler.template\")\n3. Click **Next** to the '**Specify Details**' page. Enter a name in the 'Stack name' field.\n   * Add a tag for the Instance Scheduler tag. In my case, I used 'Schedule'\n   * Services to schedule (This can be EC2, RDS or both')\n   * Scheduling enabled: **Yes**\n   * Regions: If you don't specify a region, it will take the region within which the stack is being created.\n\n* Default time zone: Select your time zone.\n* This account: You can schedule instances either in the account you created the CloudFormation stack in or in another account that you own.\n* Frequency: The frequency of running the Schedular - It is recommended to select as much time as possible if the number of instances is large to avoid conflicts. In my case, I selected 60.\n* Memory size: defaulted to 128MB.\n\nAll the other fields are optional however Started tags and Stopped tags are good for identifying started and stopped instances. I used the following values;\n```json\nStarted tags: SchedStart=\"Scheduler started\"\nStopped tags: SchedStop=\"Scheduler stopped\"\n```\n\n1. **Configure stack options** - These are optional configuration details you may require like adding tags you want to add to the resources in your stack. It is also recommended to create an IAM role that has permission to create, modify or delete resources in the stack. If a role is not chosen, then CloudFormation uses the permissions of the user creating the stack. 'Advanced options' are additional options like notifications, stack policy which can be applied in cases where you want to add some level of protection to the stack.\n2. **Review** - The last page shows a review of the CloudFormation stack to be created. One you are happy, check the box \"_I acknowledge that AWS CloudFormation might create IAM resources_.\" and click 'Create stack\"\n\nAt this point, the stack goes through the process of being created. Once this process is completed, it will have deployed Amazon CloudWatch, AWS Lamda and Amazon DynamoDB. We have a couple of configurations to set before our job is done.\n\nFrom the AWS Dashboard, search for and select DynamoDB. We need to set our InstanceSchedule Config table. When you click on Tables, you will see two tables. The one we need is the ConfigTable. It is named in the format <stack-name>ConfigTable. Click on this table and click on the 'Items' tab. You will find a couple of sample configs.\n\nFor the sake of this exercise, select any of the periods ('office-hours') Click on 'Actions' at the top of the table and click on 'Duplicate'. A pop-up will show up allowing you to make changes as required. Most importantly, you will need to change _begintime_, _description_ and _endtime_. Click 'save'.\n\nPick one of the schedules and duplicate that as well. Change the values as required but most importantly, ensure that the name must be unique. This is because it will be used to tag the resource that we want to schedule. Also important is the timezone. I made a mistake here by picking the wrong timezone which meant that my instances did not start and stop when I needed them to until I corrected this.\n\nFinally, you will need to tag the instances (EC2 or RDS) which you want to schedule. Go to the AWS Dashboard and search for EC2. If the instances you want to schedule are already running, then right click on the instance and select 'Instance Setting' then 'Add/Edit' tags.\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/c_scale,w_auto:100,dpr_auto/v1586445372/uploads/instance_tags_yat4h9.png)\n\nAdd the tag 'Schedule' which must be the same as the config that we set in DynamoDB. Optionally, you can add tags for the start and stopped state of the instances. Once the Lamda function executes, it will check DynamoDB for our Schedules and will use the tags to determine which instance should be started or stopped.\n\n![](https://res.cloudinary.com/https-stephenpopoola-uk/image/upload/c_scale,w_auto:100,dpr_auto/v1586445414/uploads/stopped_instance_fhpw2q.png)Once this is done, sit back and see your stack work for you.","collection":"blog","data":{"title":"Managing Instances With AWS Scheduler","description":"Saving AWS costs by managing Instances with AWS Scheduler.","author":"Steve Popoola","pubDate":"2020-04-04T00:00:00.000Z","heroImage":{"src":"/_astro/aws_scheduler_bfjxis.Cjub1YLx.png","width":822,"height":460,"format":"png","fsPath":"/app/src/content/blog/images/aws_scheduler_bfjxis.png"},"tags":["aws","cloud computing"],"heroImageUrl":"/_image?href=%2F_astro%2Faws_scheduler_bfjxis.Cjub1YLx.png&f=webp"}},{"id":"laravel-search-with-elasticsearch.md","slug":"laravel-search-with-elasticsearch","body":"In my current job, we had to parse a string from several thousand rows of data and extract a section of the field based on some criteria. We initially did this using full-text search in MySQL. It worked but the rate of accuracy was not what we expected, therefore we decided to look into another solution.\n\nI had used Elasticsearch in a previous role which was very much search based and I knew that we could get better results if we were to swap out the full text swap with Elasticsearch. I needed to refresh my knowledge of Elasticsearch and decided to create a demo of a Laravel application which is what we use for our codebase and implement a search feature with both MySQL and Elasticsearch. Come with me as I take you through the implementation.\n\nIn order to make the search realistic, I decided to make use of Books data which is contained in a json file. We will be loading this data in MySQL which will then be indexed in Elasticsearch using a model observer.\n\nIf you want to see this in action, you can clone the repository [https://github.com/stevepop/es-laravel](https://github.com/stevepop/es-laravel \"https://github.com/stevepop/es-laravel\") and follow the instructions in the README.\n\nIf you want to follow along, the first thing to do is create a new Laravel application;\n\n```sh \nlaravel new <your-project-name>\n```\n\nYou can copy the data file at [https://github.com/stevepop/es-laravel/blob/master/books.json](https://github.com/stevepop/es-laravel/blob/master/books.json \"https://github.com/stevepop/es-laravel/blob/master/books.json\") to the \"storage/app/data\" folder.\n\nThe next thing to do is creating and configuring our Database. For this example, I am using an SQLite database. You will need to ensure that you have Sqlite installed.\n\nCreate file for the database; \n```sh\ntouch database/database.sqlite\n```\n\nCopy the .env file and add the SQLite configuration to your .env file\n\n```sh \ncp .env.example .env\n\nDB_CONNECTION=sqlite\n```\n\nNow that we have our database set up, let's create a migration file;\n\n```sh\nphp artisan make:model Book -m\n```\n\nUpdate the **up()** method of the generated migration file in \"app/migrations\"\n\n```sql\nSchema::create('books', function (Blueprint $table) {\n\n$table->id();\n\n$table->string('title');\n$table->integer('isbn')->nullable();\n$table->integer('page_count')->default(0);\n$table->dateTime('published_date')->nullable();\n$table->text('short_description')->nullable();\n$table->longText('long_description')->nullable();\n$table->string('thumbnail_url')->nullable();\n$table->string('status');\n$table->json('authors');\n$table->json('categories');\n$table->timestamps(); });\n```\n\nRun the migration; \n```sh\nphp artisan migrate\n```\n\nNow that we have our database in place, we can now setup Elasticsearch. For the sake of this demo, I have included a `docker-compose.yml` file. We will be running a Docker instance of Elasticsearch. All the is needed is to execute the command;\n```sh\ndocker-compose up\n```\n\n\nYou need to ensure you have Docker installed before executing the above command. This will spin up an Elasticsearch container as well as Kibana which is a platform to enable us visualise and run queries directly on our Elasticsearch instance. Once the container is up and running, you should be able to visit [http://localhost:5601/app/kibana#/home](http://localhost:5601/app/kibana#/home) to view the Kibana dashboard.\n\nWe have Elasticsearch up and running but before we connect to it from our application, we need to install the Elasticsearch php client. We do this by requiring it with composer;\n\n```markdown\ncomposer require elasticsearch/elasticsearch\n```\n\nNow that we can use Elasticsearch within our application, our first test that it works is to load our data in the database. This is done using a command class;\n\n```php\n<?php\n\nnamespace App\\Console\\Commands;\n\nuse App\\Book;\nuse Illuminate\\Console\\Command;\nuse Illuminate\\Support\\Facades\\Storage;\n\nclass LoadBooksData extends Command\n{\n    /**\n     * The name and signature of the console command.\n     *\n     * @var string\n     */\n    protected $signature = 'books:load';\n\n    /**\n     * The console command description.\n     *\n     * @var string\n     */\n    protected $description = 'Load book data from json file';\n\n    /**\n     * Create a new command instance.\n     *\n     * @return void\n     */\n    public function __construct()\n    {\n        parent::__construct();\n    }\n\n    /**\n     * Execute the console command.\n     *\n     * @return mixed\n     */\n    public function handle()\n    {\n        $json = json_decode(Storage::get('data/books.json'), true);\n\n         $this->info('Loading books from json. This might take a while...');\n\n        foreach ($json as $item) {\n            $bookData = [\n                'title' => $item['title'],\n                'isbn' => $item['isbn'] ?? null,\n                'page_count' => $item['pageCount'],\n                'published_date' => isset($item['publishedDate']) ? $item['publishedDate']['$date'] : null,\n                'thumbnail_url' => $item['thumbnailUrl'] ?? null,\n                'short_description' => $item['shortDescription'] ?? null,\n                'long_description' => $item['longDescription'] ?? null,\n                'status' => $item['status'],\n                'authors' => $item['authors'],\n                'categories' => $item['categories'],\n            ];\n            Book::create( $bookData);\n\n             // PHPUnit-style feedback\n            $this->output->write('.');\n        }\n\n        $this->info(\"\\n Loading Complete!\");\n    }\n}\n```\n\nThe above command simply loads the data from the books.json loops through each data and creates a record in the database. Before we run this command however, we need to do a few more things. First, let us update out Book model. We are casting 'authors' and 'categories' as json ands 'published_date' as a Carbon date object.\n\n```php\n<?php\nnamespace App;\n\nuse App\\Search\\Searchable;\nuse Illuminate\\Database\\Eloquent\\Model;\n\nclass Book extends Model\n{\n    use Searchable;\n    \n    protected $guarded = ['created_at', 'updated_at'];\n\n        protected $casts = [\n        'authors' => 'json',\n        'categories' => 'json',\n    ];\n\n    protected $dates = ['published_date'];\n}\n```\n\nIn order to ensure that our data is indexed in Elasticsearch when created, we have to create a model observer to hook into the model events. You can place this in the `app\\Search` folder.\n\n```php\n<?php\n    \n    namespace App\\Search;\n    \n    use App\\Book;\n    use Elasticsearch\\Client;\n    \n    class ElasticsearchObserver\n    {\n        /** @var \\Elasticsearch\\Client */\n        private $elasticsearch;\n    \n        public function __construct(Client $elasticsearch)\n        {\n            $this->elasticsearch = $elasticsearch;\n        }\n    \n        public function saved($model)\n        {\n            $this->elasticsearch->index([\n                'index' => $model->getSearchIndex(),\n                'type' => $model->getSearchType(),\n                'id' => $model->getKey(),\n                'body' => $model->toSearchArray(),\n            ]);\n        }\n    \n        public function deleted($model)\n        {\n            $this->elasticsearch->delete([\n                'index' => $model->getSearchIndex(),\n                'type' => $model->getSearchType(),\n                'id' => $model->getKey(),\n            ]);\n        }\n    }\n```\n\nWhen a Book model is saved, the Observer's saved method is called and it executes the code that indexes that model in the database.\n\nWe need to create a trait that will be used within the Book model when the user makes a search. You can place this in the \"app\\Search\" folder.\n\n```php\n<?php\n    namespace App\\Search;\n    \n    trait Searchable\n    {\n         public static function bootSearchable()\n        {\n            //toggle the search feature flag on and off\n            if (config('services.search.enabled')) {\n                static::observe(ElasticsearchObserver::class);\n            }\n        }\n    \n        public function getSearchIndex()\n        {\n            return $this->getTable();\n        }\n    \n        public function getSearchType()\n        {\n            if (property_exists($this, 'useSearchType')) {\n                return $this->useSearchType;\n            }\n    \n            return $this->getTable();\n        }\n    \n        public function toSearchArray()\n        {\n            // By having a custom method that transforms the model\n            // to a searchable array allows us to customize the\n            // data that's going to be searchable per model.\n            return $this->toArray();\n        }\n    }\n```\n\nIn order to make the search flexible so that we can use the same interface to search with Eloquent or Elasticsearch, we will create two repositories. The first is the repository to search within the database and return rows where the search term is in the title or in the description.\n```php\n <?php\n    \n    namespace App\\Books;\n    use App\\Book;\n    use Illuminate\\Database\\Eloquent\\Collection;\n    use Illuminate\\Contracts\\Pagination\\LengthAwarePaginator;\n    \n    class EloquentRepository implements BooksRepository\n    {\n        public function search(string $query = ''): LengthAwarePaginator\n        {\n            return Book::query()\n                ->where('short_description', 'like', \"%{$query}%\")\n                ->orWhere('title', 'like', \"%{$query}%\")\n                ->paginate();\n        }\n    }\n```\n```php \n    \n    <?php\n    \n    namespace App\\Books;\n    \n    use App\\Book;\n    use Elasticsearch\\Client;\n    use Illuminate\\Contracts\\Pagination\\LengthAwarePaginator;\n    use Illuminate\\Support\\Arr;\n    use App\\Books\\BooksRepository;\n    use Illuminate\\Database\\Eloquent\\Collection;\n    \n    class ElasticsearchRepository implements BooksRepository\n    {\n         /** @var \\Elasticsearch\\Client */\n        private $elasticsearch;\n    \n        public function __construct(Client $elasticsearch)\n        {\n            $this->elasticsearch = $elasticsearch;\n        }\n    \n        public function search(string $query = ''): Collection\n        {\n            $items = $this->searchOnElasticsearch($query);\n    \n            return $this->buildCollection($items);\n        }\n    \n        private function searchOnElasticsearch(string $query = ''): array\n        {\n            $model = new Book;\n    \n            $items = $this->elasticsearch->search([\n                'index' => $model->getSearchIndex(),\n                'type' => $model->getSearchType(),\n                'body' => [\n                    'query' => [\n                        'multi_match' => [\n                            'fields' => ['title^5', 'short_description', 'categories'],\n                            'query' => $query,\n                        ],\n                    ],\n                ],\n            ]);\n    \n            return $items;\n        }\n    \n        private function buildCollection(array $items): Collection\n        {\n            $ids = Arr::pluck($items['hits']['hits'], '_id');\n    \n            return Book::findMany($ids)\n                ->sortBy(function ($book) use ($ids) {\n                    return array_search($book->getKey(), $ids);\n                });\n        }\n    }\n```\n\nThe \"search\" method above calls the **searchOnElasticsearch** method which contains a query to search in Elasticsearch and returns the results using the **buildCollection** private method.\n\nFinally we create the interface for the above implementations;\n\n```php\nnamespace App\\Books;\n\nuse Illuminate\\Contracts\\Pagination\\LengthAwarePaginator;\nuse Illuminate\\Database\\Eloquent\\Collection;\n\ninterface BooksRepository {\n    public function search (string $query = ''): Collection;\n}\n```\n\nFinally, we need to bind the interface to the concrete implementations. This is done in a Service provider. For the sake of this exercise, we will register this interface in the AppServiceProvider's **register** method.\n\n```php\n<?php\n\nnamespace App\\Providers;\n\nuse App\\Books\\ElasticsearchRepository;\nuse Elasticsearch\\Client;\nuse App\\Books\\BooksRepository;\nuse Elasticsearch\\ClientBuilder;\nuse App\\Books\\EloquentRepository;\nuse Illuminate\\Support\\ServiceProvider;\n\nclass AppServiceProvider extends ServiceProvider\n{\n    /**\n     * Register any application services.\n     *\n     * @return void\n     */\n    public function register()\n    {\n            $this->app->bind(BooksRepository::class, function($app) {\n            // Use Eloquent if elasticsearch is switched off\n            if (! config('services.search.enabled')) {\n                return new EloquentRepository();\n            }\n\n            return new ElasticsearchRepository (\n                $app->make(Client::class)\n            );\n            });\n\n            $this->bindSearchClient();\n    }\n\n    /**\n     * Bootstrap any application services.\n     *\n     * @return void\n     */\n    public function boot()\n    {\n        //\n    }\n\n    private function bindSearchClient()\n    {\n        $this->app->bind(Client::class, function ($app) {\n            return ClientBuilder::create()\n                ->setHosts($app['config']->get('services.search.hosts'))\n                ->build();\n        });\n    }\n}\n```\n\nIn order to make the search flexible, we add a configuration to enable/disable elasticsearch so that searches can still work even if  elasticsearch is not available or if it is switched off for debugging purposes.\n\nIn the **config/services.php** add the following;\n```php\n    'search' => [\n        'enabled' => env('ELASTICSEARCH_ENABLED', false),\n         'hosts' => explode(',', env('ELASTICSEARCH_HOSTS')),\n     ],\n```\n\nThe hosts value returns all the elasticsearch hosts if there are many nodes running elasticsearch which is usually the case in production environments.\n\nEnsure that you have the configuration values set in your `.env` file\n```sh\nELASTICSEARCH_ENABLED=true\nELASTICSEARCH_HOSTS=\"localhost:9200\"\n```\n\nTo display the data, I have created a template using tailwindCSS;\n\n```php\n@extends('layouts.master')\n\n\n@section('content')\n<div class=\"container mx-auto\">\n    <div class=\"rounded p-4\">\n        <div class=\"bg-white rounded p-6 mb-6 flex justify-between\">\n            <div class=\"p-2\">\n                <span class=\"font-bold text-lg\">Books</span> <small>({{ $books->total() }})</small>\n            </div>\n            <div class=\"p-4 w-64\">\n                <form action=\"{{ url('search') }}\" method=\"get\">\n                    <div class=\"form-group\">\n                        <input type=\"text\" name=\"q\" class=\"border p-2 w-full\" placeholder=\"Search...\"\n                            value=\"{{ request('q') }}\" />\n                    </div>\n                </form>\n            </div>\n        </div>\n\n        <div class=\"bg-white rounded p-6\">\n            <table class=\"table-auto\">\n                <thead>\n                    <tr>\n                        <th class=\"px-4 py-2\">Title</th>\n                        <th class=\"px-4 py-2\">ISBN</th>\n                        <th class=\"px-4 py-2\">Categories</th>\n                        <th class=\"px-4 py-2\">Published Date</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    @forelse ($books as $book)\n                    <tr>\n                        <td class=\"border px-4 py-2\">{{ $book->title }}</td>\n                        <td class=\"border px-4 py-2\">{{ $book->isbn }}</td>\n                        <td class=\"border px-4 py-2\">\n                            @foreach($book->categories as $category)\n                            <span\n                                class=\"inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2\">\n                                {{ $category }}\n                            </span>\n                            @endforeach\n                        </td>\n                        <td class=\"border px-4 py-2\">\n                            {{ $book->published_date ? $book->published_date->format('d/m/Y') : null }}\n                        </td>\n                    </tr>\n                    @empty\n                    <tr>\n                        <td>No books found</td>\n                    </tr>\n                    @endforelse\n                </tbody>\n            </table>\n\n            <div class=\"bg-white p-4 mt-6\">\n                {{ $books->links() }}\n            </div>\n        </div>\n    </div>\n</div>\n@stop\n```\nIn order for us to view and search the data, we need to create the routes and controllers;\n\n```php\nRoute::get('/', 'BooksController@index');\nRoute::get('/search', 'BooksController@search');\n\n<?php\n\nnamespace App\\Http\\Controllers;\n\nuse App\\Book;\nuse Illuminate\\Http\\Request;\nuse App\\Books\\BooksRepository;\nuse Illuminate\\Support\\Collection;\nuse Illuminate\\Pagination\\Paginator;\nuse Illuminate\\Pagination\\LengthAwarePaginator;\n\n\nclass BooksController extends Controller\n{\n    public function index()\n    {\n        $books = Book::paginate();\n\n        return view('books.index', compact('books'));\n    }\n\n    function search(BooksRepository $repository)\n    {\n        $results = $repository->search((string) request('q'));\n\n        $books = $this->paginate($results);\n\n        return view('books.index', [\n            'books' => $books\n        ]);\n    }\n\n        /**\n     * The attributes that are mass assignable.\n     *\n     * @var array\n     */\n    public function paginate($items, $perPage = 5, $page = null, $options = [])\n    {\n        $page = $page ?: (Paginator::resolveCurrentPage() ?: 1);\n        $items = $items instanceof Collection ? $items : Collection::make($items);\n        return new LengthAwarePaginator($items->forPage($page, $perPage), $items->count(), $perPage, $page, $options);\n    }\n}\n```\n\nNow we are ready for the magic! To load the books data, execute the command;\n\n```sh\nphp artisan books:load\n```\n\nThis command will read the Books.json file, insert the records in the database and for each record inserted, the **ElasticsearchObserver** will **index** the document.\n\nIf you go to the homepage you should see the list of books displayed. To ensure that the search works, enter a string in the search input at the top of the page and press enter. To test searching with Eloquent, set the **ELASTICSEARCH_ENABLED** to false and search again. This should still work as expected. You may not notice the difference in speed because of the small set of data but the power of Elasticsearch really kicks in when you have massive amounts of data with millions of rows.\n\nThis has been a long post but I hope it has given you some understanding of how to integrate Elasticsearch into your Laravel application.\n","collection":"blog","data":{"title":"Laravel Search With Elasticsearch","description":"Search implementation with Elasticsearch in a Laravel application.","author":"Steve Popoola","pubDate":"2020-04-03T00:00:00.000Z","heroImage":{"src":"/_astro/laravel-es-image.BjNfdr2w.avif","width":1050,"height":700,"format":"avif","fsPath":"/app/src/content/blog/images/laravel-es-image.avif"},"tags":["laravel","elastic","search"],"heroImageUrl":"/_image?href=%2F_astro%2Flaravel-es-image.BjNfdr2w.avif&f=webp"}},{"id":"my-journey-to-vue-js.md","slug":"my-journey-to-vue-js","body":"For many years I had hated JavaScript. Coming from a backend background first with Java, then PHP, I found JavaScript over the years difficult to deal with. As a result of this, I focused on backend logic while I let others deal with the frontend. A few years ago however, I began taking interest in a couple of JavaScript Frameworks that emerged.\n\nI held a couple of jobs where I had to learn a bit of jQuery but I really hated the fact that I had to install various plugins to do certain things just because I could not develop those functionality myself. There is actually nothing wrong in using plugins, it's just that over time, then tend to blow up your frontend code and that ends up slowing down your page speeds. This is mitigated by the rise of CDNs and non-cookie based online storage systems as well as caching.\n\nA couple of JavaScript Frameworks got my attention and I spent some time with them. These were Angular 1, Backbone.js and EmberJs. Of the three, I really liked Angular but the problem I had then was that when I started looking into it, Angular 2 was in the pipeline and the fact that Angular 2 was meant to be a re-write from the ground up discouraged me from going deep in my learning of Angular 2. It was during this interlude that I came across VueJs.\n\nMy first shock was that I was able to create a working component within a couple of minutes of reading the manual and within a couple of days, I could actually implement VueJs logic on existing pages of an application I was working on! This triggered in me the desire to learn more about JavaScript and go over some concepts that I didn't fully understand before like Promises and Callbacks. \n\nI started using VueJs since it was in beta and since then there has been no going back. When React was released, out of curiosity, I learnt the basics and even tried to build an application using React but VueJs has always been and is today my de-factor JavaScript Framework for any web application I have built.","collection":"blog","data":{"title":"My Journey To VueJs","description":"How VueJs became my favourite JavaScript Framework","author":"Steve Popoola","pubDate":"2020-01-07T00:00:00.000Z","heroImage":{"src":"/_astro/vue_image_003.wz9shhm6.avif","width":3270,"height":2180,"format":"avif","fsPath":"/app/src/content/blog/images/vue_image_003.avif"},"tags":["javascript","vuejs"],"heroImageUrl":"/_image?href=%2F_astro%2Fvue_image_003.wz9shhm6.avif&f=webp"}},{"id":"styling-web-pages-tailwindcss.md","slug":"styling-web-pages-tailwindcss","body":"For many years, I had been battling with Styling web pages using CSS. I could create a decent design\nbut when it came to adding those design components that really make a page come alive, I struggled. This was until I got introduced to TailwindCSS.\n\nI know that some of the purists out there reading this, would probably bare thair fangs and rage on how bad an ideas it is to have a lot of CSS added to HTML elements but for me, this was basically what I needed.\n\nTailwindCSS made it possible for me to know how to add styling to my elements without having to think too much. I had played around with a couple of Frameworks like Bootstrap and Bulma but there was always this constant fight to try and Tailor the components to look like what I had in mind. In most cases, it would mean creating a couple of overriding classes which I did not want to do and also adding some !important tags as well which to me indicates that something wasn't right.\n\nThe Tailwind CSS documentation is really good and full of examples. With Tailwind, I don't have to fight the framework. I can choose the default components or override it with my own preferences. I like the way I can actually talk through styling an element. Let us say i want a rounded button with green background and white text, space on the left and right of the text as well as top and bottom. I can talk through this process by writing the following;\n```html\n<button class=\"bg-green-800 text-white px-3 py-2 rounded\" type=\"submit\">\n  Submit\n</button>\n```\n\nThe above reads like this, \"Create a button with a green background, white text, 0.75em padding on the x axis and 0.5em on the white axis and make the button rounded\". See how readable that was?\n\nOkay so I know there will be some readers complaining about having too many classes in HTML. Tailwind give you an option to create your own components. Instead of writing the above, you can create your own component using the **apply** feature as follows;\n```css\n.green-btn {\n    @apply bg-green-800 text-white px-3 py-2 rounded\n}\n```\n\nThen within your html, you can just simple reference ***.green-btn*** like so;\n```html\n<button class=\"green-btn\" type=\"submit\">\n  Submit\n</button>\n```\n\n  \nThat's it! Same thing achieved. The only limitation to using ***@apply*** does not currently support utilities that have variants like \"sm:bg-red-800\" These will need to be applied separately.\n\nIn future articles I will share how I use TailwindCSS in my projects.","collection":"blog","data":{"title":"Finding My Design Mojo With TailwindCSS","description":"How TailwindCSS became my favourite CSS Framework","author":"Steve Popoola","pubDate":"2020-01-03T00:00:00.000Z","heroImage":{"src":"/_astro/tailwind_css_image_03.CtxSXUGm.avif","width":3271,"height":2179,"format":"avif","fsPath":"/app/src/content/blog/images/tailwind_css_image_03.avif"},"tags":["css","tailwindcss","web development"],"heroImageUrl":"/_image?href=%2F_astro%2Ftailwind_css_image_03.CtxSXUGm.avif&f=webp"}},{"id":"starting-out-with-laravel.md","slug":"starting-out-with-laravel","body":"I have been using PHP since it was in version 3. Since then, I have learnt and worked with a number of Frameworks like Zend, Symfony, CodeIgniter, Phalcon, Kohana, CakePHP as well as micro-frameworks like Silex, Slim and Lumen. In the last couple of years however, I have worked more with Symfony and Laravel.\n\nWhen deciding on a Framework, certain factors need to be considered and these are;\n\n* Robust Architecture\n* Database ORM Support\n* Authentication\n* Security\n* Performance and Caching\n* Good Documentation\n* Community and Support\n\nLaravel excels in all the above points, providing these as out-of-the-box components which can be used without writing more than a few lines of code. The documentation of the Frsmework is simple and detailed making it almost needless to write a book on it compared to other Frameworks.\n\nOne other thing that makes Laravel quite popular is its learning curve. It is quite easy with a bit of PHP knowledge to build a simple web application. This however has a flip side. I have seem a lot of Laravel code written by inexperience developers who do not have a deep understanding of the framework due to the fact that they do not have a solid grasp of PHP. I have even seen some CVs where Laravel is listed along programming languages that they person has skills in.\n\nMy advice for anyone venturing into developing an application with a Framework; Learn the language first and understand the basic concepts of the languages. When you choose a framework, familiarise yourself with the codebase. You won't understand everything but you will learn a lot about how it works and how to write efficient code leveraging on the power of the framework.","collection":"blog","data":{"title":"Starting Out With Laravel or Any PHP Framework","description":"How to start out with Laravel or any other PHP Framework in your next project","author":"Steve Popoola","pubDate":"2020-01-01T00:00:00.000Z","heroImage":{"src":"/_astro/laravel_framework_01.4LfBerv2.avif","width":3328,"height":4160,"format":"avif","fsPath":"/app/src/content/blog/images/laravel_framework_01.avif"},"tags":["php","laravel"],"heroImageUrl":"/_image?href=%2F_astro%2Flaravel_framework_01.4LfBerv2.avif&f=webp"}}]