DEV Community: Andrew Savetchuk

How to Redesign Your Github Page

Andrew Savetchuk — Wed, 15 Mar 2023 05:19:31 +0000

I haven't updated my GitHub page for a while and decided to give it a new look. It turned out to be very simple, and it's good if you want your profile to stand out from the millions of others. Also, sometimes recruiters and HR professionals can find you on GitHub and contact you, as has happened to me several times before.

So I put in a little effort and in just one day I went from this:

To this:

Most of the time was spent on editing the text and skills. Click here to check out my GitHub profile or keep reading and edit yours.

Left Column

With the left column, everything is simple. Click on the "Edit profile" button and fill in all the fields. Keep in mind that GitHub often adds new features, so it's worth checking back from time to time to see if they've added anything to this column.

If you want to customize the left column even more, you should check out GitHub Achievements. Most of them aren't easy to unlock, but getting them is a good way to prove your skill level.

Main Area

This is where things get more interesting. In addition to the pinned repositories and gists, you can create an entire page with information about yourself. To do so, just create a repository and name it the same as your GitHub username.

For example, my GitHub username is AndrewSavetchuk, so my GitHub repository for my profile page is also named AndrewSavetchuk. You are welcome to take a look or use some of my code to make changes to your profile.

In the newly created repository, you will need to edit the README.md file to make changes to your page. There you can use markdown as well as HTML.

I decided to add some text about me, a list of languages and technologies, the latest blog posts, social links and one widget that shows my GitHub contributions.

If you need more inspiration, I recommend you visit this website - https://zzetao.github.io/awesome-github-profile/. It's a collection of well-designed GitHub pages that I often use to see what widgets are used by others.

You may also like the images I used for skills and social links, you can find them here: https://github.com/alexandresanlim/Badges4-README.md-Profile

As you can see, redesigning GitHub's page is not a challenging task and now that you have learned how to do it, why not put your newfound knowledge into action? Try out the ideas discussed in this article and see how they work for you.

I hope you found this information helpful, stay tuned for more content! I also post on Twitter and Mastodon if you want more content on web development and other technologies in your feed :)

Overview of MVC Architectural Pattern

Andrew Savetchuk — Fri, 03 Mar 2023 01:48:11 +0000

MVC stands for Model-View-Controller and is a software architecture pattern commonly used to develop software applications. Although originally designed for desktop computing, MVC has been widely adopted as a design for World Wide Web applications in major programming languages.

The Model-View-Controller pattern was originally created in the late 1970s by Trygve Reenskaug, a Norwegian computer scientist, while he was working at Xerox PARC (Palo Alto Research Center). The MVC pattern was intended to help separate the concerns of the user interface design from the underlying application logic, making it easier to develop, test and maintain software.

Since then, the MVC pattern has become a widely used design pattern in software development and has been applied to many different types of applications and platforms, including web development, desktop applications, mobile apps, and more. Although there are several implementations of MVC, the most important point of the pattern remains the same - the division of responsibility.

There are other patterns similar to MVC, such as MVP (Model–View–Presenter) or MVVM (Model-View-ViewModel), but these are beyond the scope of this article. In this article, we will focus on a traditional MVC architecture for web applications.

If you have worked with frameworks like Laravel, Ruby on Rails, or Flask, you may already be familiar with the MVC architecture. It divides the program into three interrelated components:

Model
View
Controller

Model

The Model often represents a table in an application's database and is responsible for reading and writing data, as well as persisting the application state.

In MVC, the Model is designed to be independent of the View and the Controller. It can be tested and developed separately from the other parts of the application.

View

The View is responsible for displaying data to users and handling user interaction. In the traditional interpretation of the MVC pattern, the View should not communicate directly with the Model. The Controller should update the View after receiving information from the Model about any changes to the data.

However, in practice, direct access to the Model is not uncommon, for example in small or simple applications. While this approach can simplify development in some cases, it can also make code more difficult to maintain and test over time, as changes to the Model can break views that rely on it. It also violates the principle of separation of concerns, which can make the code less modular.

Controller

The Model and the View are connected together through controllers. The Controller is responsible for receiving and processing user input, manipulating the Model (fetching/creating/updating/deleting data), and updating the View (returning the appropriate response to be rendered).

Visual Representation of MVC for a Web App

Below is a diagram of one possible take on the MVC pattern for a web application.

Let's take a closer look at what is happening here:

A user enters a URL in a browser and sends a request to a web application to open a specific page, in our case https://website.com/pages. Similarly, a user can send other types of requests, for example, a POST request from a web page to create a new record in the database.
In order to know which page/response to show the user based on their request, the web application has a list of routes. Those are, essentially, URL patterns associated with different pages which the application tries to match with the requested URL. Routes are associated with controllers, or rather with a specific function inside the controller known as a controller action. If the application finds a matching route (/pages in our case), it invokes the route-related controller action. If the route is not found, the application returns a 404 error.
With help of the routes, the PagesController action is called and that controller receives the user's request. PagesController then goes to PageModel to retrieve the necessary data, in our case, a list of pages. In other cases, the Controller may ask the Model to create a new record or modify an existing one based on the user's request.
As discussed previously, the Model often represents a table in an application's database, in our case, PageModel is connected with the pages database table.
The Model makes a request to read or write data from the database. The database executes the specified command, in our case, it is fetching all pages from the pages table and returns the result (data) to PageModel.
PageModel returns the pages data to PagesController.
The Controller passes the data received from the Model to the View. Finally, the View renders the requested page using data received from the Controller. The View is the last page a user sees in their browser.

