DEV Community: TheOnlyBeardedBeast

Suggest me a snippet manager

TheOnlyBeardedBeast — Tue, 21 Jul 2020 06:06:19 +0000

I am looking for a snippet manager which could sync to a github repository, I googled but didn't find any which could handle that.

Show me your personal website/portfolio

TheOnlyBeardedBeast — Fri, 10 Jul 2020 09:00:40 +0000

So, show me your website/portfolio and tell me what technologies do you use and why?

Here is mine https://thedev.sk

It uses Preact and Typescript, Bundled by Parcel, everything is prerendered and hosted on http://now.sh

FYI: the image for the site background is a render of a 3D model made in ZBrush.

I know the whole thing is a bit overblown, it would take less time to build the whole thing from scratch without preact, ts..., just good old html/css/vanilla js, but I wanted to try Preact and Parcel, and I saw an opportunity to use them in this side project.

It's your turn, show me what you got!

Microsft Design released Fluent System Icons and I created a React package

TheOnlyBeardedBeast — Thu, 25 Jun 2020 22:00:16 +0000

Fluent System Icons came to us.

I always liked the modern MS look and I always liked how nice the icons are in Microsofts UIs, but I could not use the MDL icons because of their license. Now that we have these nice open-source icons from Microsft we can combine them with their shiny opensource font Selawik and its on us to use these resources and build something nice.

If anyone would like to use them for React, I created a package https://yarnpkg.com/package/fluent-icons-react

For the C# devs, the Blazor package is in progress :)

How I built my first nuget package

TheOnlyBeardedBeast — Sun, 21 Jun 2020 16:57:55 +0000

As a lot of you guys know, Blazor is here, and it allows us to use C# in frontend web development. After some time I made a decision to give it a shot and I really like it, so I started to develop the frontend of my "million dollar" idea in Blazor wasm. I really hate the idea of premade UI components, so I started to build my own components which went really well until a missing icon library hit me in the head.

So I decided to create a Blazor icon component library based on the Feather icon set , which has a lot of really nice icons well structured and it is opensource.

First step, I created a Razor class library project in visual Studio 2019

From the feather icon set playground I defined three main input parameters which a component can accept:

color
stroke width
size

Based on these information I created a base icon component class (Icon.cs) in the root of the project which describes these parameters and sets some default values.

namespace Feather.Blazor
{
    public class Icon : ComponentBase
    {
        [Parameter]
        public string Color { get; set; } = "#ffffff";
        [Parameter]
        public float StrokeWidth { get; set; } = 1.5f;
        [Parameter]
        public int Size { get; set; } = 24;
    }
}

In the _Imports.razor I registered the namespace of our project so the Icon.cs will be accessible for all the razor components.

@using Microsoft.AspNetCore.Components.Web
@using Feather.Blazor

Next I downloaded the Feather icon set and I copied the icons to a new folder which I named IconsSource. None of these files will copy to our output.

Thanks to the nice and even structure of the svg icons it was really easy to generate razor components from the svg files. For that generation I created a quick nodejs script which

creates a new component for every svg icon
every component inherits the Icon basecomponent
places the component parameters to the svg element attributes.

const iconFolder = './IconsSource/';
const outputFolder = "./Icons/";

const fs = require('fs');

const icons = fs.readdirSync(iconFolder);

function toPascalCase(text) {
  return text.replace(/(^\w|-\w)/g, clearAndUpper);
}

function clearAndUpper(text) {
  return text.replace(/-/, "").toUpperCase();
}

icons.forEach(icon => {
  const newName = "Feather" + toPascalCase(icon).replace(".svg", ".razor");

  const fileContent = fs.readFileSync(iconFolder + icon, { encoding: "utf8" })
    .replace('width="24"', 'width="@Size"')
    .replace('height="24"', 'height="@Size"')
    .replace('stroke="#fff"', 'stroke="@Color"')
    .replace('stroke-width="1.5"', 'stroke-width="@StrokeWidth"');

  fs.writeFileSync(outputFolder + newName,
    `@inherits Icon

${fileContent}
`, { flag: 'w' });

  console.log(newName);
});

I know that script is not so optimized, but it has only one purpose, to generate razor components.

So after I run that script, I have fully generated and usable icon components for Blazor.

After that I set up some information in the Project -> Properties -> Package tab, and I change my build config to release.

I checked Generate nuget package on build in the package configuration, it is enough to build my project, otherwise I would have to use the following command:

dotnet pack

Both of the previous methods has the same result, in the bin/Release folder a new .nupkg file is generated, this is my nuget package.

