teleren/devto huggingface dataset:
How to Integrate the Angular Signature Pad with a Toolbar
Tags: webdev, angular
Published: 2023-11-10 10:01:54

Learn how to integrate the Angular Signature Pad with the Toolbar component. You’ll also see how to use many of its customization options. 

The Angular Signature Pad is a graphical interface that allows users to draw smooth signatures as vector outline strokes using variable-width Bezier curve interpolation. It allows you to save signatures as images and vice versa. You can use your finger, pen, or mouse on desktop and mobile devices to draw your own signature. 

The Signature Pad control supports various customization options: background color, background image, stroke color, stroke width, save with background, undo, redo, clear, read-only, and disable. In this video, each toolbar item illustrates the Signature Pad component functionalities. 

Use the Undo button or Ctrl + Z key combo to revert your signature, the Redo button or Ctrl + Y key combo to remake your reverted signature, and the Save button or Ctrl + S key combo to store your signature as an image file. Use a stroke color picker and background color picker in the Signature component to apply those aspects. Users can utilize the stroke width drop-split button values to change the signature stroke width. 

The variable stroke width is based on the values of the maximum stroke width, minimum stroke width, and velocity for smoother and realistic signatures. The default value of the minimum stroke width is 0.5, the maximum stroke width is 2.5 and the velocity is 0.7. Use the Clear button to clear the signature. You can also check the Disabled checkbox to disable the Signature component. You can save the signature as an image to formats like PNG, JPEG, and SVG. 

**Download an example from GitHub:** https://github.com/SyncfusionExamples/how-to-integrate-the-angular-signature-pad-with-the-toolbar

**Documentation on the Syncfusion Angular Signature Pad component:**
https://ej2.syncfusion.com/angular/documentation/signature/user-interaction

{% youtube ZuSSpp1dR44 %}
Unit Test
Published: 2023-11-10 14:57:17

### Jest
I used `Jest` to add unit tests in my typescript project, which is straight-forward and I used to work with `Jest` before, I felt it was handy.

### What is Jest?
Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase. 

### Jest with Typescript
#### Prerequisite
```bash
npm i -D jest typescript
```

#### Step1
```bash
npm i -D ts-jest @types/jest
```

#### Step2
```bash
npx ts-jest config:init
```

#### Step3
Create `{file_name}.test.ts` for unit testing and run the following command.

```
 "test": "jest -c jest.config.ts --runInBand --",
 "test:watch": "jest -c jest.config.ts --runInBand --watch --",
```

`npm run test` command is to run all unit test files such as `{file_name}.test.ts` and `npm run test:watch` is to keep watching your test results when you fix your code. 


Also, you can check the coverage based on your unit testing and it shows how many unit test covers your code, this is the script for checking coverage:
```
  "coverage": "jest -c jest.config.ts --runInBand --coverage"
```

### Learning Opportunity
When I started with my project, my priority was to implement functionalities and run the project properly, so I really didn't think about edge cases and fail cases. Always assume that my app is working properly. However, this time I found out I missed lots of error handling function by using `try` and `catch`, so I refactored my codes and improved the quality of my project. Also, I realized unit testing is much harder and more important than implementing the features. It requires more energy and effort to verify my project works properly. I'll be getting used to unit testing and next time I'll implement an integration test with Github actions
Digital Empire: Mobile App Development in New York
Published: 2023-11-10 15:56:59

