DEV Community: Roman Vladimirov

Running HTTP(s) queries every day with ArdorQuery: Part 6 global variables

Roman Vladimirov — Mon, 29 Jan 2024 12:52:30 +0000

If you're currently developing a web application, it's highly likely that you have an API, be it a REST API, a GraphQL API, or any other API. This means that HTTP queries must be made daily for development and testing. There are a huge number of tools available for running HTTP queries, such as cURL and Postman etc. I would like to tell you about a tool that I made for myself, but it might be useful for you too, it's called ArdorQuery. In this article, you will learn how to use the ArdorQuery application on a daily basis to make HTTP queries. The application is oriented on keyboard and allows you to separate parts of your query as human-readable lines. Lines are highlighted in different colors depending on the type of content. To get more information about application and install.

Previous post describing the use of multiple queries

So, we have already learned how to create and execute queries, but it often happens that a query consists of parts that are repeated quite often. For example, if authorization in a REST API is based on a token, then most requests require passing a token. Adding a token to each request can be quite tedious, but let's say I created ten requests and added all the tokens to them, but then I had to work with a different token, which means I need to open all ten requests and change the token manually. This is very inconvenient, so you can use another way and define global variables.
To open the global variables window press Ctrl-F6.

Working with this window is similar as we do in editing query. Let's create a new global variable, to add a new variable press Ctrl-Enter. Next, enter apitoken mytokencontent in the empty line. The format of the global variable <variable name> <value>.

After we done with editing global variables need to save it and for this press Ctrl-S. To move through line, you can use PgDown and PgUp (also Ctrl-PgDown to the end and Ctrl-PgUp to the beginning).
After this, you can add a global variable to any value of any field like this {{<variable name>}}, in our case it will be {{apitoken}}. Now we can add the bearer {{apitoken}} header to several requests, and if in the future we need to replace it in all requests at once, it will be enough to change its value through the Global Variables window.

Running HTTP(s) queries every day with ArdorQuery: Part 5 multiple queries

Roman Vladimirov — Tue, 02 Jan 2024 12:12:20 +0000

In previous articles we worked with one query, but in the real world the number of queries we have to work with at the same time is usually more than one. In ArdorQuery you can add any number of queries and switch between them at any time. First, you should learn about the title X field, which allows you to add human-readable descriptions for queries. All queries that do not have a name will be named Unnamed, and if all requests are called that way, you will agree that it will be difficult to distinguish between them.

Now we are ready to make an example. Let's add field title Get todos to our query. Changes will be immediately reflected in the tab header above the editor.

And add URL to get todo item url https://jsonplaceholder.typicode.com/todos/1.

Let's say I need to run another query, but I want to return to the one I already created and continue working with it. To add a new request, you need use Ctrl-Insert. After this, we will immediately move to a new request and it will be empty. Let's fill out a new query, define the request title title Get posts and url https://jsonplaceholder.typicode.com/posts/1. To see what queries there are in the form of a list, you can click on the icon in the tab with the editor's request.

You can click on the corresponding item and it will open.

But besides this, there is another more convenient way.
Navigate between queries — press and hold the Ctrl button, then press and release Tab (T on macOS) to open the history window. The position in history will correspond to the most recently opened query. You can hold down the Ctrl key and press Tab (T on macOS) repeatedly to select the query you want from the list from up to down, and when you release the Ctrl key, the selected query will immediately open. This option is more convenient when you need to switch between queries frequently.

You can also run all queries at once by pressing Ctrl-M. You can track the execution of queries in the lower toolbar.

Running HTTP(s) queries every day with ArdorQuery: Part 4 routes and URL parameters

Roman Vladimirov — Tue, 07 Nov 2023 08:57:19 +0000

A URL path is an integral part of an HTTP request that acts as a path to the desired destination. This applies to both the path described in the manner of folders on the local disk separated by the symbols / (for example /building1/room1/Alice/apple) and additional parameters after the path listed after the symbol ? (like ?color=green&size=large). Both the path and the parameters are described by one continuous line. If the path is long and/or there are many parameters, the one-line representation is not always easy to read. In the application, you can split both the path and parameters into separate lines.

