diff --git a/src/src/components/header/links.ts b/src/src/components/header/links.ts
index 3ee1861..7fa3c41 100644
--- a/src/src/components/header/links.ts
+++ b/src/src/components/header/links.ts
@@ -7,8 +7,8 @@ interface HeaderLink {
export const Links: HeaderLink[] = [
{ id: 0, href: "/", label: "Home", color: "text-green" },
- { id: 1, href: "about", label: "About", color: "text-yellow" },
- { id: 2, href: "projects", label: "Projects", color: "text-blue" },
- { id: 3, href: "blog", label: "Blog", color: "text-purple" },
- { id: 4, href: "resume", label: "Resume", color: "text-aqua" }
+ { id: 1, href: "/about", label: "About", color: "text-yellow" },
+ { id: 2, href: "/projects", label: "Projects", color: "text-blue" },
+ { id: 3, href: "/blog", label: "Blog", color: "text-purple" },
+ { id: 4, href: "/resume", label: "Resume", color: "text-aqua" }
];
diff --git a/src/src/components/hero/index.tsx b/src/src/components/hero/index.tsx
index 5c2bf56..fa65843 100644
--- a/src/src/components/hero/index.tsx
+++ b/src/src/components/hero/index.tsx
@@ -1,6 +1,14 @@
import React from "react";
import Typewriter from "typewriter-effect";
+const html = (strings: TemplateStringsArray, ...values: any[]) => {
+ let result = strings[0];
+ for (let i = 0; i < values.length; i++) {
+ result += values[i] + strings[i + 1];
+ }
+ return result.replace(/\n\s*/g, "").replace(/\s+/g, " ").trim();
+};
+
interface TypewriterOptions {
autoStart: boolean;
loop: boolean;
@@ -17,22 +25,40 @@ interface TypewriterInstance {
}
export default function Hero() {
+ const SECTION_1 = html`
+
Hello, I'm
+
+
Timothy Pidashev
+ `;
+
+ const SECTION_2 = html`
+
I've been turning
+
+
coffee into
+ code
+
+
since 2018!
+ `;
+
+ const SECTION_3 = html`
+
Check out my
+
+
blog/
+ projects or
+
+
contact me below!
+ `;
+
const handleInit = (typewriter: TypewriterInstance): void => {
typewriter
- .typeString("
Hello, I'm
Timothy Pidashev")
- .pauseFor(2500)
+ .typeString(SECTION_1)
+ .pauseFor(2000)
.deleteAll()
- .start();
-
- typewriter
- .typeString("
I've been turning
coffee into code
since 2018!")
- .pauseFor(2500)
+ .typeString(SECTION_2)
+ .pauseFor(2000)
.deleteAll()
- .start();
-
- typewriter
- .typeString("
Check out my blog and shop
or contact me below!")
- .pauseFor(2500)
+ .typeString(SECTION_3)
+ .pauseFor(2000)
.deleteAll()
.start();
};
@@ -42,21 +68,17 @@ export default function Hero() {
loop: true,
delay: 50,
deleteSpeed: 800,
- cursor: ''
+ cursor: '|'
};
return (
- <>
-
-
+
);
-};
+}
diff --git a/src/src/content/blog/generics-with-typescript.mdx b/src/src/content/blog/generics-with-typescript.mdx
new file mode 100644
index 0000000..aea8485
--- /dev/null
+++ b/src/src/content/blog/generics-with-typescript.mdx
@@ -0,0 +1,140 @@
+---
+title: Generics with TypeScript
+description: A quick introduction to generics with TypeScript
+author: Timothy Pidashev
+tags: [typescript]
+date: December 25, 2021
+---
+
+In this quick post we'll cover what are generics and how to use them with TypeScript. It answers a question I got from a friend, and I thought it could also be useful for others. We'll go through the following points:
+
+- What are generics
+- Using generic types
+- Generics constraints
+- Generics with functions
+
+If you're familiar with the concept of code reuse, well it is just that. We can use generics to create reusable patterns for types. It results in flexible types that work with different variations, and also fewer types to maintain as you avoid duplication.
+
+Code reuse is an important part of building flexible components/functions that serve complex and large systems. Nevertheless, abstraction is hard to get right in general and could cause inflexibility in some cases.
+
+## What are generics
+
+You can think of generics as arguments to your types. When a type with generics is used, those generics are passed to it. As we mentioned above, this will allow us to reuse the common patterns of the type declarations.
+
+Many functions that you're already using could have optional generic types. For example the array methods like `Array.map()` and `Array.reduc()` accept a generic for elements type:
+
+```ts
+const numbers = [1, 2, 3]
+numbers.map((n) => n)
+numbers.map
((n) => n) // with a generic type
+```
+
+You probably also came across generics while fixing Typescript type errors, without knowing what's going on. We've all been there. Once you learn about generics, you'll see them used everywhere, in the web APIs and third-party libraries.
+
+Hope that by the end of this post it’ll be more clear to you.
+
+## Generic types
+
+We can start by building our first type with generics. Let's say you have two functions `getUser` and `getProduct` that return some data for a user and a product:
+
+```ts
+type User = {
+ email: string
+}
+
+type Product = {
+ id: string
+}
+
+type UserResponse = {
+ data: User
+}
+
+type ProductResponse = {
+ data: Product
+}
+
+const user: UserResponse = getUser(id)
+const product: ProductResponse = getProduct(id)
+```
+
+You'll notice that the `UserResponse` and `ProductResponse` are kind of the same type declaration, both have `data` key but with different types. You can expect that if a new type is added it will also need to have its own `YetAnotherResponse` type which will result in duplicating same response type over and over again. And in the case you want to make a change across `...Responses` types, good luck with that.
+
+We can abstract this common pattern, so our `Response` will be a generic type and depending on the `Data` type passed, it will give the corresponding `Response` type.
+
+```ts
+type User = {
+ email: string
+}
+
+type Product = {
+ id: string
+}
+
+type GenericResponse = {
+ data: Data
+}
+
+const user: GenericResponse = getUser(id)
+const product: GenericResponse = getProduct(id)
+```
+
+## Generics constraints
+
+You might notice that so far the generic type accepts any type. That could be what you need, but sometimes we would want to limit or add constraints to a certain type for the generic type passed.
+
+For a simple example, we can have an `Input` type that has a `Value` generic type. If we want to constrain the `Value` generic type possibilities to be only a `string` or a `number` type, we can specify that by adding an `extends` keyword after the generic name, then the specific constraints type:
+
+```ts
+type Input = Value
+
+const input: Input = 'text' // works
+const input: Input = 123456 // works
+const input: Input