If I want to know what is in the package I created, I just open it with 7zip and I can find my .dll files there and some metadata etc.

Next I Logged in to nuget and opened the user menu and I clicked on the Upload package option. Few minutes after the upload my package was available for the masses and we can find our package in the nuget package manager.

And this is how those icons look like in my side navigation component (Fluent UI inspired)

Please support the creators of this nice icon set!
https://github.com/feathericons/feather

If you want to see the source code or use this Blazor package or support my work with a star, please visit

github link

https://github.com/TheOnlyBeardedBeast/Feather.Blazor

nuget link

https://www.nuget.org/packages/Feather.Blazor/

English isn’t my first language, so please excuse any mistakes.

Using Google drive in a C# application

TheOnlyBeardedBeast — Mon, 13 Apr 2020 13:35:48 +0000

Let's say storage is a needed part of our application, but our hosting has limited storage size, and we really need a few gigs of storage as cheap as it is possible. So lets create a service which could access and work with Google drive.

Prerequisites

enabled Google drive API in Google Cloud console
registered a project
create an OAuth 2.0 client with Google drive api permissions
install the Google drive v3 nuget package https://www.nuget.org/packages/Google.Apis.Drive.v3/

Lets start with creating an empty class

public class DriveApiService
{

}

Auth

We have 2 options to get access to a drive storage

service account
user account

If you don't want any user interaction and authorization use a service account, the downsides of this account is, that you can't access the google drive UI for this account, and you cant buy additional storage for this account.

Our second option is to use our personal account, but it will need one time manual login by the user.

We will use the second option.

So in the constructor of the service we will handle the authorization with the file client_id.json which is generated for the Google OAuth client.

public class DriveApiService
{
        protected static string[] scopes = { DriveService.Scope.Drive };
        protected readonly UserCredential credential;
        static string ApplicationName = "MyApplicationName";
        protected readonly DriveService service;
        protected readonly FileExtensionContentTypeProvider fileExtensionProvider;

        public DriveApiService()
        {
            using (var stream =
                new FileStream("client_id.json", FileMode.Open, FileAccess.Read))
            {
                string credPath = "token.json";

                credential = GoogleWebAuthorizationBroker.AuthorizeAsync(
                    GoogleClientSecrets.Load(stream).Secrets,
                    scopes,
                    YOUR_GMAIL_EMAIL, // use a const or read it from a config file
                    CancellationToken.None,
                    new FileDataStore(credPath, true)).Result;

                fileExtensionProvider = new FileExtensionContentTypeProvider();
            }

            service = new DriveService(new BaseClientService.Initializer()
            {
                HttpClientInitializer = credential,
                ApplicationName = ApplicationName,
            });
        }
}

Let's try it out.

Let's use the dependency injection and register our service as a singleton in our application.

services.AddSingleton<DriveApiService>();

After you start the application, a browser window will open and requires you to login to your google account, if the login went well, it creates a persistent file token.json in your application which will contain the access and refresh token to access the Google drive API. You won't need to login until the generated file is in your application, and your refresh token is valid, which has no time limit, but if you change you Google account password it gets revoked and you have to log in manually again.

Listing files