The end, I hope this information was helpful, stay tuned for more content :)

Source

The Difference Between Types (Type Aliases) And Interfaces in TypeScript

Andrew Savetchuk — Wed, 22 Feb 2023 05:28:37 +0000

Today, more and more people and companies are using TypeScript. It is among the top 10 programming languages in the PYPL index. And this is not surprising, since TypeScript allows you to catch many errors at compile time, not at runtime, that is before they are released to production.

Top 10 programming languages according to PYPL Index as of February 2023.

Some of you who decide to try TypeScript might get confused with type aliases and interfaces because they are both similar and used to define the shape and structure of values in a statically typed way. This means that it is possible to describe the same object using a type alias or an interface:

// Option #1: using a type alias
type Person = {
  firstName: string;
  lastName: string;
  age: number;
};

// Option #2: using an interface
interface Person {
  firstName: string;
  lastName: string,
  age: number;
};

You might be asking yourself why we have two options for describing the Person object instead of one. And are there any differences or specific use cases between type aliases and interfaces? Yes, and you will find out about them in a moment.

Before we begin, I should mention that the correct term for a type is type alias, but for simplicity, I will use those two terms interchangeably.

Difference #1: Objects and Functions

Both types and interfaces can be used to describe the shape of an object or a function signature. However, the syntax is different. A type is defined using the type keyword, followed by the name, an equals sign and the type definition:

type SampleObject = {
  a: string;
  b: string;
};

An interface is defined using the interface keyword, followed by the name and the interface definition in curly braces:

interface SampleObject {
  a: string;
  b: string;
};

As you can see, there is not much difference in syntax between the two examples. However, when we want to define a function signature, the difference becomes more noticeable:

// Using the "type" keyword
type SampleFunction = (param1: string, param2: number) => boolean;

// Using the "interface" keyword
interface SampleFunction {
  (param1: string, param2: number): boolean;
}

In practice, either approach can be used to define a function in TypeScript, and the choice between them often comes down to personal preference or project standards.

Difference #2: Other Types

Unlike an interface, the type alias can be used to create named types for all other types including:

primitives
unions (union types)
tuples
mapped types

Primitives

Just in case, I will remind you that there are six primitive types in JavaScript and TypeScript: boolean, number, string, null, undefined, and symbol. Here is an example of how to represent primitives in TypeScript using the type keyword:

type Name = string;
type Age = number;
type IsStudent = boolean;

With interfaces, you cannot directly define a named type for a primitive type.

Unions

A variable with a union type can hold a value of any of the constituent types. Union types can be formed by combining two or more other types, separated by a vertical bar (|).

// Example #1: union type that allows a variable to hold 
// one of the three specified string literal values.
type SampleType1 = 'Coffee' | 'Tea' | 'Water';

// Example #2: union type that allows a variable to hold 
// a value that is either a string or a number.
type SampleType2 = string | number;

// Example #3: union type that allows a variable to hold
// any of the values that are allowed by SampleType1 or SampleType2
type SampleType = SampleType1 | SampleType2;

Same as with primitives, you cannot directly define a union type using the interface keyword, however, it is possible to have a union type as an object property:

interface SampleObject {
  myProperty: string | number;
}

There are some limitations when using union types that you should be aware of:

An interface cannot extend a union type:

type SampleUnionType = string | number;

// The code below will not work
interface extends SampleUnionType { ... }

A class cannot implement a union type:

type SampleUnionType = string | number;

// The code below will not work
class SampleClass implements SampleUnionType { ... }

A class can implement an interface or type alias, both in the same way. However, it can not implement a type alias that names a union type.

Tuples

A tuple is a type that allows you to specify a fixed-length array of values where each element has a specific data type. Here is an example of how to create a type for an array with only two elements:

type PersonTuple = [string, number];

const person: PersonTuple = ["John Doe", 25];

Even though this can be achieved using interfaces as shown below, you will lose access to all of the array methods. If you try to call person.length on the variable created from the interface, you will get the following error: Property 'length' does not exist on type 'PersonTuple'.

You will have to manually add those methods (length, push, concat, etc.) to the interface as shown below. However, this is not something you want to do. If you need a tuple, consider using a type alias.

// How to mimic array methods
interface PersonTuple
{
    0: string;
    1: number;
    length: 2;
}

const person: PersonTuple = ["John Doe", 25];

console.log(person.length); // This will now work

Mapped Types

Mapped types allow you to transform an existing type into a new type by applying a mapping operation to each property of the original type.

type NewType = {
  [Property in OldType]: MappingOperation;
}

Here, OldType is the original type that you want to transform, and Property represents each property in OldType. MappingOperation is a TypeScript type operator that defines how each property in OldType will be transformed.