Let's say we have a URL https://mysite.com/products/tablet/product/1?company=samsung&monitorsize=8. Here we choose
for a user with id=1 from the products of a certain store, a product with a category tablet and a filter by company samsung with a monitor size of 8 inches.

Let's now add this URL to the application url https://mysite.com/products/{category}/product/{userid}.
As you can see, we have replaced the category and userid with named parameters ({category} and {userid}). Named parameters are defined in the format {parameter name}.

Next you need to add values for the named parameters. To do this, add a line with the content route category=tablet and another line with the content route userid=1. This way, if we need to change part of route for a category or userid, we can do it on separate lines with a clear name, which is more convenient than doing it in the query string itself.

We forgot something, what about URL parameters? To define them, we add two more lines: param сompany=samsung and param monitorsize=8. If you perform query you will see that we've make query with same URL as in the original form, but now we can change both routes and the URL parameters separately in a more readable form.

Running HTTP(s) queries every day with ArdorQuery: Part 3 HTTP Headers

Roman Vladimirov — Sat, 21 Oct 2023 14:32:55 +0000

If you're currently developing a web application, it's highly likely that you have an API, be it a REST API, a GraphQL API, or any other API. This means that HTTP queries must be made daily for development and testing. There are a huge number of tools available for running HTTP queries, such as cURL and Postman etc. I would like to tell you about a tool that I made for myself, but it might be useful for you too, it's called ArdorQuery. In this article, you will learn how to use the ArdorQuery application on a daily basis to make HTTP queries. The application is oriented on keyboard and allows you to separate parts of your query as human-readable strings. Strings are highlighted in different colors depending on the type of content. More information about application or download. In this part, we will discuss how to work with HTTP Headers.

HTTP Headers are an important part of an HTTP query; using them we can specify many different things, for example what type of content we can accept, how to compress the response and much more.
To add a HTTP Header in an application, add a new line by pressing (Ctrl-Enter). The HTTP protocol has a standard set of headers such as Authorization, Content-Type, etc. Standard HTTP Headers can be specified in the format <Header Name> <Header Value>. For example, to define the request type, you need to write Content-Type application/json. To specify a bearer token, you need to write Authorization Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.

In addition to standard headers, you can use non-standard ones that support only specific websites or services. Some time ago, it was fashionable to add an X- prefix to non-standard HTTP Headers to visually distinguish them from standard ones. The application supports such headers, you can write as example X-MYCUSTOMHEADER 123.

The modern way to add non-standard HTTP Headers is to simply add any words or combinations of words that are not in the standard set and use it on your server. In application you can create new line with following content header <Header Name> <Header Value>.

When sending requests, the application will only add HTTP Headers needed to complete the request. You can override all the standard HTTP Headers if you want to have more control over which headers and values should be part of the request.

Among the standard headers is the cookie header. It represents itself as a dictionary and can contains session specific data. The contents of the dictionary are written as a single delimited string. It is not always convenient to fill out this header as a single line, so you can set values for individual keys for this header creating line with content pastry <cookie key>=<value>. As example pastry TOKEN=MYTOKEN123. But you need to know if you define header Cookie itself, all lines with pastry fields will be ignored.

Running HTTP(s) queries every day with ArdorQuery: Part 2 HTTP Forms and files

Roman Vladimirov — Tue, 17 Oct 2023 18:19:05 +0000

If you're currently developing a web application, it's highly likely that you have an API, be it a REST API, a GraphQL API, or any other API. This means that HTTP queries must be made daily for development and testing. There are a huge number of tools available for running HTTP queries, such as cURL and Postman etc. I would like to tell you about a tool that I made for myself, but it might be useful for you too, it's called ArdorQuery. In this article, you will learn how to use the ArdorQuery application on a daily basis to make HTTP queries. The application is oriented on keyboard and allows you to separate parts of your query as human-readable strings. Strings are highlighted in different colors depending on the type of content. More information about application or download. In this part, we will discuss how to work with HTTP Forms and files in application.

Although the API has practically replaced the need for using HTTP Forms but this does not mean that HTTP Forms are not needed at all. For example, HTTP Forms are a standard file transfer method that is still used in hundreds (and thousands) of websites today. HTTP Forms are a kind of dictionary, where the key is the name of parameter, and the value is the text or binary in case of file.

