DEV Community: Dimas López

Create an icon component from a SVG icon

Dimas López — Fri, 30 Jun 2023 16:17:12 +0000

Every time when you have an icon in SVG, and you want to use it in a application, you need to adapt it to the correspond syntax of the framework. This is something repetitive and tired: remove unnecessary attributes, add inherit classes, inherit styles, add size properties, stroke if apply, ...

Then, inspired on this https://svg2jsx.com, a tool to create a React component from a SVG, I created https://svg-icon-2-fw-component.dimaslz.dev/, a tool to create any framework (angular, vue2, vue3, react, svelte, ...) component, with Javascript or Typescript variant, form a SVG.

How it works?

Go to https://svg-icon-2-fw-component.dimaslz.dev
Copy some SVG icon (go here for example https://heroicons.com, and copy the SVG version)
Paste the content on the left editor (paste SVG string content or drop multiple SVG files here)
Wait to generate the default component (React in JSX)
And choose to desired framework, Svelte + Typescript for example
You have a good base Svelte component in Typescript

<script lang="ts">
  export let size: string | number = 24;
  export let stroke: string | number = 1;
</script>

<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  stroke="currentColor"
  stroke-width={stroke}
  viewBox="0 0 24 24"
  style={`width: ${size}px; height: ${size}px; stroke-width=${stroke};`}
  ><path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M4.26 10.147a60.436 60.436 0 0 0-.491 6.347A48.627 48.627 0 0 1 12 20.904a48.627 48.627 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.57 50.57 0 0 0-2.658-.813A59.905 59.905 0 0 1 12 3.493a59.902 59.902 0 0 1 10.399 5.84 51.39 51.39 0 0 0-2.658.814m-15.482 0A50.697 50.697 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"
  /></svg
>

How to use it with multiple svg files?

Drag and drop your SVG files
Choose your framework
Choose the Language (Javascript or Typescript)
Download the icons in a zip file

The format of the filename is icon-builder-{datetime}-framework.zip. Inside this file, you will have all the files to use in your application.

End

Do you like it?, I appreciate feedback. Feel free to add issues to the repo here https://github.com/dimaslz/icon-lib-builder and give me a ⭐️ to motivate me to continue working on it.

Thank you for reading and, happy coding! 👨‍💻

Managing local SSL certificates without port (cli)

Dimas López — Sun, 18 Jun 2023 08:39:26 +0000

Days ago, I published a post talking about a script to automate the creation of certificates for local domains: https://github.com/dimaslz/local-ssl-management.

Now I want to share with you a different way to solve the same use case, but in a more convenient manner using a CLI.

Use case

If you are using a local domain with HTTPS, for example, like https://local.your-domain.com:3000, and you want to remove the port, you can only have one application running on the same port. Another detail is that you need to add a special setup in the project to serve it on port 443. There are other options, but they involve more manual steps.

I always try to avoid specific settings just for the local environment. The project should have as few differences as possible from the production setup.

Another nuisance with using ports in the URL, in my opinion, is when you have the URL set in multiple services, like GitHub, for the authentication process. If you need to change the port for some reason, you have to go back to GitHub and update the port.

As I enjoy automation scripts, I have created a CLI to automate the creation of local certificates (supported by mkcert) and remove the ports from the URL using a Docker image based on Nginx.

How it works

Installation

npm install -g @dimaslz/local-ssl-management-cli

Requirements: docker, node and mkcert

How to use

You can read commands here: https://github.com/dimaslz/local-ssl-management#commands

Once you install the package globally, you can use local-ssl command.

┌[dimaslz@mbp14] [/dev/ttys106]
└[~]> local-ssl
Usage: local-ssl [options] [command]

Options:
  -h, --help                    display help for command

Commands:
  create [options] <domain>     Create domain
  list                          List domains
  update [options] <domain|id>  update domain
  remove <domain|id>            Create domain
  help [command]                display help for command

Create your first domain

Now, you do not have any config. If you run the command local-ssl list you will see:

┌[dimaslz@mbp14] [/dev/ttys106] [1]
└[~]> local-ssl list

id        key        domains        port

Then, lets imagine you have a project running on http://localhost:3000 and you want to use a SSL certificate with a custom domain like https://local.your-domain.com. So, first you need to update your /etc/hosts as:

127.0.0.1       local.your-domain.com
...

after, you can run the command:
local-ssl create local.your-domain.com --port 3000

┌[dimaslz@mbp14] [/dev/ttys106]
└[~]> local-ssl create local.your-domain.com --port 3000

The local ssl proxy is running.

ℹ️  The local ssl proxy is running. Keep it mind that it is important to the local domains that works through HTTPS.


┌──────────────┬──────────────────────┬──────────────────────────────────────────┐
│ container id │ container image      │ port                                     │
├──────────────┼──────────────────────┼──────────────────────────────────────────┤
│ 5f340ae86786 │ local-ssl-management │ 0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp │
└──────────────┴──────────────────────┴──────────────────────────────────────────┘


SSL proxy running


domain                                app running
https://local.your-domain.com         ❌

✅ - is when the application is success on ping
❌ - is when the application fails on ping
In my example, I did not have an application running on port 3000

And now, you can test your domain https://local.your-domain.com (instead of https://local.your-domain.com:3000) in your browser and should work.

By default, a SSL cert for localhost is created.

End

This is something that works for me, and perhaps it can work for you as well.

Feedback is welcome. If you like it or have any ideas to improve the command, please give me a ⭐️ in Github https://github.com/dimaslz/local-ssl-management to motivate me to continue sharing work.

Thank you for reading and, happy coding! 👨‍💻

Managing local SSL certificates without port

Dimas López — Thu, 15 Jun 2023 00:03:51 +0000

CLI version here https://dev.to/dimaslz/managing-local-ssl-certificates-without-port-cli-4lfm

Sometimes we need to use HTTPS domain while we are working locally and, we use the basic url with the port where is running the project like https://localhost:3000. Also, sometimes, is recommended to have a similar TLD as the real domain in production, something like https://local.your-domain.com:3000, because maybe, we need to do something related to the TLD, like handle default language or something else.

As you can see, we need to add the PORT (3000). What happen if you want to remove the port in the url but, serving the application running in a port? You can not do it. You only can use 1 application running in the port 443 and, you need to add a special setting to the runner of the project, to serve the application in the 443 port (ssl). Other solutions are a bit complex, modifying something in your system manually probably (manually multiple times === will be tedious).

I try to avoid specific settings just for local environment, the project should have the less or any differences as possible with the production setting.

Also, another nuisance using the ports in the url, in my opinion, is when you have the URL set in multiple services, like Github, to make the authentication process. Then, if you need to change the port for some reason, you need to back to Github and update the port.

As I like automation scripts, I have created a script to automate to create local certifications (supported by mkcert) and remove the PORT's from the url through a proxy with Docker image base on Nginx.

Here the Github repository if you want to try it: https://github.com/dimaslz/local-ssl-management-docker

(copied and pasted from: https://github.com/dimaslz/local-ssl-management-docker#how-to-use)

How to use

#1 - Update your /etc/hosts:

OSX:

...
127.0.0.1        local.your-domain.com

#2 - Setup config:

[
  {
    "domain": "local.your-domain.com",
    "port": 3000, // where the application is running http://localhost:3000
  },
  ...
]

#3 - Run your application:

The script will work but, if your application is not running, the domain will not resolve the source.

#4 - Run the script:

Before all, build the script by running yarn build and after yarn up

The script will:

Check the config.json file, creating the new SSL certificates if needed.
Create the nginx.conf per each domain.
Generate the Dockerfile configuration.
Remove and create the new image (named local-ssl-management).
Remove and create the new container (named local-ssl-management).

All files will be into .temp folder (do not touch it).

#4 - Go to your domain and check it:

Open the application url: https://local.your-domain.com and... should work 😅.

END!

This is something that works for me, and maybe it works for you too.

I will continue working on it, this is my next iteration:

Add certs manually
Add custom nginx config
CLI

Feedback are welcome. If you like it, give me a ⭐️ in Github https://github.com/dimaslz/local-ssl-management to motivate me to continue sharing work.

Thank you for reading and, happy coding! 👨‍💻

Improving NgClass expression

Dimas López — Sun, 12 Sep 2021 15:30:40 +0000

Sometimes happens that when you are working with a framework, you miss some features of the other. For me, this is something common because I work in Angular, Vue and (P)React (maybe others) almost every day and, when I work in Angular, I miss Vue, when I work in Vue I miss React and bla bla bla.

Today, let's talk about one difference between Vue and Angular in the class expression possibilities. Maybe, you should have some experience with Vue and Angular to get the point of this article.

For example, in Angular, you can use the following [ngClass] expressions:

Note: Let's omit [ngClass]="stringExp|arrayExp|objExp"

<!-- example of ngClass in Angular -->
<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element
  [ngClass]="{'first': true, 'second': true, 'third': false}"
>...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

As you can see, the options is to use any expression as Array, Object or String where the first result, at the first level (first child) should return a string but, if you want to mix both or use a deeper child item, maybe you will have an error.

<!-- with ngClass of Angular -->
<some-element [ngClass]="[{'classA': true}, 'classB']">
  ...
</some-element>
<!-- ERROR Error: NgClass can only toggle CSS classes expressed as strings, got [object Object] -->

As you can see, the example above, is a mix: An Array with an Object and String as item values.

If you have been working in Vue, you know that you can use more flexible expressions, so, the the example in Angular, we can do in Vue as in the following example:

<!-- with :class of Vue -->
<some-element :class="[{'classA': true}, 'classB']">
  ...
</some-element>

For that, in my last applications, I made a directive to solve it and, the example is something like this:

<!-- with ngVClass of Angular -->
<some-element [ngVClass]="[{'classA': true}, 'classB']">
  ...
</some-element>

The example above works. This is a directive that allows you to work with classes in Angular as in Vue.

Then I decided to share to the community publishing in a npm package https://ng-v-class.dimaslz.dev.

As always, I hope could be helpful, at least as learning. Feedback are welcome, support the library clicking in the star in the repo, always helps.

Thanks for reading.

Use heroicons.com in your Angular applications

Dimas López — Thu, 01 Oct 2020 14:25:27 +0000

I love TailwindCSS and, when I use it I need icons, then usually I use Fontawesome, it is a common option, or I use free opensource icons from some platforms, but you need to create your own collection. But there is a great option recommended and made by the TailwindCSS makers and designed by @steveschoger, this is heroicons.com with around 226 Icons in SVG. Each icon, you can copy and paste the SVG and use it but is not a maintainable way.

So I create an Angular icon library, based in heroicons.com to use un my application easily but at the same time, for fun and share my utilities to the community.

Take a look this playground: https://ng-heroicons.dimaslz.dev

How to use

First, install the dependency with npm or yarn.

$ yarn add @dimaslz/ng-heroicons

Now, add the module to the module where you want to use, commonly in the app.module.ts to can use around all application.

// app.module.ts
import { NgHeroiconsModule } from "@dimaslz/ng-heroicons";
// ...

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgHeroiconsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

//...

then, use any icons with the following syntax: Outline icons with the suffix -outline-icon and -solid-icon for solid ones.

<!-- outline example -->
<thumb-up-outline-icon></thumb-up-outline-icon>

<!-- solid example -->
<thumb-up-solid-icon></thumb-up-solid-icon>

Multiple examples

<!-- outline with stroke 1 and color pink -->
<thumb-up-outline-icon stroke="1" color="pink"></thumb-up-outline-icon>

<!-- solid with color purple -->
<thumb-up-solid-icon color="purple"></thumb-up-solid-icon>

<!-- ... with size 36 -->
<thumb-up-solid-icon ... size="36"></thumb-up-solid-icon>

<!-- ... with style  -->
<thumb-up-solid-icon ... style="color: green;"></thumb-up-solid-icon>

<!-- ... with tailwind class  -->
<thumb-up-solid-icon ... class="text-blue-400"></thumb-up-solid-icon>

And, all parameters, style, class, color, stroke, and style are reactive, so, you can change the option in realtime by models.

Play with this in https://codesandbox.io/s/test-dimaslzng-heroicons-qvbvh

Feel free to join the repository in Github https://github.com/dimaslz/ng-heroicons, and, that's it, I hope you find it helpful :), feedback is welcome.

Thanks!

Simulating HTTP responses

Dimas López — Sat, 28 Mar 2020 05:19:27 +0000

Hello!, this is my first post here on dev.to. I am never publishing my codes because is a specific process, it is just for the company or a bit impostor syndrome. But today are different, so let’s do it!.

First I need to say that as a software developer, I feel super proactive, I am curious to automatize processes in my work, a few lines of codes that are working for you, and are allowing to focus on the most important stuff. For that, I was thinking that a lot of times, I have used scripts or some services to simulate real data coming from the API. This is a super common case when the developer wants to make an example closer to a real use case.
Normally, when you are working in a frontend, the ideal situation, you should have the contract response with your backend team, for example, a list of items, but, sometimes it is not like this, and the frontend team is affected. Or you need to work in a POC, and you are losing time creating the fake files to emulate the API response. To create it, there are a lot of solutions, but I think the most important to highlight is fakerjs and randomuser.me, super useful projects.

Inspired on these tools, I made a merge in a tool named randomdata.loremapi.io. With randomdata, you can create fake data with the structure schema as you want and paginated as for example, let’s imagine a list of users with the following model:

{
  fullname: string;
  age: number;
  picture: string;
  mobilePhone: string;
  homePhone: string;
}

And you want a list of 50 users, something like:

{
  data: [
    {
      fullname: "...",
      age: "...",
      picture: "...",
      mobilePhone: "...",
      homePhone: "...",
    },
    // ... and 49 more
  ],
}

So, for that let’s go to https://randomdata.loremapi.io to create this response easily. Once you are on the page, scroll down to the “Random data editor” section and create a schema...

...when you think that the schema is ready, click on the “view data response” button to see the response...

After the editor, you have some snippets examples of how to call this schema.

The benefits are you don’t need locals files as users.js and lose your time creating fake data, just con focus on the UI.

If you want to follow more examples, visit this codesandbox demo: https://ssily.codesandbox.io/. Here you will find a list of users with full name, year and picture: all in one page, paginate like ?page=X or paginated by offset and limit like ?offset=X&limit=X

This tool is an extract of the principal project. At the moment it is totally free until we have done the pending features, but don’t be afraid, the price will be low.

Thanks for your time to read this, I hope it can be useful to you. Feedback is welcome, ping me on my twitter https://twitter.com/dimaslz or here in comments.