In the example below we create a new type B, which has all the properties of A, but with each property made optional.

type B = {
  [Property in keyof A]?: A[Property];
}

TypeScript does not currently support typing mapped types with interfaces.

Difference #3: Declaration Merging

If you have two interfaces that you define with the same name in the same scope, they will be merged. Consider this example:

// Declaring SampleType interface for the 1st time
interface SampleType {
  a: number;
  b: number;
};

// Declaring SampleType interface for the 2nd time
interface SampleType {
  c: number;
  d: number;
};

// The second interface declaration extends the first one by adding
// two new properties. Now SampleType has four properties: a, b, c, d
const sampleType: SampleType = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
};

We cannot do the same with types. This is important to consider if you are the author of a library and want your users to be able to extend its functionality by merging interfaces. It will allow them to combine their own type declarations with those provided by the library, effectively "extending" or "augmenting" the library's API.

Difference #4: Extention

Interfaces can extend other interfaces using the extends keyword which allows for greater flexibility and modularity:

interface Named {
  name: string;
}

interface Ageable {
  age: number;
}

interface Person extends Named, Ageable {
  sayHello(): void;
}

Types can also be extended using an intersection type. An intersection type combines multiple types into one. Consider this example:

// Example #1
type A = { a: number };
type B = { b: number };
type C = A & B;

const c: C = { a: 10, b: 20 };

// Example #2
type A = { a: number };
type B = A & { b: number };

const b: B = { a: 10, b: 20 };

As you can see, the & operator is used to create a new type by combining multiple existing types. The new type has all properties of the existing types.

We can also mix them together as shown below. Interfaces and type aliases are not mutually exclusive. An interface can extend a type alias and vice versa.

Interface extends another interface:

interface A { sampleProperty: number; }
interface B extends A { sampleProperty: number; }

Interface extends a type alias:

type A = { sampleProperty: number; }
interface B extends A { sampleProperty: number; }

Type alias extends another type alias:

type A = { sampleProperty: number; };
type B = A & { sampleProperty: number; };

Type alias extends interface:

interface A { sampleProperty: number; }
type B = A & { sampleProperty: number; };

There are some limitations to what can be extended with interfaces. For example, primitive types, union types, classes, and enums, cannot be extended with interfaces.

What Should I Use?

In general, it is recommended to use interfaces for defining object shapes, and types for defining other types of values. However, it is up to you and your team to decide which option to use as long as you are consistent.

For example, every object should be typed as an interface and everything else as a type. Or you can use interfaces or types for everything, but not both for values of the same type (e.g. types and interfaces for objects). Communication with your team and consistency are crucial for quality code.

Here is a good cheat sheet that I often refer to, however, it may differ for everyone:

When to use type:

Use type when defining primitives
Use type when defining unions
Use type when defining tuples
Use type when defining functions
Use type when defining mapped types

When to use interface:

Use interface for all object types where using type is not required
Use interface when you want to take advantage of declaration merging

Keep an Eye on the Changelog

The limitations and differences described in this article are current as of February 2023. However, with new versions of TypeScript, they can change. It is important to keep an eye on the release notes to stay informed about new changes and features.

The end, I hope this information was helpful, stay tuned for more content :)

Source

Advanced Overview of String Conversion in JavaScript

Andrew Savetchuk — Mon, 20 Feb 2023 04:32:53 +0000

When I started working with JavaScript many years ago, I learned that to convert a value to a string, I could use the following method: value.toString().

This method worked well and was enough for me to complete all the tasks at that time. However, as I progressed and started collaborating with other developers, I discovered more ways to convert a value to a string. Here is the full list to be exact:

value.toString()
value + '' or `${value}`
String(value)
JSON.stringify()

Back then, I was surprised that all four of these ways work slightly differently, and I think experienced developers should be aware of that. That is why we will dive into the differences between all options so you can choose the one that best suits your current needs.

Option #1: value.toString()

value.toString() is an explicit conversion to a string because you are explicitly calling a method to perform the conversion. This option will work only if the value is an object that has a toString() method. Otherwise, it will result in a TypeError. Here are some examples to illustrate the difference:

// The variables below are objects that have toString() method
// Primitive data types such as number and boolean are also objects

const a = 50;
const b = true;
const c = [1, 2, 3];
const d = { name: "Andrew" };

console.log(a.toString()); // => "50"
console.log(b.toString()); // => "true"
console.log(c.toString()); // => "1, 2, 3"
console.log(d.toString()); // => "[object Object]"

// The variables below are not objects and do not have toString()
// method. Calling .toString() on them will result in TypeError

const e = null;
const f = undefined;

console.log(e.toString()); 
// TypeError: Cannot read properties of null (reading 'toString')

console.log(f.toString()); 
// TypeError: Cannot read properties of undefined (reading 'toString')

Good news: all objects in JavaScript such as Number, Array, and Function has the toString() method implemented and it is used when an object needs to be displayed as text (like in HTML), or when an object needs to be used as a string.

The important thing to remember here is that when we call value.toString() on null or undefined, we get a TypeError. This is because those values are not objects and they do not have a toString() method.

