teleren/devto huggingface dataset:
Convert Canvas To Image | Use with react-image-crop
Tags: javascript, react, angular, webdev
Published: 2023-01-20 19:47:29

sometime we can show data source of image show in canvas do activity like graphics design or like crop image then we need to convert canvas to image. in this example we crop a image 

```
const TO_RADIANS = Math.PI / 180;
export function getCroppedImg(image, crop, fileName) {
    const canvas = document.createElement("canvas");
    let scale = 1;
    let rotate = 0;
    const ctx = canvas.getContext('2d')
  
    if (!ctx) {
      throw new Error('No 2d context')
    }
  
    const scaleX = image.naturalWidth / image.width
    const scaleY = image.naturalHeight / image.height
    const pixelRatio = window.devicePixelRatio
    canvas.width = Math.floor(crop.width * scaleX * pixelRatio)
    canvas.height = Math.floor(crop.height * scaleY * pixelRatio)
    ctx.scale(pixelRatio, pixelRatio)
    ctx.imageSmoothingQuality = 'high'
    const cropX = crop.x * scaleX
    const cropY = crop.y * scaleY
  
    const rotateRads = rotate * TO_RADIANS
    const centerX = image.naturalWidth / 2
    const centerY = image.naturalHeight / 2
    ctx.save()
    ctx.translate(-cropX, -cropY)
    ctx.translate(centerX, centerY)
    ctx.rotate(rotateRads)
    ctx.scale(scale, scale)
    ctx.translate(-centerX, -centerY)
    ctx.drawImage(
      image,
      0,
      0,
      image.naturalWidth,
      image.naturalHeight,
      0,
      0,
      image.naturalWidth,
      image.naturalHeight,
    )
    return new Promise((resolve, reject) => {
      canvas.toBlob(blob => {
        blob.name = fileName;
        resolve(blob);
      }, 'image/jpeg', 1);
    });
  }
```

this is main function to get image file from image ref

```
  const save = async () => {
    setIsLoading(true)
    let image = document.getElementById('crop-image')
    let file = await getCroppedImg(image, crop, filename);
    await changeAvatar(file);
  }
```

the crop has some object

```
  {
    unit: "%",
    width: 30,
    height: 30,
    aspect: 1 / 1
  }
```
when we use any crop library like **react-image-crop** it gives crop values of object then need to how to get cropped image then it helps to find exact image as your need.


In this example we sure to understand how we convert canvas as in image. and use it. thank you.
Getting Started with Serverless☁️🚀
Tags: serverless, aws, lambda, cloud
Published: 2023-01-20 19:39:54



## What comes to your mind hearing about serverless?
Applications without servers? Actually No, serverless applications are with servers but save us from the hassle of managing one.

> **It gives us benefits like**

- No server Management
- Flexible scaling
- Automated high availability without configuring
- No idle capacity

>**One benefit of cloud is its hide the infrastructure layer & let organizations focus on business logics & innovation.**

## AWS has serverless offerings?
Yes, When learning about AWS many consider just lambda as a serverless offering but AWS with lambda provide other so many services too for storage, orchestration services, developer tools etc. Like 🖗

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

_If you want to learn more on serverless I will suggest to follow serverless learning plan on AWS skill builder._
`https://explore.skillbuilder.aws/learn/lp/92/serverless-learning-plan`

Happy Building Cloud Engineers ☁️💻
AWS Cloud Quest: Resource Monitoring Study Note
Tags: aws, cloud
Published: 2023-01-20 19:38:13

This is the DIY challenge of the Resource Monitoring task in AWS Cloud Quest.

### DIY Steps:
1. Create an Amazon CloudWatch alarm with metric `mem_used` -> `PowerPlantMetrics > ImageId, 6 InstanceId, InstanceType`
2. Select `Server_1` with Metric name `mem_used`
3. Add condition
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8dcail1wo3ep319cwqj.png)
4. Add EC2 action
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5itlskc3wjq7irlx3oh0.png)
5. Create alarm
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jmmnkjr04furonf8r9z.png)
An easy win in 2023? Synchronizing dev holidays
Tags: productivity, devops, management, programming
Published: 2023-01-20 19:33:53

