teleren/devto huggingface dataset:
Clock
Published: 2022-08-09 13:54:00

> **The Website:** [Link](https://mazhugasergei.github.io/clock/)

So I made a clock. At first I was trying to code it via React but couldn't find the way to create infinite loop that would start after page initial render - React was spamming error messages in the console if using `useEffect` and it wasn't even allowing page to load if using recursive function.

And I used recursive function in common HTML project. Luckily it worked and it wasn't too difficult do code a clock hands. In few words, recursive function was just checking every 1/10s current system time and setting angle for the hands using simple formula:
```
angle = 360 / marks_num * time_value
```
where `marks_num` is the number of current hand's marks (for hours it's 12, for minutes and seconds it's 60)

We also have to make out hands to move smoothly (optional for seconds) so we also add the current state of lower time dimensions.
For hours it's:
```
minutes / 60 + seconds / 3600
```
For minutes it's:
```
seconds / 60 + milliseconds / 60000
```

So as the result it looks like this:
```
document.querySelector('.h-hand').style.transform = "rotate("+30*(now.getHours()+now.getMinutes()/60+now.getSeconds()/3600)+"deg)"
document.querySelector('.m-hand').style.transform = "rotate("+6*(now.getMinutes()+now.getSeconds()/60+now.getMilliseconds()/60000)+"deg)"
document.querySelector('.s-hand').style.transform = "rotate("+6*(now.getSeconds())+"deg)"
```




#The Full Code
>**GitHub:** [Link](https://github.com/mazhugasergei/clock)
Pendulum Ecosystem Grant Program 💰
Tags: grant, blockchain, webassembly, web3
Published: 2022-08-09 13:45:54

🚀 The Pendulum Grants Program will provide funding to support initiatives that aim to help establish the missing link between fiat and DeFi!

**Why apply for a grant with Pendulum?**

- Financial support 💰
- Footprint in the DotSama ecosystem
- Grow your network with introductions to our tech, marketing and community connections

**Projects we want to fund**

We are interested in funding ecosystem projects such as:

1. **General purpose AMM:** Either a unique offering or a rewrite of one the popular open-source AMMs (Curve, Uniswap) in Wasm or as a Substrate pallet.
2. **Lending protocol:** To provide safe, secure and sustainable avenues for fiat token holders to put their fiat tokens to work.
3. **Stable fiat tokens:** Bring your stable fiat tokens to Pendulum or or build them on Pendulum itself. On/off ramping to the banking world is a big bonus.
4. **Yield Optimizer:** A similar kind of yield optimizer to yearn.finance and beefy.finance developing innovative yield earning strategies on Pendulum.
5. **On/Off Ramps:** Reliable on/off ramps with regional banks.

**Application**

Please fill in this [form](https://pendulumchain.org/ecosystem-grants/requirements). You can keep it short and simple at this stage. Share anything that you find relevant, and we will get back to you quickly with our feedback. Grants will be paid with USDC and are milestone-based. We look forward to hearing from you! Feel free to reach out to us with any questions via our [socials](https://linktr.ee/Pendulum_Chain).

---
**About Pendulum**

Building the missing link between fiat and DeFi through a fiat-optimized smart contract blockchain based on Polkadot’s Substrate. Allowing traditional finance fiat services to integrate with DeFi applications such as specialized forex AMMs, lending protocols, or yield farming opportunities. Developed by SatoshiPay.

_Keep your eyes on the Pendulum!_
Open-sourcing Yandex-tracker-action: automate status changes on the Yandex Tracker board
Tags: opensource, python, devops, writing
Published: 2022-08-09 13:44:07

At the moment, Yandex Tracker can not automatically move tasks around the board, so you have to move tasks yourself, which is not always convenient.

But we have developed an open-source solution! Use [Yandex-tracker-action](https://evrone.com/yandex-tracker-action) — it communicates with the Yandex API under the hood and moves tasks.
Azure WebJobs, Service Bus and Managed Identity: Lesson learned
Tags: azure, csharp
Published: 2022-08-09 13:20:02

Today I was converting some Azure webjobs to connect to Azure Service Bus using managed service identity (MSI).

The application is a simple C# Azure WebJob built using the Azure WebJob SDK that subscribe to a topic and process incoming message writing to a database.

> These are the nuget packages used:
- Microsoft.Azure.WebJobs v 3.0.33
- Microsoft.Azure.WebJobs.Extensions.ServiceBus v 5.6.0
Please note that since Azure Functions are built on top of the WebJobs SDK, you may encounter the same issue there, I haven't verified though.

In order to grant the required permission, I created a security group and added the managed identity of the app service to the group, then I proceeded to grant this service group the [Azure Service Bus Data Owner](https://docs.microsoft.com/en-us/azure/role-based-access-control/built-in-roles#azure-service-bus-data-owner)

According to the description, this role should have full access to the whole Service Bus namespace, so imagine my surprise when I tried to run the application and got an error that looks like the following:

```
Unauthorized access. 'Listen' claim(s) are required to perform this operation. 
Resource: 'sb://{namespace-name}.servicebus.windows.net/{topic-name}/subscriptions/{service-name}'.
TrackingId:4e956a067b044b1089b5e327c0d08fd0_G9, SystemTracker:gateway7, Timestamp:2022-08-05T15:32:58 
```

After several trial and error, this is what I found:

1. If you assign the permission **Azure Service Bus Data Owner** to a group and the managed identity of the application is part of the group, it won't work, no matter which permission you grant ❌
2. If you assign the managed service identity the permission **Azure Service Bus Data Owner** it won't work ❌
3. If you assign the permission **Azure Service Bus Data Receiver** to a group and the managed identity of the application is part of the group, it will work ✅
4. If you assign the managed service identity the permission **Azure Service Bus Data Receiver**, it will work ✅

> Please note it may take up to 5 minutes for the permission changes to be applied, so you may still experience failures after applying them.

The only way to get it working was to assign the managed identity the **Azure Service Bus Data Receiver** role to either the service identity or the security group.

This seems either a bug in the Azure SDK or in the Service Bus itself, I'm not the only one that ran into this [issue](https://github.com/Azure/azure-sdk-for-net/issues/24289) and here you can find additional information.

Till the next time.
openGauss--user
Published: 2022-08-09 11:24:00

user
Use CREATE USER and ALTER USER to create and manage database users. openGauss contains one or more named databases. Users and roles are shared across openGauss, but their data is not. 
That is, users can connect to any database, but when the connection is successful, any user can only access the database declared in the connection request.

Without separation of powers, openGauss user accounts can only be created and deleted by system administrators or security administrators with the CREATEROLE attribute. With separation of powers, user accounts can only be created by the original user and the security administrator.

Users are authenticated when they log in to openGauss. Users can own databases and database objects such as tables, and users and roles can be granted permissions on these objects to control who can access which object. In addition to system administrators, users with the CREATEDB attribute can create databases and grant permissions to those databases.

Create, modify and delete users
To create a user, use the SQL statement CREATE USER.
For example: create user joe, and set the user to have the CREATEDB attribute.
`postgres=# CREATE USER joe WITH CREATEDB PASSWORD "Bigdata@123";
CREATE ROLE`

To create a system administrator, use the CREATE USER statement with the SYSADMIN option.

To drop an existing user, use DROP USER.

To change the user account (for example, rename the user or change the password), use ALTER USER.

To see a list of users, query the view PG_USER:

`SELECT * FROM pg_user; `

To view user attributes, query the system table PG_AUTHID:

`SELECT * FROM pg_authid; `

private user
In the scenario where there are multiple business departments, different database users are used for business operations between departments, and a database maintenance department at the same level uses a database administrator for maintenance operations, the business department may wish to perform maintenance operations without authorization. , the administrator user can only perform control operations (DROP, ALTER, TRUNCATE) on the data of each department, but cannot perform access operations (INSERT, DELETE, UPDATE, SELECT, COPY). That is, for administrator users, the control rights and access rights of table objects must be separated to improve the data security of ordinary users.

In the case of separation of powers, administrators do not have permissions to tables placed by other users in their respective schemas. However, this non-authority includes non-controlling authority, so it cannot satisfy the above demands. For this purpose, openGauss offers a private user scheme. That is, in the non-segregation of powers mode, create a private user with the INDEPENDENT attribute.

`CREATE USER user_independent WITH INDEPENDENT IDENTIFIED BY "1234@abc";`

For the object of this user, the system administrator and the security administrator with the CREATEROLE attribute can only perform control operations (DROP, ALTER, TRUNCATE) without their authorization, but do not have the right to perform INSERT, DELETE, SELECT, UPDATE, COPY, GRANT, REVOKE, ALTER OWNER operations.
LET TALK ABOUT #TUPLE IN PYTHON
Published: 2022-08-09 13:03:00

- Tuples in Python

A Tuple is a collection of Python objects separated by commas. In someways a tuple is similar to a list in terms of indexing, nested objects and repetition but a tuple is immutable unlike lists which are mutable.

OR

Tuple is one of 4 built-in data types in Python used to store collections of data, the other 3 are List, Set, and Dictionary, all with different qualities and usage. A tuple is a collection which is ordered and unchangeable.

Below are 6 different  example on TUPLE

#python #pythonprogramming #pythondeveloper 
#pythonlearning #pythonprogramminglanguage 
#pythoncoding #python3 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zjiy00twdfnq0n23cf0.jpg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95sl8ycyud945894uahv.jpg)


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xu29i4wvig4auf5yef4.jpg)


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oaxww25xzwq9eu21kzt4.jpg)
Custom double range slider
Tags: html, css, javascript, frontend
Published: 2022-08-09 12:50:00

To create our custom slider we will make use of the native input type range, well, two of them. The idea in a nutshell is to hide the inputs and set / update visually our custom slider based on the values of those inputs.

## HTML
Our structure will consist of 3 sections: 
- the text labels holding the values
- the inputs
- the custom slider (thumbs, track and the range between)

## CSS
The main idea is pretty straight forward, visually hide the inputs and place our custom slider elements on top of the inputs. 

## JavaScript
We will initialise and hydrate our custom slider with the default input values and then listen for any input change so we can visually update the custom slider and the labels.

In order to achieve this we will write some functions 

`setLabelValue(label, input)` this function takes a label together with an input. It sets the label inner text to the input's value, and will run every-time the value of the input changes

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

To visually set the value of our custom slider we will separate the logic into two functions, one for each side, since each calculates its values slightly different.

let's have a look at the start / left-side function.

`setStartValueCustomSlider(inputStart, inputEnd, pseudoEl, range)` it includes both inputs because we need to prevent our start value to go past inputEnd's value. 

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

In code it would look something like:
```
 const maximum = Math.min(parseInt(inputStart.value), parseInt(inputEnd.value) - 1);
```

Next, we proceed to calculate our percentage based on the input's values so we update our UI.

```
 const percent = ((maximum - inputStart.min) / (inputStart.max - inputStart.min)) * 100;
```

Now that we know the current position, we can go ahead and visually update our thumb and the range aka what is in between both of thumbs.

```
pseudoEl.style.left = percent + '%';
range.style.left = percent + '%';
```

Last, we need to run these two functions whenever the inputs value change, we do this by listening to the "input" event on each input. 

```
inputStart.addEventListener('input', () => {
  setStartValueCustomSlider(inputStart, inputEnd, thumbLeft, rangeBetween);
  setLabelValue(labelMin, inputStart);
});
  
inputEnd.addEventListener('input', () => {
   setEndValueCustomSlider(inputEnd, inputStart, thumbRight, rangeBetween);
   setLabelValue(labelMax, inputEnd);
});
```

(The end / right-side function is quite similar, you can inspect it in the demo below.)

[demo](https://codepen.io/sarmunbustillo/pen/XWEYERa)



Thank you!

you can find me here [My Twitter] (https://twitter.com/sarmunbustillo?t=pztqXmT7DH2pa9lDLjfrdQ&s=09)
How to create a container component
Tags: javascript, typescript, nextjs, tutorial
Published: 2022-08-09 12:45:00

Need to create a component that can take in other components/elements as children or just a component that wraps your app? Well you're in luck, here's a short tutorial on how to do it.

A really straight to the point answer is having your component have a prop with a type `JSX.Element`

```
const Card = ({ children }: { children: JSX.Element }) => {
  return (
     <div>
       { children }
     </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Card>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
      </Card>
    </div>
  );
}

```
I made 90+ high-quality illustration packs, totally free. Use it anywhere without attribution.
Published: 2022-08-09 12:36:00

Hey everyone,
 
I know that all of you are working on exciting products. To help you make them a bit more beautiful, I have made 500+ illustrations and 90+ high-quality illustration packs.
 
As the title suggests, they are:

1. Totally free

**2. Absolutely need NO attribution :)**



Here's the link: [Scale](https://flexiple.com/illustrations/)!

---

###What's new in Scale 3.0?
- Select illustrations across 90+ illustration packs
- Now you can tweak 3 colors in the illustration
- Filter illustrations by Gender

Have fun and buildd great projects!
Use cache.modify to update appolo graphql client
Published: 2022-08-09 12:35:00

```

update(cache, { data }) {
      cache.modify({
        fields: {
          getCommentsByPostId(existingComments = []) {
            if (data.comment) {
              return [data.comment, ...existingComments]
            }
            return existingComments
          },
        },
      })
      cache.modify({
        // find the ID
        id: cache.identify({ id: data.comment.postId, __typename: 'Post' }),
        // update the fields you need to
        fields: {
          commentCount(oldCount, { readField, toReference }) {
            return oldCount + 1
          },
        },
      })
    },

```
The fastest way to develop your projects
Tags: webdev, programming, beginners, tutorial
Published: 2022-08-09 12:18:34

## Who is this method for?

I prefer to tell you that this method is designed best for people who call programming their side hustle however they are keen on converting from a hobbyist to a professional. Some examples can be a student in 10th grade immersed in studies who finds relief in code (me) or a person working at another boring job (according to him) and wants to code but his tight schedule buries him.

All in All this method is for people who can't find enough time to code and are beginners in this field. Learning new frameworks and technologies.

## What the method is?
I recommend you not to code on your **normal workday or school day**. i.e not to work on any development project. Instead plan your project what tech are you going to use -: what the homepage will look like, what will the models look like, what the routes will look like. Write these down in a notebook or diary and then learn the technologies you shall use in the project.

On a weekend or holiday. Sit down take your notebook up and have 2-3 hours of uninterrupted code time. Write down again what you did, how did it go, what you are weak at, how can you solve these problems, what else do you need to work at.

This way you will not spend much time actually programming, but a whole lot of time in thinking about code. You can solve entire bugs, without touching your code in your head the next 6 days. You can take important decisions without a monitor in front of you.

## Why should this work?

This should work because, it's not writing code which is hard it is planning that drives people crazy. This is will force you to spend a whole lot of time at planning and learning and then brutally applying your learning at a single go. This is time efficient as well. Writing your thoughts takes no more than about 20 minutes. You can do this the time you wake up or the time you retire to bed.

Also, writing has miraculous powers, by actually writing what you want to do helps you accomplish your goals. It also helps to spark off a chain reaction of creative thoughts which can change the direction of your upcoming project for good entirely.

## Conclusion

I personally use this method all the time. I maintain a checklist of things to do, and set a deadline. On long holidays like summer vacations. I code everyday while planning. Also this method will help you escape the tutorial hell. Just read a tutorial and then start coding on your own project obtaining help from the tutorial, (not following along).

It is up to you at the end of the day. If you feel the urge to code everyday. It's all up to you.
Graphman: generate a postman collection for any GraphQL endpoint
Tags: postman, api, graphql, tooling
Published: 2022-08-09 12:00:49

_tl;dr we released [github.com/Escape-Technologies/graphman](https://github.com/Escape-Technologies/graphman), a free and open source tool that generates a Postman collection for any GraphQL endpoint in seconds_ 👨‍🚀

We use GraphQL with Postman a lot in our team. GraphQL is pretty verbose and we found it quite painful to write all the queries by hand when interacting with any new endpoint.

So we created Graphman, a tiny utility that uses GraphQL's introspection capability to generate a full Postman collection for any GraphQL endpoint.

Happy to release this to the community as a free and open source dev tool 🤟 

Link to the repo: https://github.com/Escape-Technologies/graphman

If you use GraphQL, feel free to help us by staring and contributing 🤩
Intro to Big O
Published: 2022-08-09 11:56:20

Before I start talking about Big O it's good to know why do we need to know about it.

Let's assume that we have to different algorithms. How do we know which one is more efficient? how do we compare them? Here is where Big O comes into play.

Big O is a set of rules and terms that allows us to describe, classify, analyse, compare and discuss how efficient an algorithm is. **It describes how the runtime of an algorithm grows as the input grows.**

**Some Big O complexities**

**O(1)**

_Constant time_ the runtime does grow as the input grows. If your algorithm has this complexity, probably can't do it better.

For example, this function has O(1) complexity, because the runtime its not affected as the input grows. It always do one operation if we use `sum(1, 2)` or `sum(100000, 1000000)`.

```javascript
function sum(n1, n2) {
  return n1 + n2
}
```

Operations that are considered constant:
1. Assigning variables
2. Arithmetical operations
3. Accessing element in an array by index
4. Accessing values in object by key

**O(n)**

_Linear_ The runtime is bound to the input size, the runtime will grow as the input grows. Most of the times, these type of algorithms has some sort of looping mechanism(for, while, recursion).
In a loop, the complexity is the length of the loop.

```javascript
function logNumbersUntil(n) {
  for (let i = 0; i < n; i++) {
    console.log(i)
  }
}
```
Monkey Type
Tags: monkeytype, typingtest, test, typingclub
Published: 2022-08-09 11:23:31

[Monkey type](https://monkey-type.org) is also known as typing test tool. This allows you to increase your typing speed. In this tool you can set the time as you want. Also you can change the time. This is a great tool to improve your typing speed. This monkey type tool is easy to access and is a fun tool.

The average individual type is between 38 and 40 words per minute (WPM). It translates to 190 to 200 characters per minute (CPM). However, expert typists type very fast, averaging between 65 and 75 WPM. Let’s see with monkey type tool how many typing speed you have.

A typical professional typist typically works at speeds of 43 to 80 wpm, for some positions 80 to 95 (usually the minimum required for dispatch settings as well as other time-sensitive typing work) and some advanced typists work at rates above 120 wpm. Let’s see with monkey type tool how many typing speed you have.

**Is typing 20 wpm good?**

Typically, people have about 35 to 40 WPM or 190 to 200 characters per minute (CPM). Expert typists have to type very quickly with an average of 65 to 75 WPM or higher. With that in mind, typing at 20 WPM is bad, and if you want to be skillfully kind, it's considered straight-out inappropriate. You can speed up your typing using the Monkey Type tool.

**How do you type faster?**

To type faster, you need to learn how to place yourself properly, use all your fingers, press the best key without looking and avoid mistakes. If you do not understand any of these types, you will benefit from the typing test. You can speed up your typing using the Monkey Type tool.

**How is typing speed measured?**

Entering speed is measured by the variety of words that you can type correctly in a given time. One "word" is the equivalent of five keystrokes. During the test, both speed and accuracy are measured. You will definitely get your common word per minute (WPM) as well as the number indicating your accuracy. When you complete a 1-minute, 3-minute or 5-minute typing test, you will definitely have the ability to publish a certificate. You can speed up your typing using the Monkey Type tool.