Option #2: String(value)

String(value) is another explicit way to convert a value to a string using the String constructor. However, it works a bit differently than value.toString(). When you call String(value) on null or undefined, it will return a string with "null" or "undefined" respectively. And this is the most important difference to remember.

const a = 50;
const b = true;
const c = [1, 2, 3];
const d = { name: "Andrew" };

console.log(String(a)); // => "50"
console.log(String(b)); // => "true"
console.log(String(c)); // => "1, 2, 3"
console.log(String(d)); // => "[object Object]"

// Note that we do not get a TypeError 
// when calling String() on null or undefined

console.log(String(null));      // => "null"
console.log(String(undefined)); // => "undefined'

One important thing to note: since String is a constructor, it is possible to call it with the new keyword - new String(value). You should rarely use it this way.

When String is called as a function, it coerces the parameter to a string primitive. However, when String is called as a constructor (with new), it creates a String object, which is not a primitive. This produces different results:

const a = new String("Hello from 2023!");
const b = String("Hello from 2023!");

console.log(a); // => String {"Hello, 2023!"}
console.log(b); // => "Hello, 2023!"

console.log(a === 'Hello from 2023!'); // => false
console.log(b === 'Hello from 2023!'); // => true

console.log(a instanceof String); // => true
console.log(b instanceof String); // => false

console.log(typeof a); // => "object"
console.log(typeof b); // => "string"

Option #3: value + "" or `${value}`

When you concatenate a string with any other value, JavaScript will automatically convert the other value to a string. This is an implicit way to convert a value to a string because the + operator is not specifically designed for string conversion. Instead, it is a general-purpose operator that can be used for addition or string concatenation, depending on the types of the operands.

Good news: This option works pretty much the same as String(value), meaning when you try to convert null or undefined to string, it will not result in TypeError:

const a = null;
const b = undefined;

console.log(a + ""); // => "null"
console.log(`${a}`); // => "null"

console.log(b + ""); // => "undefined"
console.log(`${b}`); // => "undefined"

However, I am not a big fan of using this method because it involves implicit string conversion and it can be difficult for other developers unfamiliar with JavaScript to understand how the code works at the first glance.

Whenever possible, I prefer to use String(value) or JSON.stringify(value) (comes next in the article), which are explicit conversions that do not throw a TypeError when calling on null or undefined.

Option #4: JSON.stringify(value)

This method is particularly useful for converting objects and arrays to JSON strings because it can handle nested objects and arrays. Remember what we got when we called value.toString() or String(value) on array or objects?

const a = [1, 2, 3];
const b = { name: "Andrew" };

console.log(a.toString()); // => "1,2,3"
console.log(String(a)); // => "1,2,3"

console.log(b.toString()); // => "[object Object]"
console.log(String(b)); // => "[object Object]"

This is not the case with JSON.stringify(), consider this example:

const a = [1, 2, 3];
const b = { name: "Andrew" };

console.log(JSON.stringify(a)); // => "[1,2,3]"
console.log(JSON.stringify(b)); // => '{"name":"Andrew"}'

As you can see, when we call JSON.stringify() on arrays, we get a valid JSON array as a string, and when we call JSON.stringify() on objects, we get a valid JSON object as a string. This also works when we have nested arrays or objects:

const a = [ ['a', 'b'], 5 ];
const b = { name: "Andrew", skills: [ "JavaScript", "TypeScript" ] };

console.log(JSON.stringify(a)); // => '[["a","b"],5]'
console.log(JSON.stringify(b)); // => '{"name":"Andrew","skills":["JavaScript","TypeScript"]}'

Calling JSON.stringify() on null or undefined works the same as with String():

console.log(JSON.stringify(null)); // => "null"
console.log(JSON.stringify(undefined)); // => "undefined"

JSON.stringify() is a more complex method than the previous ones, and in addition to the value to be converted to a string, it also takes two optional parameters: placeholder and space. Refer to the MDN Docs if you want to learn more.

Converting Dates to String

When we try to convert JavaScript dates to a string, the first three options work the same, while JSON.stringify() gives a different result. Consider this example:

const date = new Date(2023, 0, 1, 10, 0, 0);

console.log(String(date)); 
// => "Sun Jan 01 2023 10:00:00 GMT-0500 (Eastern Standard Time)"

console.log(date.toString()); 
// => "Sun Jan 01 2023 10:00:00 GMT-0500 (Eastern Standard Time)"

console.log(date + ""); 
// => "Sun Jan 01 2023 10:00:00 GMT-0500 (Eastern Standard Time)"

console.log(JSON.stringify(date)); 
// => '"2023-01-01T15:00:00.000Z"'

In this case, JSON.stringify() returns the date in ISO simplified extended format (ISO 8601). This is because the date object we pass to JSON.stringify() method implements the toJSON() method which returns a string (the same as date.toISOString()).

Always Consider Performance

Now, you may be tempted to use JSON.stringify() all the time as it offers the most complete conversion. However, you should know that String() is likely to be faster than JSON.stringify() because it is a simpler operation that does not involve parsing or formatting the input value as a JSON string.