For defining HTTP Forms in application, we need to define form fields.
To do this, you need to add a new line to the application and fill it as form <field name>=<value> there.
For example, to add a count field with a value of 100, you would create line with the content form count=100.

Add the required number of lines for each required form field.

It is also worth noting that body transfer is only supported for requests using the POST and PUT methods. So you need to add a line specifying one of these methods (like method POST or method PUT). Form fields are added to the request body, which means that if you have defined a request body (using body fields as json X, xmla X, body X), then the form fields will be ignored!

To send a file, you need to create a line with the content file <field name>=<path to file>. For example, to send the file background.png from the c:/myimages/ folder to parameter backgroundimage, you need to add a line with the content file backgroundimage=c:/myimages/background.png. File fields and form fields can be combined in single HTTP Form. Just like for a form field, you need to create a corresponding line for each file.

In the next part I describe how to add HTTP Headers to query.

Running HTTP(s) queries every day with ArdorQuery: Part 1 Intro

Roman Vladimirov — Sun, 15 Oct 2023 14:49:56 +0000

If you're currently developing a web application, it's highly likely that you have an API, be it a REST API, a GraphQL API, or any other API. This means that HTTP queries must be made daily for development and testing. There are a huge number of tools available for running HTTP queries, such as cURL and Postman etc. I would like to tell you about a tool that I made for myself, but it might be useful for you too, it's called ArdorQuery. In this article, you will learn how to use the ArdorQuery application on a daily basis to make HTTP queries. The application is oriented on keyboard and allows you to separate parts of your query as human-readable strings. Strings are highlighted in different colors depending on the type of content. More information about application or download. But less words and more action.

Let's try to make a simple HTTP query.

Launch the application and enter the following into the single text field:
url https://jsonplaceholder.typicode.com/todos/1

Next, press Ctrl-Z to perform the query.

To view the query result, press on F11. You can also switch back to editing the query by pressing F11.

Here we see the status of the execution result and how much time it took to complete the query, the size and headers of the response, as well as response body. In our example, we get the result as JSON. For JSON syntax, the program provides syntax highlighting and formatting.

If for some reason the result in the body is in the form of JSON, but the program could not clearly determine this, then you can select the markup explicitly in the drop-down in the center of the body header.

Autodetect, selected by default, determines formatting based on the contents of the Content-Type response header.

Now let's go back to the query editor and try to send a POST query with a body. To do this, press Tab to return to the query editor. Change the text in the field to url https://jsonplaceholder.typicode.com/todos and remove the /1 at the end. Then press Ctrl-Enter to add a new line and
enter the text method POST into it. This way we indicate that we should not use the GET method, which is used by default, but POST.
To add another string, press Ctrl-Enter and enter json {"container": {"field": 10}} there. This way we indicate that we want to define the body of our request in JSON format and define the content as a simple structure {"container": {"field": 10}}.

Our query is ready, we run it as before, pressing Ctrl-Z and after it press F11 to jump to its result. As a result, you will see in the body of the response the same JSON that we sent in the field where you specified the contents of the body to be sent.
So we were able to set up a simple query, run it, and view the results.

You can check all the keyboard shortcuts by pressing F1.

In the next part we will work with HTTP Forms and files.

5 Vue.js slot tricks to watch out for

Roman Vladimirov — Fri, 06 Jan 2023 18:47:55 +0000

Vue.js is a powerful library for creating user interfaces for web and mobile platforms. It is part of the so-called big three (also Angular and React) libraries for interactive user interface programming. I think you use slots all the time when using Vue.js. It's so simple and intuitive mechanism that it is a pleasure to use it. Slots are everywhere, in libraries, in components, and in scaffolders. But for the most part, everyone uses them only on one side, on the side of consumption, and when creating their components, they are rarely added. In this article I will show you how easy it is to add slots into your own components and a few cases where they can save a couple of lines of code.

Preface

First, what is a slot in Vue.js. A slot is a special communication mechanism between components. Yes, you should think about slots
not as a mechanism for inserting content, but as a mechanism for communication between components. So, in all examples, we will have two components TestParent.vue and TestChildren.vue. I will not use TypeScript and Composition API to keep all examples as simple as possible.
The simplest example of communication through slots:

<!-- TestParent.vue -->

<template>
    <div>
        <test-children>
            <span>World</span>
        </test-children>
    </div>