Energize your business with cutting-edge [app development services in New York](https://www.technbrains.com/locations/mobile-app-development-new-york/)'s vibrant and dynamic landscape, tailored to redefine your digital presence.

**Reach Out To Us**

Email: contact@technbrains.com
Call: 833-888-8370

**Social Links**

Facebook

https://www.facebook.com/pages/category/Software-Company/Technbrains-100478948441594/

Twitter

https://twitter.com/technbrains

Instagram

https://www.instagram.com/technbrains/

LinkedIn

https://www.linkedin.com/company/technbrains
Python - Use Hash Tables (Dictionaries) for Fast Data Retrieval
Tags: python, programming, beginners, tutorial
Published: 2023-11-24 15:30:00

Hash tables, often implemented as dictionaries in Python, are a fundamental data structure for efficiently storing and retrieving data. They provide constant-time average-case lookup, insertion, and deletion operations, making them valuable for various applications. Here's an example:

```python
def count_elements(arr):
    element_count = {}  # Create an empty dictionary to store counts

    for element in arr:
        if element in element_count:
            element_count[element] += 1  # Increment count if element exists
        else:
            element_count[element] = 1  # Initialize count if element is new

    return element_count

# Example usage:
my_list = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4]
result = count_elements(my_list)
print(result)  # Output: {1: 1, 2: 2, 3: 3, 4: 4}
```

In this example, we use a dictionary (`element_count`) to efficiently count the occurrences of elements in a list. We iterate through the list, checking whether each element exists in the dictionary. If it does, we increment its count; otherwise, we initialize it with a count of 1. This approach provides a straightforward and efficient way to compute element frequencies.

Hash tables are versatile and can be applied to various problems, such as caching, frequency counting, memoization, and more. Leveraging Python dictionaries effectively can lead to clean and performant solutions in many scenarios.
EP 5 - Conditionals and Booleans
Tags: interpolation, conditionals, php
Published: 2023-11-11 13:18:28

So interesting lesson where we touch again on string interpolation and introduce booleans and conditionals.

I solved task myself first by including conditional logic inside h1 like this: 

```PHP
<body>

<?php
$name = "Dark Matter";

$read = true;
?>

<h1>

<?php
if ($read){
echo "You have read $name";
}else {
echo "You have NOT read $name";
}
?>
</h1>
</body>
```

Jeffrey did it afterwards in more effective way I think with separating conditional logic and putting it inside first php tag before h1 and also by introducing $message variable like this :

```PHP
<body>
<?php

$name = "Dark Matter";
$read = false;

if ($read){
$message = "You have read $name";
}else {
$message = "You have NOT read $name";
}
?>

<h1>
<?php
echo $message;
?>
</h1>
</body>
```

So basically we are only echoing out our variable inside h1 tag and keeping conditional logic in separate php tag. More elegant solution I guess.
React কেন বর্তমানে বেশি জনপ্রিয়?
Tags: react, javascript, programming
Published: 2023-11-11 18:18:24

May 29, 2013, প্রথম রিলিজ হওয়ার পরেও React বর্তমানে বেশি জনপ্রিয় UI লাইব্রেরি। অত্যন্ত জনপ্রিয় হওয়ার  হওয়ার বেশ কয়েকটি কারণ রয়েছে। এই কারণগুলির মধ্যে রয়েছে:


**Performance**: React শুধুমাত্র সেই অংশগুলিকে পুনরায় রেন্ডার করে যা প্রয়োজন, যা ওয়েব অ্যাপ্লিকেশনগুলিকে আরও fast এবং আরও efficient করে তোলে।


**Community & support**: React এর একটি শক্তিশালী Community রয়েছে। এই Community টি ডেভেলপারদের জন্য বিভিন্ন রিসোর্স এবং সহায়তা প্রদান করে, যার মধ্যে রয়েছে ডকুমেন্টেশন, টিউটোরিয়াল, এবং প্যাকেজ।  এটি ডেভেলপারদের সমস্যা সমাধান এবং নতুন concept শিখতে সহায়তা করে।


**Easy to learn**: React শিখতে তুলনামূলকভাবে সহজ। এটি ডেভেলপারদের নতুন প্রযুক্তিতে দ্রুত adapt  করতে সহায়তা করে।


**Flexibility**: React একটি অত্যন্ত flexible লাইব্রেরি যা বিভিন্ন ধরণের ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহার করা যায়। এটি ডেভেলপারদের তাদের প্রয়োজনীয় অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।


**Possibility**: React একটি শক্তিশালী এবং বহুমুখী লাইব্রেরি যা বিভিন্ন ধরণের ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহার করা যেতে পারে। এটি একটি জনপ্রিয় পছন্দ হয়ে উঠেছে এমন কিছু অ্যাপ্লিকেশনের মধ্যে রয়েছে সোশ্যাল মিডিয়া অ্যাপ্লিকেশন, ই-কমার্স অ্যাপ্লিকেশন, এবং গেমস। এছাড়াও React কে client সাইডে, android app অথবা ios app, browser এক্সটেনশন তৈরিতে অথবা ElectronJs এর মাধ্যমে ডেক্সটপ অ্যাপ তৈরি করার ক্ষেত্রেও ইউজ করা হয়।  



এছাড়াও React লাইব্রেরিটি Facebook মেনটেইন করে এবং এটা open source । এসব কারণ গুলোর জন্য React বর্তমানে বেশি জনপ্রিয়।
API Explained to a 5 year old kid LITERALLY!
Tags: api, webdev, beginners
Published: 2023-11-12 05:04:42

## Disclaimer
**This is a blog to explain topics in a funny way and I don't intend to hurt anyone's feelings**

## Introduction
What is an API? Well, it's Application programming interface.
(*gasp*) F**k that a huge word! No problem we will calmly ask google.

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

So, I searched it and scanned/read many documents and here's what it means...

## Explained - LITERALLY TO A 5 YEARS OLD KID

OK! So, imagine you are a 5 year old kid! Nice now you are stupid I feel superior!

So, you have 7 crayons and you want to give it to your friend who is in next room! Now, if you are little bit smart you won't give it one by one going to his room and give it, rather you will put them in a box ( cuz you have small hands and crayons are large ) and give it to him!

Here, you are the user aka stupid , your friend is the application from where you want to pass the data and box is the API!

## Explained - Other common EXAMPLE
AGAIN! Imagine you are in a restaurant and you want to order food but you won't go directly to the chef and ask them to make you the food you want, rather you will call the waiter and say him your order which he will take to the chef! SIMPLE!

Here, You are the Customer aka User, Chef is the Application and API will be the Waiter aka low waged person!

## REAL LIFE EXAMPLE - UbeR
Let's take a look into a real life example because we are not schools.

Now, Uber seems one application but Behind the Scenes it is the mixture of many service application like Payment , Order , etc.
[ This Distributing work into smaller parts is called **Microservice Architecture** but more on that in other blogs ]

Now, to communicate through their apps they have to pass data through API! 
It's like they Talking with each other with API like calls, letter and emails.

BUT FOR YOU IT IS ONE APPLICATION!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3v14ypqlexhmbs80az9q.png)
Navigating the Developer Relations Landscape: Lessons from DevRel University
Tags: devrel, devreluni, documentation, techtalks
Published: 2023-11-12 11:29:17