String() simply converts the input value to a string using a simple set of rules, as we discussed earlier. This operation is generally fast and efficient, especially for primitive values.

On the other hand, JSON.stringify() is a more complex operation that involves parsing the input value and generating a JSON string that represents the object in a standardized format. Depending on the size and complexity of the input value, this operation can be relatively slow and resource intensive.

Even though the performance difference may not be significant, I strongly recommend choosing the right method wisely: if you do not need a JSON string in a standardized format, use String(value) or value.toString(), otherwise, use JSON. stringify(value).

The end, I hope this information was helpful, stay tuned for more content :)

Source

The Difference Between Docker Images and Docker Containers

Andrew Savetchuk — Sat, 18 Feb 2023 03:58:44 +0000

If you are new to learning and working with Docker, you might be wondering how Docker images differ from Docker containers. Without further ado, let's dive into it.

Both Images and Containers are two distinct concepts in the Docker ecosystem and we need them both in order to work with Docker.

Docker Containers

Docker containers are small packages that contain our application and the environment required to run it (system tools, libraries, settings, etc). We can think of containers as running/executable units of software, the units we run locally, on servers and cloud providers in order to start our application.

Docker Images

Docker images are read-only templates of Docker containers. In order to create a Docker Container, we need a template or blueprint which is a Docker Image. Therefore, containers are dependent on images and use them to construct a run-time environment and run an application.

Docker images are typically built using a Dockerfile, which is a script that specifies the instructions for building the image. Docker images are stored in a registry and can be shared and reused by other users.

We can run multiple containers from the same image as shown below.

It is also worth mentioning that we can create Docker images based on other Docker images and this is often referred to as "layering" Docker images. The newly created Docker image inherits all the files and settings from the parent image, and we can add new files, dependencies, and configurations as needed.

Summary

A Docker image is a read-only template or snapshot of a Docker container.
A Docker container is a runnable instance of a Docker image.
Images contain applications code, meanwhile, containers run it.
We can use one image to create multiple containers on different servers.

I hope this information was helpful, stay tuned for more content :)

How to Add TypeScript to Existing Next.js Project

Andrew Savetchuk — Thu, 16 Feb 2023 17:41:28 +0000

It is becoming increasingly common to use TypeScript with JavaScript frameworks such as React, Vue or Express. I have my personal website built on Next.js which is a framework for building React applications with nice features such as server-side rendering, automatic code splitting, and optimized performance. One of my 2023 resolutions was to work more with TypeScript, so I decided to add it to my current website and document the whole process.

Note: It is possible to add TypeScript during the initialization phase of the project, but this article is intended for those who already have Next.js projects and want to add TypeScript to them.

To Add Typescript to an Existing Next.js Project, You Can Follow These Steps:

Step 1 of 7

Install the necessary dependencies by running the following command in your project's root directory:

npm install -D typescript @types/react @types/react-dom @types/node

This will install the TypeScript compiler and the necessary type definitions for React and Node.js.

Step 2 of 7