</template>

<script>
export default function () {
    const TestChildren = <...>;

    return {
        name: `Parent`,
        components: { TestChildren }
    }
}
</script> 

<!-- TestChildren.vue -->

<template>
    <div>
        <span>Hello</span>
        <slot></slot>
    </div>
</template>

As a result, we will get the text Hello World.

In our example, I used the so-called default slot. You can define more slots, for example let's add another slot to indicate an exclamation point.

<!-- TestParent.vue -->

<template>
    <div>
        <test-children>
            <span>World</span>
            <template v-slot:extra>
                !
            </template          
        </test-children>        
    </div>
</template>
<!--
I omitted the script section because it
hasn't changed from the previous example
-->

<!-- TestChildren.vue -->

<template>
    <div>
        <span>Hello</span>
        <slot></slot>
        <slot name="extra"></slot>
    </div>
</template>

The result is Hello World !. Here we have added a named slot called extra where we added an exclamation mark. You can add as many named slots as you want to your component. You can even create them dynamically.

So, we are ready to move on to cases that can be useful in the daily creation of components.

Case 1: Consolidation of functionality

Suppose the TestChildren component displays text with formatting that removes edge spaces (trim operation). It also has an additional slot for displaying additional text. We add additional text in the TestParent component.

<!-- TestParent.vue -->

<template>
    <div>
        <test-children header="Hello">
            <template v-slot:extra>
                {{ parentValue }}
            </template
        </test-children>
    </div>
</template>

<script>
export default function () {
    const TestChildren = <...>;

    return {
        name: `Parent`,
        components: { TestChildren },
        data() {
            return {
                parentValue: 'World!'
            }
        }
    }
}
</script> 

<!-- TestChildren.vue -->

<template>
    <div>
        <!-- Using a formatting method -->
        <span>{{ formatValue(header) }}</span>
        <slot name="extra"></slot>
    </div>
</template>

<script>
export default function () {
    return {
        name: `TestChildren`,
        props: {
            header: String
        },
        methods: {
            // we have added a new formatting method
            formatValue(value) { 
                return value.trim()
            }
        }
    }
}
</script>

All goes well until we get a request to also format the parentValue in the TestParent. The problem here is that the formatting function is in the TestChildren component. You can naturally take out the formatValue function from the component into a separate js / ts file and import it to both components. But what if I will say that you can do this without separating the function into a separate script file. You can use the functionality of the slots to solve this problem. Let's change it so that we can use this function from the TestParent component.

<!-- TestParent.vue -->

<template>
    <div>
        <test-children header="Hello">
            <template v-slot:extra="{ format }"> 
                <!-- call the method to format the value -->
                {{ format(parentValue) }} 
            </template
        </test-children>
    </div>
</template>
<!-- script section stay as in previous example -->

<!-- TestChildren.vue -->

<template>
    <div>
        <span>{{ formatValue(header) }}</span>
        <slot name="extra" :format="formatValue"></slot>
    </div>
</template>

<script>
export default function () {
    return {
        name: `TestChildren`,
        props: {
            header: String
        },
        methods: {
            formatValue(value) {
                return value.trim()
            }
        }
    }
}
</script>

As we see, we got result without using extra files just inside our components. The TestChildren component exposes the function for the TestParent component only in the slot definition.

Case 2: Component without UI

This case is an extension of the previous case to the entire component. Let's say we have a small (or maybe vice versa large) component, but each time it is used, a different representation must be used. A simple example is a button, a button can be in the form of a rectangle and as a link, as an icon, etc. How to solve this problem? We can create a component in which we describe the logic of how it should work (methods and properties) and when using an external component, it will decide which view it should use.

<!-- TestParent.vue -->

<template>
    <div>
        <test-children
            title="Say Hello World!"
            @clicked="fire()">
            <template #default="{ context }">
                <!--
                    We use context to create a view for the button.
                -->
                <button
                    @click="context.click($event)">
                    <span>
                        {{ context.title }}
                    </span>
                </button>
            </template>
        </test-children>    
    </div>
</template>

<script>
export default function () {
    const TestChildren = <...>;

    return {
        name: `Parent`,
        components: { TestChildren },
        data() {
            return {
            }
        },
        methods: {
            fire() {
                window.alert('Hello World!');
            }
        }
    }
}
</script>

