teleren/devto huggingface dataset:
Vim/NeoVim as a (very) simple REST client
Published: 2021-04-15 15:32:31

Whenever you need to test APIs, you can probably resort to nice GUIs like Postman or Insomnia. They let you easily create separate projects, separate API paths, and so on. I do not like to leave my editor so often, so sometimes I just want to do the API calls inside it. If you use Vim, you can just run cUrl, httpie or some other HTTP client and paste the output on your buffer. 

The following function is very handy because you can use pretty much any shell command you want and the output will be handily updated in your editor. 

```vimscript
function! Exec_on_term(cmd, pos)
  exec "normal! ma"
  let backup_a=@a
  let backup_b=@b
  let sep = "------"
  exec "normal! ?".sep."\<CR>jV/".sep."\<CR>k\"ay"
  exec "normal! /".sep."\<CR>jO"
  if a:pos == "next"
      exec "normal! O".sep
      exec "normal! jddkko"
  endif
  exec "normal! V/".sep."\<CR>kdO"
  let @b=system(@a)
  execute "put b"
  execute "normal! ?".sep."\<CR>jdd"
  exec "normal 'a"
  let @b=backup_b
  let @a=backup_a
endfunction
nnoremap <Leader>dr :call Exec_on_term("normal", "curr")<CR>
vnoremap <F6> :<c-u>call Exec_on_term("visual", "curr")<CR>
nnoremap <Leader>dn :call Exec_on_term("normal", "next")<CR>
```

For example, if you have the following buffer contents:

```
-----------
curl -H "Content-Type: application/json" \
-X POST  \
https://reqbin.com/echo/post/json \
-s -d '{"sample": "value"}'
-----------
output will be shown here
-----------
```