Rename the existing jsconfig.json to tsconfig.json, or create a new tsconfig.json if the former file does not exist. Now we need to update the contents of the file to include TypeScript-specific configuration options. Merge your configuration with the code below if required:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/pages/*": ["pages/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Step 3 of 7

Update next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
  },
  reactStrictMode: true,
};

module.exports = nextConfig;

Step 4 of 7

Rename any existing .js files to .ts or .tsx, depending on whether the file contains JSX or not. For example, if you have a file called pages/index.js, rename it to pages/index.tsx.

You can also rename your existing directories such as `pages` or `components` to `pages-old` and `components-old` and create new empty directories with TypeScript files in case you need to reference the original files later.

Step 5/7

Update any files that import other files to use the .ts or .tsx extension. For example, if you have a file called index.ts that imports a file called header.js, update the import statement in index.ts to use the .ts or .tsx extension like so: import Header from './header.tsx';

Step 6 of 7

Covert your JavaScript code into TypeScript code. Here is an example of how to convert pages/_app.js to pages/_app.tsx

import 'normalize.css';
import '@/styles/index.scss';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

import 'normalize.css';
import '@/styles/index.scss';

import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Step 7 of 7

Restart your development server by running npm run dev, and your TypeScript code should now be compiled and running alongside your React code.

Note: you may need to adjust some of these steps depending on the specific structure of your project. However, these steps should be a good starting point for most projects.

The end, I hope this information was helpful, stay tuned for more content :)

ChatGPT Is Still Not Good Enough

Andrew Savetchuk — Thu, 09 Feb 2023 22:25:58 +0000

Some people have told me that they fear that ChatGPT (and AI in general) will take over the developer's jobs. I honestly do not see how this can happen (at least in the next 5-10 years) and I believe that AI tools are only tools that can help developers work more efficiently. Can it change in the future? Sure, but it will not happen soon.

Whenever I hear that ChatGPT is going to take someone's place, I encourage people to try actively using ChatGPT for at least a week. I do use it more often than Google, and while it helps to find the right information without annoying ads, it still often gives me incorrect answers to simple questions.

For example, here is me asking ChatGPT how to add a multi-select option to Choices.js (a JavaScript library I use in a Laravel project to make custom selectors).

As you can see, ChatGPT suggested that I should add multiple: true to the configuration object. I tried and it did not work. Instead, I decided to add the multiple property to the HTML tag itself and it did the trick (<select multiple...>).

Next, I wanted to be able to unselect some previously selected options, but the "X" button I expected to see did not appear. So I asked ChatGPT again.

As with the previous question, this time I got the wrong answer again. Even though the given piece of code is complete and works, it is not the piece I asked for.

Let's see one more example when ChatGPT gave me the correct answer, but in my opinion, the answer could be a bit better.

I asked ChatGPT to instantiate the date in Laravel, add 30 days to it, and display it in the following format: 13/2/2023. The code ChatGPT gave me this time was correct, however, Laravel has a now() helper that you can use instead of Carbon\Carbon::now() which I think makes your code cleaner. If I did not know about the shorthand, I would have had to write more code. It would be great if AI tools like ChatGPT offered you multiple solutions and explained the benefits and differences of each.

As of 2023, ChatGPT is pretty much the same tool as Google or StackOverflow, but without the ads (I wonder how long it will stay this way though). I do realize that the model will learn and grow over time, but I wonder if it could keep up with the latest technology trends in the future. For now, it works just well, periodically giving wrong responses, but still not good enough to give up other tools such as old but good StackOverflow.

The end, I hope this information was helpful, stay tuned for more content :)

How to Find Large Files in an AWS S3 Bucket Using Command Line Interface

Andrew Savetchuk — Fri, 20 Jan 2023 00:08:40 +0000

I recently struggled to find the right command to search for large files in an AWS S3 bucket and spent many hours researching this topic. I am new to Amazon CloudShell, so I had to ask the community for help, and I even created an account on AWS re:Post (aka the StackOverflow alternative for Amazon Web Services). Although I recommend using it if you need help with AWS, due to the small number of users on re:Post you can usually get help faster on StackOverflow. In my opinion, if you have a question, it is better to ask on both platforms.

Finding Files using AWS CloudShell

For this example, I have chosen Amazon CloudShell as the easiest tool to use with the AWS CLI that does not require any software to be installed on your computer. You can use any other tool you like.

To find the N most recent largest files in an AWS S3 bucket, you need to open console.aws.amazon.com and find CloudShell (I recommend adding it to your favourites in case you need to use it again).

Before running the command you need to know your S3 bucket name. When you have it ready, you can use the command below to find files:

aws s3api list-objects-v2 --bucket BUCKETNAME --query 'sort_by(Contents[?LastModified>=`2023-01-01`], &Size)[-5:]'

Replace BUCKETNAME with your S3 bucket name and change the date (2023-01-01) as needed. After running the command, your output should look like this:

Ignore LastModified Property

If you want to find the last N files regardless of the LastModified property, you can configure your command like this:

aws s3api list-objects-v2 --bucket BUCKETNAME --query 'sort_by(Contents, &Size)[-5:]'

Adjusting the Number of Files

You can adjust the number of files to be returned by changing the number in the square brackets ([-5:]), or you can remove the square brackets with the contents inside to display all files sorted by size. Be careful to run such a command on a large bucket though, as it can take minutes to perform the operation (I did it once...).

Bonus Command

There is another command that I rarely use but thought it would be useful to share.

aws s3 ls --summarize --human-readable --recursive s3://BUCKETNAME

This command will display all files in the bucket in a compact form with LastModified, Size and Name properties. If you have ever run the ls command on a Linux/Unix operating system before, you know what to expect.

The end, I hope this information was helpful, stay tuned for more content :)

What Is PHP CS Fixer and How It Can Help You Keep Your Code Cleaner

Andrew Savetchuk — Thu, 05 May 2022 12:38:09 +0000

What is PHP CS Fixer

PHP CS Fixer stands for PHP Coding Standards Fixer. This is a tool that fixes your code to follow standards. There are various PHP coding standards that you can follow, such as the popular PSR-1, and PSR-12 published by the PHP Framework Interoperability Group (the full list of PSR standards can be found here).

There are also other community-driven standards like the Symphony.

With PHP CS Fixer, you can follow multiple coding standards at once, or you can also define your own or your team's own coding standard through configuration. If you have ever worked with JavaScript and Eslint in particular, think of PHP CS Fixer as an alternative to Eslint for PHP.

Manually fixing coding standards in your code is a very tedious process, so PHP CS Fixer is a great solution. It helps you and your team ensure that you all follow the same rules when writing code, thus keeping it cleaner.

Installation

The recommended way to install PHP CS Fixer is to use Composer in a dedicated directory in your project, for example in the tools/php-cs-fixer.

mkdir --parents tools/php-cs-fixer
composer require --working-dir=tools/php-cs-fixer friendsofphp/php-cs-fixer

For more details and other installation methods, see installation instructions.

Usage

Usage: Option 1

Assuming you installed PHP CS Fixer as instructed above, you can run the following command to fix the files PHP files in the src directory:

tools/php-cs-fixer/vendor/bin/php-cs-fixer fix src

See usage, list of built-in rules, list of rule sets, and configuration file documentation for more details. If you need to apply code styles that are not supported by the tool, you can create custom rules.

Usage: Option 2 (Editor Integration)

However, executing a command manually does not seem to be a convenient approach. I personally prefer to run PHP CS Fixer by pressing a pre-configured keyboard shortcut in PHP Storm.

You can configure PHP CS Fixer for various code editors as described below:

Usage: Option 3 (Run PHP CS Fixer on every commit)

As an alternative option, you can fix your code on every commit using Husky and lint-staged. Using these tools PHP CS Fixer will run on your staged files, in other words, on the files you want to commit. Here is a great article explaining how to set up these tools to work with PHP CS Fixer.

Easy way of configuring PHP CS Fixer

If you are new to PHP Coding Standards and want to quickly configure PHP CS Fixer, I highly recommend using PHP CS Fixer Configurator by Michele Locati. It has a pre-defined set of rules that you can select and create your own configuration.

Most rules, when clicked, will display general information about the rule, available configuration options, and usage examples. The PHP CS Fixer configuration file generated by this tool can be exported to use in your project and then imported again in case you want to do some modifications.

The end, I hope this information was helpful, stay tuned for more content :)

Source

What Are Idempotent HTTP methods?

Andrew Savetchuk — Mon, 25 Apr 2022 08:45:53 +0000

Idempotent HTTP methods

An idempotent HTTP method is a method that can be called multiple times with the same input and produce the same result, without changing the state of the server.

Idempotency essentially means that the result of a successfully performed request does not depend on the amount of its execution. For example, in arithmetic, adding zero to a number is an idempotent operation.

Why do we need Idempotency?

API consumers can make mistakes and write the client code in such a way that there can be duplicate requests coming to the API. Idempotency is needed to make APIs fault-tolerant so that duplicated requests do not leave the system unstable.

The end, I hope this information was helpful, stay tuned for more content :)

The Difference Between Design Patterns and Design Principles

Andrew Savetchuk — Mon, 11 Apr 2022 19:26:45 +0000

Design patterns and design principles are both important concepts in software engineering, but they refer to different things.

Design Patterns

Design Patterns are techniques for how to design and architect your code. They are reusable low-level solutions to commonly occurring software design problems, so instead of inventing the wheel, we follow design patterns that are well-proven, tested by others, and safe to follow.

Each design pattern has a different use case and applies to a different scenario, they are also typically specific to a programming language or technology and often provide implementation details.

Examples of Design Patterns:

Adapter Pattern (converts the interface of a class into another interface that clients expect, allowing classes to work together)
Active Record Pattern (a database table or view is wrapped into a class)
MVC Pattern (separates application's logic into three interconnected components: the Model, the View, and the Controller)
Singleton Pattern (one class can only have one instance at a time)

Design Principles

Design principles, on the other hand, are general (high-level) guidelines that help inform good software design to ensure scalable software architecture and mastery. In most cases, you need to follow them to have quality code. They are more abstract and less prescriptive than design patterns and are typically not dependent on any specific programming language or technology.

For example, the Single Responsibility Principle (SRP) suggests that a class should have only one reason to change. This is a high-level statement that we should keep in mind while designing or creating classes for our application. SRP does not provide specific implementation steps and it is up to developers how they implement it in their applications.

Sometimes, design principles imply some design patterns. For example, the Open/Closed principle closely implies the Strategy pattern. Meanwhile, the Dependency Injection principle has strong ties to the MVC pattern.

Examples of Design Principles:

DRY Principle (Don't Repeat Yourself)
KISS Principle (Keep It Simple, Stupid)
Single Responsibility Principle (a class should have only one reason to change)
SOLID Principles (an acronym for five design principles)

TL;DR

Design Patterns are specific (low-level) solutions to specific problems. You should have a very good reason every time you decide to implement a pattern.
Design Principles are general (high-level) guidelines that help inform good software design. You should have a very good reason every time you decide not to follow principles.
Both concepts are important for building high-quality software, and they can be used in conjunction to create robust and maintainable systems.

I hope this information was helpful, stay tuned for more content :)

Source

ruby on rails - What's the difference between design patterns and design principles? - Stack Overflow

The Difference Between Unix and Linux

Andrew Savetchuk — Thu, 31 Mar 2022 21:45:53 +0000

Today, Linux is in great demand. You can see its use everywhere, on servers, desktops, smartphones, and even some electrical devices such as refrigerators. Some people consider Unix and Linux as synonyms, but that is not true. Let's take a closer look.

Unix

Before Linux and Windows, the computer world was dominated by Unix. Unix is a family of computer operating systems that derive from the original AT&T Unix (the mother OS as some people call it) that was invented in the '60s and over time has become a standard or certification. Only systems fully compliant with and certified to the Single UNIX Specification qualify as "Unix", others are called "Unix-like". For example, nowadays Mac OS is certified as UNIX certified while Linux is Unix-Like.

However, over time, Unix became less popular. The main problem with Unix was that it was very expensive. You needed expensive machinery, an expensive license, and an expensive administrator. We are talking about tens of thousands of dollars or euros a year, not the computer you buy as a student. This still applies to IBM AIX, HP-UX, and Sun Solaris, which are mostly used by large companies and organizations, although it would be cheaper for them to run everything on Linux.

Linux

Linux is a Unix-like operating system that behaves in a manner similar to a Unix system, although not necessarily conforming to or being certified to any version of the Single UNIX Specification. Technically, it is created from scratch, except for some parts where software providers gave away their code. The term Linux is applied to a number of open-source Unix-like operating systems based on the Linux kernel (the main component of a Linux operating system) known as distributions: Ubuntu, Debian, CentOS, Fedora, and so on.

Many operating systems were developed to be like Unix, but none have become as popular as Linux. Linux arose from the desire to have an affordable OS that would be cheap and could run on common hardware, like the average PC. One of the features was to make it "free" with the appropriate license: GNU. It is freely available, costs nothing to download and install, and can run on a cheap computer, take Raspberry Pi, for example. Using Linux as a user or admin is mostly the same as using Unix as the commands are very similar. If you have ever worked with a Linux and Mac OS terminal, you have probably noticed it.

We can say that asking about the differences between Unix and Linux is like asking about the differences between Mammals and Dogs. All dogs are mammals, but we can say that they are usually more suitable for pets than other mammals. This is not to say that other mammals, such as cats, cannot be excellent pets. Similarly, it would be fair to say that Linux is generally less expensive than Unix, but this does not preclude the existence of expensive Linux or free Unix distributions.

Key Features

Linux	Unix
Linux is used everywhere, on servers, desktops, smartphones, and even some electrical devices such as refrigerators.	Unix is used on servers, workstations, and PCs.
Linux is an open-source operating system that is freely available to everyone.	Unix is an operating system that can be only used by its copyrighters.
Linux is open-source, it is developed by sharing and collaborating with developers from around the world.	Unix was developed by AT&T Labs, various commercial vendors, and non-profit organizations.
The term Linux is applied to a number of open-source Unix-like operating systems based on the Linux kernel (the main component of a Linux operating system) known as distributions: Ubuntu, Debian, CentOS, Fedora, and so on.	Unix is a family of computer operating systems that derive from the original AT&T Unix. Unix has three distributions IBM AIX, HP-UX, and Sun Solaris. Apple also uses Unix to create the OSX operating system.

TL;DR

Unix and Linux are both operating systems, with Unix being an older and proprietary system, while Linux is an open-source system based on Unix.

I hope this information was helpful, stay tuned for more content :)

DEV Community: Andrew Savetchuk

How to Redesign Your Github Page

Left Column

Main Area

Overview of MVC Architectural Pattern

Model

View

Controller

Visual Representation of MVC for a Web App

Source

The Difference Between Types (Type Aliases) And Interfaces in TypeScript

Difference #1: Objects and Functions

Difference #2: Other Types

Primitives

Unions

Tuples

Mapped Types

Difference #3: Declaration Merging

Difference #4: Extention

What Should I Use?

Keep an Eye on the Changelog

Source

Advanced Overview of String Conversion in JavaScript

Option #1: value.toString()

Option #2: String(value)

Option #3: value + "" or `${value}`

Option #4: JSON.stringify(value)

Converting Dates to String

Always Consider Performance

Source

The Difference Between Docker Images and Docker Containers

Docker Containers

Docker Images

Summary

How to Add TypeScript to Existing Next.js Project

To Add Typescript to an Existing Next.js Project, You Can Follow These Steps:

Step 1 of 7

Step 2 of 7

Step 3 of 7

Step 4 of 7

Step 5/7

Step 6 of 7

Step 7 of 7

ChatGPT Is Still Not Good Enough

How to Find Large Files in an AWS S3 Bucket Using Command Line Interface

Finding Files using AWS CloudShell

Ignore LastModified Property

Adjusting the Number of Files

Bonus Command

What Is PHP CS Fixer and How It Can Help You Keep Your Code Cleaner

What is PHP CS Fixer​

Installation​

Usage

Usage: Option 1​

Usage: Option 2 (Editor Integration)​

Usage: Option 3 (Run PHP CS Fixer on every commit)​

Easy way of configuring PHP CS Fixer​

Source

What Are Idempotent HTTP methods?

Idempotent HTTP methods​

Why do we need Idempotency?​

The Difference Between Design Patterns and Design Principles

Design Patterns

Design Principles

TL;DR

Source

The Difference Between Unix and Linux

Unix​

Linux​

Key Features​

TL;DR

Source

Advanced Overview of String Conversion in JavaScript

The Difference Between Docker Images and Docker Containers

How to Find Large Files in an AWS S3 Bucket Using Command Line Interface

What is PHP CS Fixer

Installation

Usage: Option 1

Usage: Option 2 (Editor Integration)

Usage: Option 3 (Run PHP CS Fixer on every commit)

Easy way of configuring PHP CS Fixer

Idempotent HTTP methods

Why do we need Idempotency?

Unix

Linux

Key Features