<!-- TestChildren.vue -->

<template>
    <div>
        <!-- We put the whole component in the context variable -->
        <slot :context="this"></slot> 
    </div>
</template>

<script>
export default {
    name: `TestChildren`,
    props: {
        title: {
            type: String,
            default: () => ``
        },
        disable: {
            type: Boolean,
            default: () => false
        }
    },
    emits: [`clicked`],
    methods: {
        click($event) {
            if (this.disable) return;
            this.$emit(`clicked`, $event);
        }
    }
};
</script>

The TestChildren component contains a set of properties (title and disable) and a click method. This state and behavior is the same in all buttons regardless of how they look. In this way, we can save code by not creating the same type of components that just look different but have the same functionality.

Case 3: Rollover slots

Let's say we have three components, first SomeComponent in which there are several slots (among which there are header and footer).
It is imported within second TestChildren component and it defines the content for all the slots of the SomeComponent component, plus some functionality. And we have third TestParent component where imported TestChildren. At some point in time, there is a need to change the content for slots in different situations, but only for header and footer everything else remains as is. I have a component (perhaps complex) but I need to somehow definition content for slot from the parent component for the slot of the component nested in different component. Let's take an example, in the TestParent component, I should be able to change the content of the footer slot in the SomeComponent component, which is imported within TestChildren component.


<!-- SomeComponent.vue -->

<template>
    <div>
        <slot name="header" :message="'value is '"></slot>
        <slot name="footer" :value="1"></slot>
    </div>
</template>

<!-- TestChildren.vue -->

<template>
    <some-component>
        <!-- Here we rollover the header and footer slots -->
        <template v-slot:header="{ message }">
            <slot name="header" :message="message"></slot> 
        </template>
        <template v-slot:footer="{ value }">
            <slot name="footer" :value="value"></slot>
        </template>

        <!-- definition for other slots and other stuff -->
    </some-component>
</template>

<!-- TestParent.vue -->

<template>
    <div>
        <test-children>
            <template v-slot:header="{ message }">
                <span style="color: red;">{{ message }}</span>
            </template>
            <template v-slot:footer="{ value }">
                <span style="color: green;">{{ value }}</span>
            </template>
        </test-children>
    </div>
</template>

As a result, we get value is 1 but written in different colors. I draw your attention to the fact that in addition to the slots themselves, I pass the message and value parameters for the slots. This approach allows you to rollover some slots for the parent component from other the component, increasing the customization of the all components.

Case 4: Data change chain

I am using the same components as in the previous example to illustrate the idea. In the previous example, we just rollover from one slot to another the data of the header and footer slots, but what if I tell you that we can change them during the rollover.


<!-- SomeComponent.vue -->

<template>
    <div>
        <slot name="header" :message="'value is '"></slot>
        <slot name="footer" :value="1"></slot>
    </div>
</template>

<!-- TestChildren.vue -->

<template>
    <some-component>
        <template v-slot:header="{ message }">
            <!-- transform message to upper case -->
            <slot
                name="header"
                :message="message.toUpperCase()">
            </slot> 
        </template>
        <template v-slot:footer="{ value }">
            <!-- multiply on ten -->
            <slot name="footer" :value="value * 10"></slot>
        </template>

        <!-- definition for other slots and other stuff -->
    </some-component>
</template>

<!-- TestParent.vue -->

<template>
    <div>
        <test-children>
            <template v-slot:header="{ message }">
                <span>{{ message + ":" }}</span>
            </template>
            <template v-slot:footer="{ value }">
                <span>{{ value / 10 }}</span>
            </template>
        </test-children>
    </div>
</template>

Result: VALUE: 1. Although this example seems to be extremely simple, imagine what can be done based on this idea. For example, destructuring a large object into small ones or vice versa. And note that the scope of such transformations does not go beyond the components, each component is have its own responsibility and knows nothing about data transformations in other components.

Case 5: Combining slots

Let's say we have some component SomeComponent and it has two slots - header, footer. Sometimes it happens that both of these slots must contain the same content. To solve this problem, we will make a TestChildren component which will imported SomeComponent but define only one postcontent slot and insert it into the header and footer slots.