You just need to go anywhere between the first "-------" line and the second "------" line, and type `<Leader>dr` (in my Vim config, Leader is the comma character, so `,dr` here. It will run the command and show the output between the second and the third "-------" lines:

```
-----------
curl -H "Content-Type: application/json" \
-X POST  \
https://reqbin.com/echo/post/json \
-s -d '{"sample": "value"}'
-----------
{"success":"true"}
-----------
```

If you change the command, it will replace the output. If you do not want to replace the contents, you can add a new entry by using `<Leader>dn`:

```
-----------
curl -H "Content-Type: application/json" \
-X POST  \
https://reqbin.com/echo/post/json \
-s -d '{"sample": "value"}'
-----------
{"success":"true"}
------
output will be shown here
----------
```

You can also run any CLI command, like Python code by using `python -c`:

```
----------------
python -c '
import os
print("this is a python script")
'
----------------
this is a python script
----------------
```
echoAR partners with Ready Player Me to add avatars to XR/3D projects
Tags: startup, showdev, augmentedreality, news
Published: 2021-04-15 15:25:38

![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618499576601/QHp0tsL-7.png)

**EXCITING NEWS!** echoAR (Techstars '19) partners with Ready Player Me by Wolf3D to add avatars to XR/3D projects 🤳
***

In partnership with [Ready Play Me](https://readyplayer.me/) by [Wolf3D](https://wolf3d.io/), echoAR is excited to introduce 3D avatar support. Users of all plans can now create their own 3D avatar, add it to their project, and then instantly stream & see it in AR!

Ready Player Me’s avatar creation platform allows you to build a personal 3D avatar and, with our new integration, you are able to import it directly into your AR/VR/3D project at echoAR, share it with friends, and see it in AR.

## How to set a profile avatar in echoAR?
* Go to the [Profile page](https://docs.echoar.xyz/web-console/profile) in the [echoAR console](http://console.echoar.xyz/).
* An edit button is revealed when hovering over the profile avatar.
* Clicking the edit icon will allow you to create a profile avatar using Ready Player Me.

![2.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1618499660939/L7cE6ngSx.gif)

* When a custom avatar exists, a reset button is revealed when hovering over the profile avatar.
* Clicking the reset icon will allow you to change the avatar back to the default profile image.
* Clicking the upload icon will allow you to add the avatar to your project as a 3D asset.
* After adding a 3D avatar to your project, you are able to [see it immediately in AR](https://docs.echoar.xyz/quickstart/see-it-in-ar) or stream it to your app.

![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618500121229/vOjRjR7Ix.png)


Read more on how to create a profile avatar in our [documentation](https://docs.echoar.xyz/web-console/profile#how-to-set-a-profile-avatar) and see echoAR on [Ready Player Me’s Partner page](https://readyplayer.me/partners).

****

> echoAR (www.echoAR.xyz; Techstars ’19) is a cloud platform for augmented and virtual reality (AR/VR) that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps and content.

![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618499743368/X3FGfqUbn.png)
Zip Pdf Files And Download In Laravel
Tags: laravel, php, vue, webdev
Published: 2021-04-15 15:06:18

In this post we'll see how to create a zip file and download it in laravel.
Let's start
create a controller
```php
php artisan make:controller InvoiceController
```
Now open InvoiceController and create a method __downloadZip()__

```php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class InvoiceController extends Controller
{
    public function downloadZip()
    {
		Storage::disk('local')->makeDirectory('tobedownload',$mode=0775); // zip store here
		$zip_file=storage_path('app/tobedownload/invoices.zip');
		$zip = new \ZipArchive();
		$zip->open($zip_file, \ZipArchive::CREATE | \ZipArchive::OVERWRITE);
		$path = storage_path('invoices'); // path to your pdf files
		$files = new \RecursiveIteratorIterator(new \RecursiveDirectoryIterator($path));
		foreach ($files as $name => $file)
		{
		    // We're skipping all subfolders
		    if (!$file->isDir()) {
		        $filePath     = $file->getRealPath();
		        // extracting filename with substr/strlen
		        $relativePath = substr($filePath, strlen($path) + 1);
		        $zip->addFile($filePath, $relativePath);
		    }
		}
		$zip->close();
		$headers = array('Content-Type'=>'application/octet-stream',);
		$zip_new_name = "Invoice-".date("y-m-d-h-i-s").".zip";
		return response()->download($zip_file,$zip_new_name,$headers);
    }
}


```

Here we are using **ZipArchive()** class , you can read more about this on this [link](https://www.php.net/manual/en/class.ziparchive.php)

Now create a route, open __web.php__
```php
//web.php
use App\Http\Controllers\InvoiceController;

Route::get('/invoice-download',[InvoiceController::class, 'downloadZip']);

```

And that's all... 🤗
Finding and fixing errors in Hasura Cloud
Tags: errorlogging, monitoring, tracing
Published: 2021-04-16 07:29:15

---
title: Finding and fixing errors in Hasura Cloud
published: true
date: 2021-04-15 15:02:35 UTC
tags: ErrorLogging,Monitoring,Tracing
canonical_url: https://hasura.io/blog/finding-and-fixing-errors-in-hasura-cloud/
---

 ![Finding and fixing errors in Hasura Cloud](https://hasura.io/blog/content/images/2021/04/fixing_errors_deep_dive-squashed.jpg)

Serverless architecture is renowned for the difficulty to track and trace errors. Whether it's a customer or a developer reporting unexpected behaviour, the cause of the error is often opaque behind the error handling (ie. "Please contact support"). As Hasura Cloud sits at the intersection of the entire application stack, it becomes a natural place to surface what originally caused the problem in the first place.

## Errors, catch them all

In Hasura Cloud, we have in-depth error handling, available under the monitoring tab. You can trace the protocol, the operation name, the input variables and more, and filter by all of those vectors, to quickly identify which error was experienced and identify the root cause.

In this deep-dive video we'll cover how to use the error monitoring tab in Hasura Cloud to improve customer-service response times and application hardening.

{% youtube A1mV7Ib_jpg %}
What is WordPress?
Published: 2021-04-15 15:00:39

WordPress is one of the world’s most popular website builder. It allows us to easily create websites, blogs, eCommerce stores and many more. If you are feeling curious what is WordPress, then you are at right place.
What is WordPress?
WordPress is an open-source Content Management System (CMS), which allows users to build dynamic websites and blogs.
It began as a blogging platform in 2003 but soon converted into a CMS and later on grown-up as website building platform. Today it powers more than 40% of all websites on World Wide Web.
To sum up, WordPress is a software that we can use to build blogs, websites, and stores to sell anything online.
How is it Different from WordPress.com?
In this blog, when we say WordPress, we are speaking about WordPress.org.
WordPress.com is a different website that offers website and blog hosting service. It was launched by the WordPress’ co-founder, Matt Mullenweg.
WordPress.org is the open-source software used by millions of websites (including Tyuts). On the other hand, WordPress.com is a website and blog hosting platform.
What do We Need to Use WordPress?
We need a web-hosting account and a domain-name to start using WordPress.
All websites need web-hosting. It is the place where all our website files are stored, so that others on the internet can access our website.
A domain-name is our website’s address on the internet (example, tyuts.in).
What Kind of Websites We Can Make Using WordPress?
We can make any kind of website using WordPress.
The following are just some types of websites we can make using WordPress.
Start a blog
Make a small business website
Create an online store
Build a membership community
Sell online courses
Read our other blog Types of Economic Activities and Human Activities and its Classification.
Follow us on Facebook, Twitter and Instagram.
Changes Color, Use Any Icons and Text In CSS::marker
Tags: css, html, webdev, codenewbie
Published: 2021-04-15 14:51:28

:: marker is pseudo-element for use in list-item in ul, li side. So here we made this simple and useful pseudo-element with the help of CSS properties.

In this element, we normally used CSS properties like font size, color, and content to show icons and text. The main part is that::marker to do this entire change. Also, we used to hover selector to change bullets color and icons, text. Following this pseudo-element, you can use behalf of before and after selector and you can save a line of CSS code.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/changes-color-use-any-icons-and-text-in-cssmarker/)
So yea, xent, xent future, are both worthless.
Published: 2021-04-15 14:50:33

if you have been watching my github page, you know I've been inactive for quite a long time, during that period, team donut was disbanded and xent was no more. but well, who said I was done coding???? nah, we doing this again folks. BUT, this time the code will be better, this time the language will work properly, this time xent won't be such a nightmare to use.

That's right, xent is getting an upgrade, and a new name.
xent.fx, github wouldn't let me name it that for some weird reason, But moving on! 

xent.fx has some drastic changes:
- the entire language is being reworked, it will no longer be so strange in terms of syntax.
- plugins will actually be useful.
- macros will be useful aswell.
- variables will be added.
- arrays will be PLANNED.
- conditions and expressions will be added. 
- It's now going to be coded in c++
- Literally everything else is being removed that was previously in xent.

now, onto some information about xent.fx that isn't ( not ) related to the changes mentioned above:
- I have an example of what the code would look like once the first official release is completed.
```
@use[core] %% import core module

cspace _[] { %% declare main code-space, or where the code will run
  core#log["like my example?"] %% it's just console.log in javascript...
}
```



er yea... that's all i can show for right now, Absolutely none of the code has been written yet. BUT i do need some help, since team donut is no longer around, i do not have a team that could help me. if anyone would like to help with the project, please dm me on discord ( Jonyk56#1929 ).

Moving on, have a nice rest of your week, and lets look forward to summer!
Some tips for competitive programmers
Tags: cpp, programming
Published: 2021-04-15 14:43:12

Here I am going to present two methods that can be used for finding maximum among more that two numbers using max() and split a string around any delimiter.

## Use max() for more than two numbers
`max()` is a c++ library function used to calculate maximum among it's arguments. 

**use**
```cpp
cout<<max(4,9);
// output : 9
```

To calculate max among more than two numbers, we usually do this.
```cpp
// calculate max of 4, 8  and 45
cout<<max(max(4,8),45);
// 45
```

But, instead of complacting the code, we car write it like this
```cpp
// calculate max of 4, 8  and 45
cout<<max({4,8,45});
// 45
```

## split a string around any delimiter

Suppose you have a string `str`
```cpp
string str = "This, is, rahul";
```
and you would like to remove the `,` from the string and return all the strings as an array of string
```cpp
// should be
["this","is","rahul"];
```

We can solve this problem using some techniques
```cpp
#include<bits/stdc++.h>
using namespace std;
const vector<string> split(const string& s, const char& c)
{
	string buff{""};
	vector<string> v;
	
	for(auto n:s)
	{
		if(n != c) buff+=n; else
		if(n == c && buff != "") { v.push_back(buff); buff = ""; }
	}
	if(buff != "") v.push_back(buff);
	
	return v;
}

int main()
{
	string str{"the quick brown fox jumps over the lazy dog"};
	vector<string> v{split(str, ' ')};
	for(auto n:v) cout << n << endl;
	
	return 0;
}
```
The code speeks very well.

> Let me know if this can be improved in any way.
A Chat Progressive Web App
Tags: react, javascript, node, webdev
Published: 2021-04-15 14:42:24

Hello everyone,

I made a chat progressive web application with React, NodeJS and firebase, it comes with a lot of features like push notifications.

Follow the link and search for my name "alaa" and chat with me.

The app is very well explained in the github repository.

Don't forget to ALLOW NOTIFICATIONS when you use the app.

WARNING: this app is just an open source project and it doesn't have the feature of deleting your account also you will sign in with your google account so use a fake one you are responsible of giving your data !!!!.

Link: https://whatsappy-app.web.app/ ALLOW NOTIFICATIONS !!!
the app may not run because free limits of firebase or hosting service has been exceeded!!

GitHub: https://github.com/aladinyo/WhatsappyApp 
GIVE ME A STAAR ⭐⭐⭐!!!

Let's discuss the app in the comments.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/le29fztuzhb1cs7zcr82.png" width="600">
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1j3l7gii7qiyq56dd28.png" width="600">
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n65p3ebnyotcux9i77n7.png" width="600">

# Features of the app
* Messaging users in real time.
* You can text messages.
* You can send Images.
* You can send an audio message.
* You click on an image sent in a chat and it will smoothly animate to the center so you can see it.
* You can see if the user is typing or recording.
* You can record an audio and send it.
* You can delete the conversation.
* You can search for users.
* You can see the online status of users.
* You can see the unread messages.
* You will have a seen at the bottom if the user saw your message.
* You have an arrow button that allows you to scroll down the chat you also see the unread messages in it.
* The audio slider is grey when you send an audio message and is green when you receive one and becomes blue if the receiver plays the audio.
* The audio player allows you to see the full time of the audio and if you play it you will see the current time.
* You can receive notifications if a user sent you a message.
* A sound is played when you send a message or receive one in a conversation.
* Another sound is played if you receive a message from another user.
* The app works offline you can use it without internet and you can send text messages only when you come back online they will be automatically sent.
* Finally you can click on the arrow down button at the home page and the web app is installed in your device.
Amazing button hover with CSS
Tags: html, css, webdev, beginners
Published: 2021-04-15 14:38:59

Hello, today I created an Amazing button hover Using HTML & CSS. I hope you like this also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

If you want to more support me then buy me a [coffee](https://www.buymeacoffee.com/nikhilbobade27).

New post :
https://dev.to/nikhil27b/amazing-grid-card-hover-using-html-css-1c3h

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/OJWEbXW %}
The Relaunch of my Portfolio for 2021
Tags: portfolio, webdev, tailwindcss, css
Published: 2021-04-15 14:20:16

My old [portfolio at Kovah.de](https://kovah.de/) has not received any big updates for years. The design was basically the same. I had fancy browser mockups which contained full screenshots of the websites I made. A few weeks ago I decided that it was about time to relaunch my website together with a new logo.

## The new Logo

![Logo of Kevin Woblick](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/feg8z4hori74p6w51gaz.jpg)

The logo represents my primary profession as being a Web Developer: the lower/greater signs (`<` and `>`) are used in HTML, so I wanted them to be the main part of my logo. I tried various other shapes, variations and also colors. But in the end, I found this new logo the most beautiful thing I've created.  
The font used for the logotype and the website is called Nexa, which I bought years ago.

##  The new Website

The new website was built many years ago and the basic layout, the colors and the overall design didn't change much in the past years. The new version comes with fresher colors, modern soft gradients and bold typography.

While the previous version was built with Hugo as the static site generator, I decided to give [Eleventy](https://www.11ty.dev/) a chance as I am not that satisfied with Hugo. Instead of writing CSS on my own, 99% of the site is built with Tailwind CSS. Only a few effects are custom styles.

There is not a single line of Javascript.

[![Screenshot of kovah.de](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1j6s0juy5rv0yss6gtx.png)](https://kovah.de/)

Performance-wise, I am really satisfied with the results, which is not a miracle if you keep in mind that the site is HTML and CSS with some images and a custom font. In fact, images and the fonts are responsible for 90% of the size of the site. However, fonts contain only a small subset of all available characters in the Latin charset. Images are delivered as jpg, webp and avif so the browser can pick the most suitable format.

Googles Lighthouse testifies the performance with a solid 100. 🥳

---

If you have any questions, feel free to ask!
Using indexes to speed up queries in PostgreSQL
Tags: sql, postgres
Published: 2021-04-15 14:19:24

In this post, I am going to explain how you can use indexes to speed up SELECT queries on a PostgreSQL database. Most of what this post covers will apply to any type of SQL database, but the syntax may be specific to PostgreSQL.

I spent the last month at work designing a new database to store chemical substances concentrations in rivers to provide data to the web application I manage. Finally I figured everything out: how many tables to create, how to connect them, which primary and foreign keys to use… and then I queried it from my web application and it took ages to return any result!

Had I spent a month working on something that would make my application unusable? Admittedly, the table that was giving me issues has almost 30 million rows, but everything I read online suggested that shouldn’t be a problem. So how to speed up my queries and make my application responsive?

I had already read about indexes, but I was convinced that since I already had a primary key covering multiple columns (including the one I was using to filter my slow query), it would not make a massive difference. How wrong I was! Adding an index for substance names to my table reduced query times from 23 to 0.4 seconds!

So when is adding an index to a table appropriate? Indexes will massively speed up SELECT queries that filter a fraction of the rows from a table. So if you’re going to use regularly queries that filter a large table based on one column, it makes sense to create an index for that column.
Creating an index for a table in PostgreSQL is very easy: just write 

`CREATE INDEX index_name ON table_name (column_name1, column_name2);`

If you’re repeatedly querying a table for a small slice of rows, a partial index is probably a better choice. Partial indexes only cover a subset of a table’s data, are smaller in size, easier to maintain and faster to scan. In some cases, creating a full column index when you only want to get a small portion of the table can actually slow down your queries. The code to create a partial index in PostgreSQL is:

`CREATE INDEX index_name ON table_name (column_name1) WHERE condition;`

That’s it for now, hope it was useful!
SAWO - One Stop Solution for your Authentication Needs
Tags: authentication, passwordless, sawolabs, security
Published: 2021-04-15 14:16:25

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/put3pmlvzm8nzv7c9q78.jpeg)
Hi
I'm Siddharth from [SAWO Labs](https://sawolabs.com/)

<b>What is SAWO?</b> 
> [SAWO](https://sawolabs.com/) is a B2B2C service-based company whose API Integration enables one-tap authentication on your app (Android, iOS and Hybrid) and web to provide passwordless and OTP-less authentication experience.

<b>What can SAWO do for you?</b>
> Not only does SAWO's API eradicate passwords and OTPs but also the endless inconvenience brought on by the existing authentication alternatives. We offer a customer-centric, standardized, and device-based verification.

- Convenience
  - Go Passwordless in no time: Just 6 minutes to transition towards a passwordless future.
  - Give your developers a break: Easy integration with every popular web, cloud, VPN, remote access gateway, and more.
- Security
  - Biometric Authentication: Additional device based security layer for user convenience.
  - Secure User Authentication: No Saved Data. No Cookies. No Phishing.
- Cost
  - Optimised and personalized pricing. Various modes of payments accepted.

<b>How to integrate SAWO?</b>
> There are 3 ways to integrate login verification within just a few minutes with SAWO:
- Web-SDK Integration
- Android-FIDO Integration
- iOS-FIDO Integration

Checkout our [docs](https://docs.sawolabs.com/sawo/) which will provide you a step wise guide to proceed with the integration.

<b>Support & queries</b>
You can join our [Discord Server](https://discord.gg/TpnCfMUE5P) Community and interact with other developers and can ask for any support you require.

In case of any other query, feel free to reach out to us at community.sawolabs@gmail.com