In the ever-evolving tech industry, a profound understanding of developers isn't just advantageous; it's imperative, especially when your business model hinges on developers embracing your products and services. As a Developer Relations Engineer, I embarked on a journey to enhance my skills and insights through the DevRel University course, seeking to glean wisdom from experienced professionals in the field.

---

## Class 1: Developer-First vs. Developer-Plus Companies

In the first class, the spotlight was on the fundamental philosophies that shape the landscape of Developer Relations. **'Developer-First' companies** are those that tailor their offerings exclusively to developers, while **'Developer-Plus' companies**, while not exclusive, still prioritize developers as a crucial customer base. This distinction profoundly influences the strategies, tone, and direction of DevRel efforts, shaping how we connect with and support the developer community.

## Class 2: Landing Your First DevRel Role

Securing a position in DevRel requires a unique blend of technical proficiency, community engagement skills, and soft skills. The second class focused on strategies for breaking into the field, emphasizing the importance of networking, crafting compelling narratives around personal projects, and showcasing an authentic passion for both technology and people. It's not just about the code; it's about connecting with individuals and communities.

## Class 3: The Impact of DevRel on Product

Class three delved into the pivotal role DevRel professionals play as a bridge between the developer community and a company's product team. By gathering valuable feedback and insights from developers, DevRel ensures that the product evolves in ways that genuinely serve its users. It's not just about building products; it's about building products that resonate with and empower the developer community.

## Class 4: The Importance of Documentation

In the fourth class, the spotlight shifted to the crucial role of documentation in the developer journey. Effective documentation empowers users to fully harness a product's capabilities independently, reducing barriers to entry and fostering self-service learning. It's not just about the codebase; it's about providing the necessary tools and resources for developers to thrive.

---

## Conclusion
My journey through the DevRel University course has been enriching, unveiling insights that will undoubtedly shape my path as a Developer Relations Engineer. From understanding the core philosophies to navigating the intricate balance of technical proficiency and community engagement, this course has been a beacon of knowledge in the ever-evolving realm of developer relations.
WHY ALL REAL FRONT-END DEVELOPERS SHOULD REWRITE EVERYTHING IN RUST IN 2024
Tags: career, rust, beginners, writing
Published: 2023-11-14 09:12:05

The title speaks for itself but you are such a bunch of loosers that I will do a FAQ anyway. 

**Who should read this article ?**

Everyone should always read my articles.
At least if you don't want to be a looser.

**What do I know about my intended audience ?**

That they should rewrite everything in Rust in 2024 unless they want to stay a bunch of loosers in 2024. 

**What is a looser and what is a real developer ?**