<!-- TestParent.vue -->
<template>
    <div>
        <test-children>
            <template v-slot:postcontent>
                <span>Header and Footer Message</span>
            </template>
        </test-children>
    </div>
</template>

<!-- TestChildren.vue -->

<template>
    <some-component>
        <!-- insert the postcontent slot definition into the header and footer slots -->
        <template v-slot:header>
            <slot name="postcontent"></slot> 
        </template>
        <template v-slot:footer>
            <slot name="postcontent"></slot>
        </template>
    </some-component>
</template>

Thus, from the point of view of the TestParent component, there is only one slot, which is actually multiplied by several places. Although this case seems highly unlikely, if you take a close look at your components, you will most likely find similar cases. For example, the title text of a blog post is repeated at the beginning of the article, in the header, in some kind of drop-down panel, etc.

Afterword

I hope you find my tricks for Vue.js slots was interesting and will be useful for someone.

ArdorQuery release 0.0.6

Roman Vladimirov — Fri, 23 Dec 2022 13:18:36 +0000

ArdorQuery it is a tool for testing HTTP(s) endpoints (inspired from Postman and cURL) oriented on working from keyboard. If you want to know the purpose of the application, you can check other post. In this post I tell you about important updates happend in new version 0.0.6. You can download the new version from this link.

Route field

In modern RESTful services widely used URL with dynamic segments. As example if I have this pattern http://../api/{dynamic-segment}/id.
This approach can be used and for routing (like http://../api/product/id , http://../api/user/id) and as replace for URL parameter (like http://../api/1/id , http://../api/500/id).
For adding dynamic segments in ArdorQuery you need create named dynamic segment in url in format {nameofsegment}.
Example: url https://mysite.com/api/product/{id}/item. After it need create new line (Ctrl-Enter) and type route id=some value. Examples route id=10, route id=8bfe1522–225d-4e30–8c8a-4a7c01209995.
Before the HTTP(s) request is made, the URL will be formatted and any defined dynamic segments will be replaced with the corresponding defined values. Full example:
url https://mysite.com/api/{objectid}/{id}/item
route id=10
route objectid=product
In final it will be URL: https://mysite.com/api/product/10/item
You can also use a segment with the same name more than once, in which case all segments will be replaced with the same corresponding value from the field. Example https://mysite.com/api/{id}/somepath/{id}/prefix/{id}
Of course you can combined route fields with other URL parameters in param fields if you have complex URL.

Generating images

For the most part, you work with one of the bug tracking systems (for example, JIRA) and there are times when you need to
simply to share information about a request without a response, for example, to report the time it took to complete or an error in the request.
Then you can generate an image containing the request settings, the contents of the summary section and the response headers as an image.
To do this, you just need to press Ctrl-8 to save the result to a file and Alt-8 to save the result to the clipboard.
The result might look something like the screenshot below.

OpenAPI exporter

If you need to work with a RESTful API and it supports the description in OpenAPI v3 format, then you can greatly simplify
a life with the help of a new window in the application called “Export from OpenAPI”. In this window you can by specifying the URL address of the scheme and the base address, and generate all the fields of the request for its execution in the main application window. A small disclaimer, in the current version only JSON-based schemas are supported.
Press the F6 button to open the “Export from OpenAPI” window.
In the window, you need to fill in the fields “Scheme URL” (this is the address where the OpenAPI scheme of your service is located) and “Base URL” (this is the address for which the request will be generated).
Then press Ctrl-Z to load the schema and get a list of possible queries.
When the list is received, you can select the request in the list and click on it. After clicking on the request, the export window will close
and in the main window a new request will be created in which the fields from the previously selected request will be generated.
If the list is too large, you can filter the list by entering the desired name in the Filter field. Filtering works by method, route and description, you can also enter multiple filters separated by a space e.g. “get Apples” will filter out all requests with a GET method and Apples in the route or description.
The export window also has its own keyboard commands, the help for which is the same as in the main window opens with the F1 key. The scheme is loaded once and then you can return to the export window again for generating other requests to fulfill. In addition, you can save field settings and in further load them from the Saved Options tab. To save the current set of fields, press Ctrl-Insert. If you want to save settings with a human readable name just put it in the “Title” field otherwise it will be given the same as “Scheme URL”.