Google drive has no directory structure (you can't use a path for navigation "root/parent/child.type"), it uses parent child relations, one child can be in multiple parents. In our application we store these relations in a DB and emulate a classic directory behavior with all it restrictions and we actually using paths, but this article won't cover that part.

To get files in a directory we need to know its id. We can access the root directory with the root keyword.

public IList<Google.Apis.Drive.v3.Data.File> ListEntities(string id = "root")
        {
            FilesResource.ListRequest listRequest = service.Files.List();
            listRequest.PageSize = 100;
            listRequest.Fields = "nextPageToken, files(id, name, parents, createdTime, modifiedTime, mimeType)";
            listRequest.Q = $"'{id}' in parents";

            return listRequest.Execute().Files;
        }

The ListEntities method returns a list of files, with all the defined fields, which are in the directory with the given id. If no id is set we are using the default root keyword. A new folder needs to have a name, mime type and defined parent. Be careful Google drive allows multiple files/folders with the same name, google drive doesn't care. (we handle this in the database layer of the app, so we care :))

Creating folders

To group files we are using folders. The creation of folders is simple.

public Google.Apis.Drive.v3.Data.File CreateFolder(string name,string id = "root")
        {
            var fileMetadata = new Google.Apis.Drive.v3.Data.File()
            {
                Name = name,
                MimeType = "application/vnd.google-apps.folder",
                Parents = new[] { id }
            };

            var request = service.Files.Create(fileMetadata);
            request.Fields = "id, name, parents, createdTime, modifiedTime, mimeType";

            return request.Execute();
        }

If the id of the parent is given we create a folder in the defined parent, if not, then we create the folder in the root. The response will contain all the defined fields.

File upload

File upload is similar to a folder creation.

public async Task<Google.Apis.Drive.v3.Data.File> Upload(IFormFile file, string documentId)
        {
            var name = ($"{DateTime.UtcNow.ToString()}.{Path.GetExtension(file.FileName)}");
            var mimeType = file.ContentType;

            var fileMetadata = new Google.Apis.Drive.v3.Data.File()
            {
                Name = name,
                MimeType = mimeType,
                Parents = new[] { documentId }
            };

            FilesResource.CreateMediaUpload request;
            using (var stream = file.OpenReadStream())
            {
                request = service.Files.Create(
                    fileMetadata, stream, mimeType);
                request.Fields = "id, name, parents, createdTime, modifiedTime, mimeType, thumbnailLink";
                await request.UploadAsync();
            }


            return request.ResponseBody;
        }

First we generate a new unique filename for our file with the right extension, we extract the right mime type from our file and we fill our file metadata. Then we create an upload request and we upload our stream. The response will contain all the defined fields.

Rename files/folders

In our application we can only edit the file or folder name, but following this sample you are able to change anything in the file entity.

public void Rename(string name, string id)
        {
            Google.Apis.Drive.v3.Data.File file = service.Files.Get(id).Execute();

            var update = new Google.Apis.Drive.v3.Data.File();
            update.Name = name;

            service.Files.Update(update, id).Execute();
        }

First we get our file by the given id, then we create an update request, with the metadata we want to change. If you want you could implement some error handling because if the file with the given id does not exist, then it throws an error (we have the error handling in the upper layer).

Removing File/Folder

Removing entities is straight forward.

public void Remove(string id)
{
        service.Files.Delete(id).Execute();
}

File download

We can implement a file downloading which downloads a file by its id, we store its content in a memory stream we set its position to 0 so we are able to work with it in the upper layers and then we return the stream.

        public async Task<Stream> Download(string fileId)
        {
                Stream outputstream = new MemoryStream();
                var request = service.Files.Get(fileId);

                await request.DownloadAsync(outputstream);

            outputstream.Position = 0;

                return outputstream;
        }

BONUS Zip multi download

First we implement a DTO model which describes our file.

public class ZipVM
    {
        public string Name { get; set; }
        public string DriveId { get; set; }
    }

We are storing custom file names in our database, in drive we are using date based file names, to have the right filenames in the generated zip file wee need to provide the right filenames to our method, if you don't need that, you could use a simple list of ids or you could reuse the Download method.

Handling a zip item download is similar to a single file upload, but this method is working with our DTO model and returns a tuple consisted of a stream and filename. Why we need this? Actually the Google drive API doesn't provide anything to download multiple files at once.

public async Task<(Stream,string)> DownloadZipItem(ZipVM vm)
        {
            Stream outputstream = new MemoryStream();
            var request = service.Files.Get(vm.DriveId);

            await request.DownloadAsync(outputstream);

            outputstream.Position = 0;

            return (outputstream, vm.Name);
        }

The Zip method accepts a list of the DTOs we defined. Then we create a list of DownloadZipItem task from the provided DTOs which we call in parallelly. Then we create an archive and return it as a byte array.

public async Task<byte[]> Zip(List<ZipVM> documents)
        {
            List<Task<(Stream,string)>> downloadTasks = new List<Task<(Stream,string)>>();

            for(int i = 0; i<documents.Count; i++)
            {
                downloadTasks.Add(DownloadZipItem(documents[i]));
            }

            await Task.WhenAll(downloadTasks);


            List<(Stream, string)> files = downloadTasks.Select(t => t.Result).ToList();

            byte[] archiveFile;
            using (var archiveStream = new MemoryStream())
            {
                using (var archive = new ZipArchive(archiveStream, ZipArchiveMode.Create, true))
                {
                    int i = 0;
                    foreach (var file in files)
                    {
                        var zipArchiveEntry = archive.CreateEntry(file.Item2, CompressionLevel.Fastest);
                        using (var zipStream = zipArchiveEntry.Open())
                            file.Item1.CopyTo(zipStream);
                    }
                }

                archiveFile = archiveStream.ToArray();
            }

            return archiveFile;
        }

Be careful, to provide the file extension inside the filename for the entry creation inside the zipping method.

English isn’t my first language, so please excuse any mistakes.

Dockerize a react app with NGINX for multiple environments

TheOnlyBeardedBeast — Thu, 06 Feb 2020 19:02:05 +0000

Let's say you have your shiny web app and you want to containerize it and publish it.

In my case, it is a simple app based on create-react-app, which connects to a GraphQL backend and I use NGINX as a webserver to serve my built frontend. I have two environments, one of them is public (production) and the second one is secured with basic auth (staging). The two environments have different NGINX config files.

So let's get started step by step.

I have the React app and I created two Nginx config files

nginx.staging.conf
nginx.production.conf

Both NGINX configurations are based on Sara Vieiras article https://medium.com/yld-blog/deploy-your-create-react-app-with-docker-and-ngnix-653e94ffb537

So what I need to achieve is passing a build time environment variable into our React app build, and based on a second build time variable I need to choose the right Nginx configuration.

So first we define the base image then we copy our app into our work directory then we go to the root of our app. In my case it is a yarn workspaces monorepo and I have some business logic in the upper levels, that's why the long path.

FROM node as build
WORKDIR /app
COPY . .
WORKDIR /app/packages/reactapp

In my app I am using as my GrqphQL endpoint constant this value process.env.REACT_APP_GRAPHQL_ENDPOINT || "http://localhost:4000/graphql".
So To build our app we need to pass a build time environment variable which is represented by process.env.REACT_APP_GRAPHQL_ENDPOINT otherwise it will use the localhost value.
To achieve this we initialize a build-time argument, and based on this argument we set our environment variable. It is very important that our value needs to start with REACT_APP otherwise create-react-app ignores our value.
( there are some exceptions read more: https://create-react-app.dev/docs/advanced-configuration )

ARG REACT_APP_GRAPHQL_ENDPOINT_ARG
ENV REACT_APP_GRAPHQL_ENDPOINT=$REACT_APP_GRAPHQL_ENDPOINT_ARG

RUN yarn
RUN yarn build

At this point, we have built our app with a custom build-time variable, now we can set up our Nginx web server, so let's continue our docker file. So we initialize an Nginx image and we copy our built React app into the folder which is set as root in our Nginx configuration.

FROM nginx:alpine
COPY --from=build /app/packages/reactapp/build /usr/share/nginx/html

Then we can continue with the initialization of our second environment variable which helps to decide which configuration file to pick from the two we created. I use the build-time argument to dynamically create the filename I want to use. And I also copy the file which contains the encrypted credentials for the basic auth for the staging environment.

ARG NGINX_ENV_CONF
COPY nginx.$NGINX_ENV_CONF.conf /etc/nginx/nginx.conf
COPY .htpasswd /etc/apache2/.htpasswd

In the end, we expose our port 80 and we fire up Nginx in the foreground.

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

so our .dockerfile looks like this:

FROM node as build
WORKDIR /app
COPY . .
WORKDIR /app/packages/reactapp

ARG REACT_APP_GRAPHQL_ENDPOINT_ARG
ENV REACT_APP_GRAPHQL_ENDPOINT=$REACT_APP_GRAPHQL_ENDPOINT_ARG

RUN yarn
RUN yarn build

FROM nginx:alpine
COPY --from=build /app/packages/reactapp/build /usr/share/nginx/html

ARG NGINX_ENV_CONF
COPY nginx.$NGINX_ENV_CONF.conf /etc/nginx/nginx.conf
COPY .htpasswd /etc/apache2/.htpasswd

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Now we can build our app for the staging:

docker build -t dockerized-react 
  --build-arg REACT_APP_GRAPHQL_ENDPOINT_ARG=http://mystaging.dev/graphql 
  --build-arg NGINX_ENV_CONF=staging .

Then we can run it like this:

docker run -d --name dockerized-react -p 80:80 dockerized-react

As an alternative to conditionally choosing a different Nginx configuration, we could use an Nginx template file, but in this case for me, it was easier to choose between files.

English isn’t my first language, so please excuse any mistakes.

Thank you all for your attention and time;

Comparing URLs in Javascript

TheOnlyBeardedBeast — Fri, 10 Jan 2020 17:55:08 +0000

Why I need to compare URLs

There is an e-shop with a lot of filters, these filters can be saved by the user for notification purpose. The filters on the frontend are stored as a javascript object with a lot of nesting for different needs of the component, so comparing a database stored object with an actual filter object is possible, but we can do it differently. Actually every change in the filter affects the URL pathname and/or query string, this is done because we wanted to have shareable searches by the users.

It is not just comparing 2 strings

Actually it would be nice, but the query params can have a different order, and by changing the URL manually you can even create duplicates of the same property.

My solution

So first we transform 2 URL strings into URL objects.

const urls = [new URL(urlProp1),new URL(urlProp2)];

Comparing the pathname is easy, there is no way to have it in bad order or to add not supported params to it, that's handled by our router, so comparing them is enough.

if(urls[0].pathname !== urls[1].pathname){
    return false;
}

Next we exclude our URLSearchParams from our URL objects before we create our key-value objects.

const params = urls.map(url => url.searchParams);

Before we create key-value objects from our URLSearchParams we quickly compare the length of our params. The object creation would eliminate duplicates in the URLSearchParams objects.

Actually you can skip this step. But it brings up uncertainty about duplicates, because duplacates can have different values with a same key.
(note: our e-shop eliminates duplicates on frontend and backend automatically)

if(params[0].toString().length !== params[1].toString().length){
    return false;
}

So now we can create objects from our params. This step also eliminates duplicates, that is why we compared the length of our params above.

const paramObjects = params.map(param => {
    param.delete("page");

    return Object.fromEntries(param);

    // for nodejs where Object.fromEntries is not implemented
    // let paramObject = {};

    // for (let [key, value] of param.entries()) {
    //   paramObject[key] = value;
    // }

    // return paramObject;
});

So at this point, we know that we have URLSearchParams with the same string length and without duplicate keys. So now we can compare the actual number of our params in our URLSearchParams.

if(Object.keys(paramObjects[0]).length !== Object.keys(paramObjects[1]).length){
    return false;
}

Now we check if every key from one paramsObjects exists in the other and if every key have same value in both objects and we return the result from this check.

return Object.keys(paramObjects[0]).every(key => !!paramObjects[1][key] && paramObjects[1][key] === paramObjects[0][key]);

So I ended up with this helper function.

const urlsEqual = (urlProp1,urlProp2) => {
  const urls = [new URL(urlProp1),new URL(urlProp2)];

  if(urls[0].pathname !== urls[1].pathname){
    return false;
  }

  const params = urls.map(url => url.searchParams);

  if(params[0].toString().length !== params[1].toString().length){
    return false;
  }

  const paramObjects = params.map(param => {
    param.delete("page");
    return Object.fromEntries(param);

    // for nodejs where Object.fromEntries is not implemented
    // let paramObject = {};

    // for (let [key, value] of param.entries()) {
    //   paramObject[key] = value;
    // }

    // return paramObject;
  });

  if(Object.keys(paramObjects[0]).length !== 
     Object.keys(paramObjects[1]).length){
       return false;
  }

  return Object.keys(paramObjects[0]).every(key => !!paramObjects[1][key] 
    && paramObjects[1][key] === paramObjects[0][key]);
}

English isn’t my first language, so please excuse any mistakes.

PS: I know the host is not checked, implement it if you need it. Our client-server solution takes care of it.

Thank you all for your attention and time;

Conditional hooks, maybe

TheOnlyBeardedBeast — Wed, 13 Nov 2019 11:31:27 +0000

Most of the times I can handle development with react hooks without additional tricks. Until today I had no issue with the rules of react-hooks, but today was the day when everything changed.

We use a third-party hook that handles the persistence of the state in our simple form, but it does not handle the case if the local storage is not available. We requested a fallback implementation in the third-party hook but we still needed a fix, a temporary fix maybe.

Hooks can't be used inside conditions, and I needed to use a different hook based on the local storage availability.

Here is my solution:

const getHook = () => {
  try {
    // this throws an error if the localstorage is not available
    window.localStorage.getItem('key'); 

    return usePersistence;
  } catch {
    return useState;
  }
};

The getHook function tests the local storage then it returns the right hook based on the trycatch success state.

Based on this solution we need to get an initial value (because our hooks use different initial values)

const getInitialValue = () => {
  try {
    window.localStorage.getItem('contact-form');

    return 'contact-form';
  } catch {
    return {};
  }
};

So now we have a fallback for our third-party hook and the right initial value for each case.

The usage is the following:

// inside the functional component
const [formValues, setFormValues] = getHook()(getInitialValue());

Not the nicest solution, but it works.

English isn’t my first language, so please excuse any mistakes.

Thank you all for your attention and time, hopefully, my solution won't last long in the project.