{% youtube Y_A_wv70Fkk %}

Programmer burnout is an important thing to prevent. Utilizing company-wide holidays in the right way is one of the best ways to make sure your devs don't burnout, and Shankar Ramaswamy (DataStax), Ben Matthews (Stack Overflow) and Jennie MacDougall (Reprise) are here to tell about how their organizations use holidays. Watch the full Interact panel with host Conor Bronsdon here ► https://www.youtube.com/watch?v=eoiiZIWj514

### Want to cut code-review time by up to 40%? Add estimated review time to pull requests automatically!
*gitStream is the free dev tool from LinearB that eliminates the No. 1 bottleneck in your team’s workflow: pull requests and code reviews. After reviewing the work of 2,000 dev teams, LinearB’s engineers and data scientists found that pickup times and code review were lasting 4 to 5 days longer than they should be.* 

*The good news is that they found these delays could be eliminated largely by adding estimated review time to pull requests!*

### Learn more about how gitStream is making coding better [HERE](https://linearb.io/blog/why-estimated-review-time-improves-pull-requests-and-reduces-cycle-time/?utm_source=Substack%2FMedium%2FDev.to&utm_medium=referral&utm_campaign=gitStream%20-%20Referral%20-%20Distribution%20Footers).

![Start using gitstream today!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xg1l6hxt134px501bf7d.png)
Rust Blog Series: What is Rust programming language?
Tags: rust, programming
Published: 2023-01-20 19:30:48


Rust is a systems programming language that is designed to be safe, concurrent, and fast. It is an open-source programming language that is gaining popularity among developers for its unique approach to memory safety, which eliminates many of the common issues that plague other systems programming languages like C and C++.

One of the most notable features of Rust is its ownership model, which ensures that resources are only accessed in a safe and controlled way. In Rust, each value has a unique owner, and when the owner goes out of scope, the value is automatically cleaned up. This eliminates the need for manual memory management, and greatly reduces the likelihood of common programming errors such as null pointer dereferences and buffer overflows.

Rust also has built-in support for concurrency, which allows for the creation of multi-threaded applications that can take full advantage of modern multi-core CPUs. The language's built-in support for message passing concurrency makes it easy to create concurrent code that is also safe and easy to reason about.

In addition to its focus on safety and concurrency, Rust is also designed to be fast. The language's strict type system and low-level control over memory layout allows for the creation of highly performant code that is on par with C and C++. Rust's built-in support for inline assembly and FFI also makes it easy to interface with existing C and C++ code, allowing for the reuse of existing libraries and frameworks.

Another strong point of Rust is its active and welcoming community, which is made up of both experienced and new developers. The community provides a wide range of resources and support for learning Rust, including documentation, tutorials, and a large number of open-source libraries and frameworks.

Rust is also used in a wide range of applications, from web development to embedded systems, and has been adopted by companies such as Amazon, Dropbox, and Microsoft.

In summary, Rust is a systems programming language that is designed to be safe, concurrent, and fast. Its ownership model and built-in support for concurrency make it easy to create safe and concurrent code that is also highly performant. The language's strong type system, low-level control over memory layout, and active community make it a powerful choice for a wide range of applications.
A short guide on Event Listeners
Tags: webdev, javascript, beginners, tutorial
Published: 2023-01-20 19:26:21