Basically it's like black and white, either you are a looser or you are a [real developer](https://en.wikipedia.org/wiki/No_true_Scotsman).

**What is Rust in 2024 ?**

Same as Rust in 2023, one year older. 

Long story short, it's a programming language with awesome features that you should rewrite everything with in 2024.

**Why in 2024 ?**

Great for SEO.

**What do I mean by everything ?**

Everything where code is involved where Rust awesome features might become handy at some point in 2024.

**How much time and money would that cost ?**

I don't know but I know that staying a looser for your whole life wil cost you even more. 

**It's loser with one o**

Only in Real English.
I speak Looser English, meaning French.


**How do I use Rust on the front end ?**

[Don't be a Female, Just Google It](https://dev.to/t/shecoded/top/infinity)

**How can I stop being a looser ?**

Listen to the wisdom of a great Founding Father who made America a Democracy and not only a Republic.
[And Pull Yourself Up By Your Own Bootstraps](https://www.youtube.com/watch?v=3xD8vWQJEok) 

**What should my readers do from here ?**

Rewrite everything in Rust in 2024.

**What if I prefer to make my own choices in my own context ?**

![LOOOSER](https://res.cloudinary.com/practicaldev/image/fetch/s--9Ux5yOyT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iivq1sbmgc01pihtyflo.png)

**I am a looser too, but Why Rust though ? I still don't get it**

Well I don't know much about Rust to be honest, but I watched a video from @ThePrimeTimeagen on YouTube where he explained that Rust is great.

I didn't really understood why or when of for whom Rust is great, but @ThePrimeTimeagen is smart and here is Why.

- @ThePrimeTimeagen works at Netfliksse, unlike loosers like you and me.
- @ThePrimeTimeagen once spoke about an article of mine and I liked that.
- @ThePrimeTimeagen also told me that I was an annoying junior developer, and that I m not qualified to have an opinion about TDD. And he is 100% correct, I am not.

What I don't get is whether my article's title is a clickbait or a scambait.

Maybe he can clarify ? I will ask on Twitter.

{% youtube https://www.youtube.com/watch?v=nVrf6FgL13Q %}
MSFT Azure Please
Tags: azure, cloud
Published: 2023-11-15 00:14:44

Microsoft is certainly living up to why I've worked on so many migrations away from Azure. 

Just getting the simple things to work goes a long way toward building trust to do more and more with a vendor. 

MSFT seemingly has chosen largely to ignore this in favor of allowing things to be kludgy and broken.  Just getting a free account on the path to pay-as-you-go failing in the middle is super frustrating.

Sorry, it's negative.
A confusing problem of the Mysql timestamp
Published: 2023-11-15 01:29:10

## Background
when I synced data using Navicat from local to RDS, I found the SQL query results with `order by create_time DESC` was **incorrect**.
I guessed that may be relative to the SQL client's time_zone setup, cause I have met such a problem before when I work as a Frontend Engineer. 
So I decided to dig into this issue and get the proper resolution.

## Firstly
, look at the time_zone setup of your Mysql client using this command

```
show variables like '%time_zone%'.
```

### result of my local Mysql client

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


### result of RDS

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

The time_zone setup is absolutely different!. Let's make a query by `SELECT create_time FROM order_deposits WHERE id=37;`
### result of local 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gnmy540k4xbwgf5jsym.png)
### result of RDS


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



The result of this query is absolutely the same.
seo seo seo seo seo seo seo seo
Published: 2023-11-15 09:54:13

seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo [seo](https://dev.to/angelinamark2012/seo-seo-seo-seo-seo-seo-seo-seo-2d7m) seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo seo
🚀 Exciting React Project Showcase for Beginners! 🌟
Tags: beginners, reactjsdevelopment, kawsarkabir, webdev
Published: 2023-11-15 20:10:35

Hey React enthusiasts! 👋 I've been working on a collection of beginner-friendly React projects, and I'm thrilled to share them with you. Whether you're just starting your React journey or looking for inspiration, these projects are designed to help you learn and have fun along the way.

## Explore the Showcase: [React Design Showcase](https://github.com/kawsarkabir/react-design-showcase.git)


### 🚀 Why Explore These Projects?

- **Beginner-Friendly:** Perfect for those new to React.
- **Clear Documentation:** Each project comes with comprehensive documentation to guide you.
- **Interactive Demos:** See the projects in action with live demos.
- **Open Source:** Feel free to contribute, ask questions, or provide feedback.

### 🛠 How to Get Started?

1. **Clone the Repository:**
   ```
   git clone https://github.com/kawsarkabir/react-design-showcase.git
   ```

2. **Navigate to the Project Folder:**
   ```
   cd react-design-showcase/project-name
   ```

3. **Install Dependencies:**
   ```
   npm install
   ```

4. **Run the Project:**
   ```
   npm start
   ```

### 🤝 Get Involved!

Found a bug? Have a suggestion? Want to contribute? Your feedback is highly appreciated! Feel free to open an issue, submit a pull request, or drop your thoughts in the comments.

Let's learn and grow together! 🌱 Explore the projects [here](https://github.com/kawsarkabir/react-design-showcase.git) and don't forget to star the repository if you find it useful.

Happy coding! 🚀✨
Graph Library graphjs-react updated to 1.0.3
Tags: webdev, programming, javascript, react
Published: 2023-11-15 21:12:20

GraphJS React is a graph library to view or visualize your data which you collect or find. 

We wrote a blog about this library. If you do not read it, you should go to this link: https://dev.to/gokhanergentech/new-react-chart-library-for-basic-charts-graphjs-react-16ed

Lets talk about this version. 

- **Added LineChart labelled or number**


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

```
<LineChart
  data={[
    [
      {
        color: 'rgb(197,104,176)',
        x: '2005',
        y: 66357782
      },
      {
        color: 'rgb(231,205,242)',
        x: '2006',
        y: 28585057
      },
      {
        color: 'rgb(104,222,112)',
        x: '2007',
        y: 83097927
      },
      {
        color: 'rgb(174,227,215)',
        x: '2008',
        y: 40312901
      },
      {
        color: 'rgb(225,116,228)',
        x: '2009',
        y: 64665550
      },
      {
        color: 'rgb(197,206,222)',
        x: '2010',
        y: 83476844
      }
    ],
    [
      {
        color: 'rgb(174,183,141)',
        x: '2005',
        y: 16388224
      },
      {
        color: 'rgb(103,131,243)',
        x: '2006',
        y: 72801715
      },
      {
        color: 'rgb(187,144,151)',
        x: '2007',
        y: 17787543
      },
      {
        color: 'rgb(135,199,171)',
        x: '2008',
        y: 31304136
      },
      {
        color: 'rgb(177,186,201)',
        x: '2009',
        y: 34091381
      },
      {
        color: 'rgb(211,119,199)',
        x: '2010',
        y: 11001680
      }
    ]
  ]}
  height={400}
  labels={[
    {
      color: 'blue',
      name: 'A'
    },
    {
      color: 'red',
      name: 'B'
    }
  ]}
  onPointClick={() => {}}
  onPointOver={() => {}}
  title={{
    label: 'Countries\' Populations'
  }}
  titles={{
    x: 'Year',
    y: 'Population'
  }}
  width={400}
  xAxisLabels={[
    '2005',
    '2002',
    '2006',
    '2007',
    '2008',
    '2009',
    '2010'
  ]}
/>
```

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


You can see the usage of the chart.

- **Added wheel scaling for bar and line charts**

You can also help to develop this library. We use example project to use the charts and also storybook.

https://github.com/gokhanergen-tech/graphjs-react
thy arcane essence of chaos enwreathed in the tapestry of software
Published: 2023-11-16 12:57:51

"Leges scripturae et principia designi sunt incantationes a sapientibus prolatas, fabricantes baculum structurae ad arcana vires intra codicem gubernandas."

In the expansive realms of software craftsmanship, the enchantment woven into the sacred codebases reveals a sublime dance betwixt order and chaos.

Lo, discerning eyes may perceive the chaos within software as an innate manifestation of creativity and boundless exploration. A mystic odyssey through intricate and ever-shifting systems, conjuring decisions and dispelling challenges along the arcane journey. The creative process, though tempestuous at times, is propelled by an unwavering desire to bestow order and unfurl functionality upon a distinct vision.

Yet, in the mystical realms of algorithms and logic, there exists a resolute emphasis on imposing order upon the chaos. Coding conventions, design principles, and the venerable scrolls of ancient best practices serve as the formidable staff and incantation, harmonizing the intricate threads of code into a spellbinding symphony.

In essence, the cosmic interplay between order and chaos in software development mirrors the profound arcane discussions surrounding the very nature of creativity, the sorcery of problem-solving, and the delicate equilibrium between the structured runes and the fluid dance of flexibility.