#How it works
Event listeners are used to make an event or action happen when the user does something. For example a common event listner is `click` where when the user clicks something an event or action happens. To make an event listener you have to use the method `addEventListner` on a variable or element. Inside the method is the handler and the function. The handler is what type of eventListner you want like `click`, while the function is the event that happends when you click it. On the example below when we click the header the background goes from red to a green gradient.
###HTML
```html
<html>
<body>
<h1>Click Me!</h1>
</body>
</html>
```
###JS
```js
//We put the h1 element in a variable
var header = document.querySelector('h1');

header.addEventListener('click', function(){
  document.body.style.background = 'linear-gradient(#85FFBD, #FFFB7D)';
});
```
{% codepen https://codepen.io/lensco825/pen/mdjpraY %}
<hr>
## Event handlers
`click` isn't the only handler!

- `dbclick` causes an event when something is double clicked
<br>
- `scroll` causes an event when something is scrolled
<br>
- `change` causes an event when something changes 
<br>
- `mousemove` when the mouse is moving over an element
<br>
- `mouseout` when the mouse stops moving on an element
<br>
- `mousedown` when the mouse is pressing down on something
<br>
- `mouseup` when the mouse is pressing up at something 
<br>
- `drag` when something is being dragged around
<hr>

## Event Attributes
Another way to make an event without the eventListener is with attributes. Some have different names than the handlers like how `dbclick` as an attribute is `ondbclick` but they do the same thing. For example in the codepen above instead of using an eventListener with a `click` handler we'll just make a function where the body turns to a green gradient then make give the header an 'onclick' attribute with the function in it. 
###HTML
```html
<html>
<body>
<h1 onclick="change()">Click Me!</h1>
</body>
</html>
```
### JS
```js
function change()
document.body.style.background = 'linear-gradient(#85FFBD, #FFFB7D)';
);
```
<hr>
#Conclusion
With event listeners you can make you website intereactive and fun to use. If you need more examples on how to use them i made a blog on using mouse events to make a custom cursor and a blog on making a dark mode toggle.
{% embed https://dev.to/lensco825/how-to-make-a-custom-cursor-cursor-hover-effects-1ikg %}
{% embed https://dev.to/lensco825/how-to-make-a-dark-mode-toggle-with-css-and-javascript-4o8e %}
With all that done if you have any questions or things to add comment them below!
InterSystems Developer Tools Contest
Tags: programming, contest, application, tooling
Published: 2023-01-20 19:24:39

Hey Community!

The new contest has been announced, and it's dedicated to creating useful tools to make your fellow developers' lives easier!

Check out the 🏆 **[InterSystems Developer Tools Contest](https://community.intersystems.com/post/intersystems-developer-tools-contest)** 🏆

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

💰 **Prize pool**: 13, 500$

🗓️ 27/01-12/02

And don’t forget to register for the upcoming [kick-off webinar on the InterSystems Developer Tools Contest](https://community.intersystems.com/post/kick-webinar-intersystems-developer-tools-contest).

**Date & Time:** Monday, January 23–12 pm EST | 6 PM CET
Reasons why you should learn javascript
Tags: javascript, webdev, react, node
Published: 2023-01-20 19:22:23

There are many reasons why you should start learning JavaScript, some of the main reasons include:

JavaScript is widely used: JavaScript is one of the most popular programming languages in the world, and it is supported by all modern web browsers. This means that you can use it to create interactive, dynamic websites and web applications that can run on any device with a web browser.

High demand for JavaScript developers: JavaScript is in high demand among employers, as it is used to create a wide variety of web and mobile applications. Knowing JavaScript can open up many job opportunities in web development, software development and other related fields.

Versatility: JavaScript is a multi-paradigm programming language, which means it can be used for a wide variety of programming tasks. This includes front-end web development, back-end web development, mobile app development, desktop app development, and even Internet of Things (IoT) development.

Large and supportive community: JavaScript has a large and supportive community, which means you can find a wealth of resources online to help you learn and troubleshoot problems. This includes tutorials, documentation, and open-source libraries and frameworks.

Easy to learn: JavaScript is relatively easy to learn, especially if you have some experience with other programming languages. And it's also a great language to start with if you are new to programming.

Continuous growth: As technology evolves, JavaScript is also evolving and growing, with new features and capabilities being added regularly. This means that learning JavaScript will be a valuable investment, as you will be able to adapt to new developments and stay up-to-date with the latest trends in web development.

Overall, learning JavaScript is a great choice for anyone interested in web development, software development, and other related fields. It offers a wide range of opportunities, and it's a versatile language that can be used for many different types of projects.
Oden Reactive Store for Mirco Frontend
Published: 2023-10-18 08:14:37

---
title: Oden Reactive Store for Mirco Frontend
published: true
date: 2023-01-20 17:30:00 UTC
tags: 
canonical_url: 
---

# Reactive Store

To leverage the power of reactive programming, we need to be able to store data in a reactive way. This lib provides a simple way to define a reactive store for your micro-frontend application.

## Installation

```
npm i oden-reactive-store

```

## Usage

Define a store which will global accessible and reactive in your application which means when you change state in another component it will be updated in all other components which are using the same store.

```
import {defineStore} from "oden-reactive-store";

export const useCounterStore = defineStore(0)

```

Now you can use the store in your components like this. You can use the store via custom hook `useCounterStore` which will return the current state and a function to update the state like `useState`.

```
import {useCounterStore} from "../store/useCounterStore";

const Counter = () => {
    const [count, setCount] = useCounterStore();

    return (
        <div className="card">
            <button onClick={() => setCount((count) => count + 1)}>
                count is {count}
            </button>
        </div>
    );
};

export default Counter;

```

And you can use your component like this. When you click the counter button it will be updated in all other components which are using the same store.

```
function App() {

    return (
        <div className="App">
            <h1>Reactive Store</h1>
            <Counter/>
            <Counter/>
            <div>
                Counter value will change across all components due to reactive store behavior
            </div>
        </div>
    )
}

```
Best tool to make real time "signalling app" with 3 devices connected
Published: 2023-01-20 19:05:38

Hello guys! 
I want to make an app for ipads where you can signal to eachother.

Lets say device 1 pushes a button, which lights up on device 2. when the button is pressed on device 2 the button turns off again at device 1. It is very important that the devices constantly refreshes to get the "signal" in real time. There is no data source needed to the app, as it is pure visual.

What tool can make this possible? i have tried power apps, but that seems to run a local session on each device.
 
Thanks in advance!
Introducing ComposableNFT
Tags: blockchain, ethereum, solidity, nft
Published: 2023-01-20 19:04:09

We developed, used and tested in the last year an implementation of extensions of the already widely used ERC721 and ERC1155 standards for NFT composability.

This architecture is written focusing on gas consumption efficiency.

We decided to open-source it and we would like to introduce it to the community. 

These extensions permit the attachment and detachment of ERC1155 component (ERC1155C) tokens to and from ERC721 composable (ERC721C) tokens through the use of simple methods.

Using this implementation there are some properties to keep in mind:

- attached component tokens cannot be transfered;
- when a composable token is transfered, all its components get transfered too;
- a composable token can be transfered only if its contract is approved to transfer its components.

Just think about ERC721C as a box and ERC1155C as its contained tokens, so many type of applications can leverage composable NFTs like games, social virtual realities, licensing systems, etc.

- Games can use ERC721C tokens to represent characters and ERC1155C for any type of equipment.
- In social virtual realities ERC721C tokens can represent avatar characters and ERC1155C their accessories.
- In licensing systems ERC721C tokens can represent the basic subscriptions and ERC1155C its additional packages.

The maximum quantity of components that can be attached to an ERC721C token is settable in the constructor, this argument can be set to 0 to handle unlimited number of components, but this is not recommended.

Three more extensions have been developed to handle more specific cases:

- ERC721CUniqueComponents:
  ensures that each attached component token is unique;
    
- ERC721CCompatibleContracts:
  ensures that only component tokens of specific contracts can be attached;
    
- ERC721CMutexComponents:
  ensures that mutually exclusive token cannot be attached.
    

More info and examples can be found on [composablenft.org](https://composablenft.org)
Best Color Websites for Front-end Developers & UI Developers.
Tags: css, cleancode
Published: 2023-01-20 18:42:42


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



Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.

## **1) Gradient Hunt**

http://gradienthunt.com

Gradient Hunt - Beautiful Color Gradients Thousands of trendy color gradients in a curated collection that is updated daily. Get a fresh color gradient for your next design project

**

## 2) Color Hunt
**
http://colorhunt.co

Color Palettes for Designers and Artists. Get color inspiration for your design and art projects.

## **3) Colors and Font**
http://colorsandfonts.com

Color and typography for Web Developers and Digital Designers.

colorsandfonts.com

## **4) Coolors**
http://coolors.co

Coolors - The super fast color palettes generator!

Generate or browse beautiful color combinations for your designs.

**

## 5)ColorKit
**
http://colorkit.co ColorKit - Color Palettes, Gradients, Inspiration, and Color Tools For artists and designers, bring your designs to life with our collection of online color tools and color palette inspiration.

## **6) Grabient**

http://grabient.com Grabient Beautiful and simple UI for generating web gradients.
How to prepare the future as a software engineer
Tags: webdev, career
Published: 2023-01-20 18:40:01

There are multiple rounds of massive layoffs in tech. Software engineers were once considered one of the most secure positions, but not anymore. So, what are you supposed to prepare for the uncertain future? The answer is obvious. Make you irreplaceable.

Here are a few you can do to make yourself more valuable.

## Participate in open-source projects
Involving in open-source projects can seem daunting. Yet, it’s fun and beneficial once you start it. The biggest benefit is you can learn about your topic in depth. I was able to learn more about the CI/CD process and logs by contributing to a few backend projects. Plus, you can learn from more experienced engineers via peer review. This expands my understanding of development in general. Last but not least, open-source contributions are proof of your work. This can be your new resume.

## Build your own projects
Working on side projects sounds boring. Yet, we can’t ignore the benefits. I don’t recommend building an Instagram clone. What I recommend is to build what you wish you had. As a software engineer, you may have ideas, but you may have never implemented them. “This sucks”, “How this poor service makes money?”. Fix them, publish them. Your side projects can be your full-time in the future. At least, you will learn way more about engineering than watching Udemy courses. Your project will make you stand out among the crowd.

## Study data structures and algorithms
I observed a ton of engineers don’t like to work at their current places, yet they stick to it as they are more afraid of technical interviews. Whether you like it or not, tech companies still do a technical round to find the best candidate. I don’t say it’s the best approach to finding great candidates. Yet, it's the price you have to pay for opportunities. For those who want to learn data structures and algorithms, I'm writing everything about tech interviews here → Ace Interview. Star it and use it for your own sake.

Conclusion
If you are preparing for yourself, you should never worry about your job. Life can be uncertain, yet we can still remain calm if we are willing to.

If you like this content, follow @bitethecode or [Github](https://github.com/bitethecode)
How to Send Emails in Django: A Step-by-Step Guide
Tags: python, programming, django, beginners
Published: 2023-01-20 18:33:40

Django is a popular web framework for building web applications in Python. One of the common tasks when building web applications is sending emails. In this blog post, we will learn how to send emails in Django.

First, we need to configure the email settings in the settings.py file. We can use the built-in EmailBackend or use an external service like Gmail or Amazon SES. Here's an example of how to configure the email settings using the built-in EmailBackend:

```
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER = 'your_email@gmail.com'
EMAIL_HOST_PASSWORD = 'your_password'
```

Once the email settings are configured, we can use the built-in send_mail function to send emails. Here's an example of how to use the send_mail function:

```
from django.core.mail import send_mail

send_mail(
    'Subject',
    'Here is the message.',
    'from@example.com',
    ['to@example.com'],
    fail_silently=False,
)
```

The send_mail function takes five arguments:

Subject: The subject of the email.
Message: The message of the email.
From email: The email address of the sender.
List of recipient emails: A list of email addresses of the recipients.
fail_silently: A boolean value that indicates whether to raise an exception if the email fails to send.
You can also use the EmailMessage class to create more advanced emails with multiple recipients, cc, bcc, attachments and headers.

```
from django.core.mail import EmailMessage

email = EmailMessage(
    'Hello',
    'Body goes here',
    'from@example.com',
    ['first@example.com', 'second@example.com'],
    ['bcc@example.com'],
    reply_to=['another@example.com'],
    headers={'Message-ID': 'foo'},
)

email.send()
```

That's it! With these simple steps, you can send emails in Django. You can also use other libraries like Celery to handle sending emails asynchronously.

Thank You
Shivam Rohilla | Python Developer