teleren/devto huggingface dataset:
Monitoring Performance of Drift in Flutter App with Sentry
Tags: flutter, mobile, monitoring, database
Published: 2023-06-26 05:00:42

## Drift

`sqflite` is introduced in [the official cookbook](https://docs.flutter.dev/cookbook/persistence) to persist data.　But [Drift (a.k.a moor)](https://drift.simonbinder.eu/) is another strong option to use SQLite in Flutter app.

## Sentry

Sentry is well known as error tracking tool, but also you can use to monitor performance. Competitors are Datadog/New Relic/Firebase Crashlytics.

## Drift & Sentry

Unfortunately, however, there is no library available for linking Sentry with Drift. I made it with reference to [sentry_sqflite](https://pub.dev/packages/sentry_sqflite).

* pub.dev: https://pub.dev/packages/drift_sentry
* GitHub: https://github.com/utisam/drift_sentry

### Usage

```dart
LazyDatabase _openConnection() {
  return LazyDatabase(() async {
    final dbFolder = await getApplicationDocumentsDirectory();
    final file = File(p.join(dbFolder.path, 'db.sqlite'));
    // Use .addSentry() to wrap QueryExecutor
    return NativeDatabase.createInBackground(file).addSentry();
  });
}
```

Finally, it is the measurement result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91r8ufkkh86rb8fghxr5.png)
Unlock the Sidebar Width in Firefox
Tags: productivity, firefox, howto, tutorial
Published: 2023-06-26 05:00:00

---
canonical_url: https://miguelpimentel.do/unlock-firefox-sidebar/
---

## Why Would Anyone Want to Do This?

- To enhance the use of the Firefox [Side View](https://addons.mozilla.org/en-US/firefox/addon/side-view/) extension.
- To compliment the use of one of my Firefox sidebar [extensions](https://addons.mozilla.org/en-US/firefox/user/17772574/).

## Step-by-Step Instructions

1) In a new tab, navigate to `about:support`.
2) Under `Application Basics`, find `Profile Folder`.
3) Locate and click the `Open Folder` button next to it. It will be next to an address similar to: `%appdata%\Mozilla\Firefox\Profiles\{profile-id}.default` [^1]
4) Inside your Firefox Profile Folder, create a new folder named: `chrome`.
5) Inside the newly created chrome folder, create a new file named: `userChrome.css`.
6) Copy the following code [^2], paste as content and save: [^3]

```css
#sidebar-box {
  max-width: 40% !important;
  min-width: 300px !important;
}
```

7) Finally, in a new tab, navigate to `about:config`, search for `toolkit.legacyUserProfileCustomizations.stylesheets`, and change its value to `true`.
8) Restart Firefox and test it out!

[^1]: `%appdata%` is equivalent to `C:\Users\{username}\AppData\Roaming`
[^2]: After Firefox 107, `#sidebar` was deprecated, and `#sidebar-box` was introduced.
[^3]: You may change the units to any length you find more convenient.
Simple Demo Fluent UI 2 TreeView Web Components with Dynamic Data in Svelte
Tags: fluent, svelte, treeview, javascript
Published: 2023-06-26 04:47:51

In this simple demo we will show you how to integrate the object tree  structure into Microsoft Fluent UI 2 TreeView Web Components in Svelte. The tree structure only has single root.

Check this out on this Svelte REPL link https://svelte.dev/repl/317e16c270b84d2dba580f8a19445c92

Good for:
- Anyone that confuse about integrating the data into the TreeView.
- Anyone that want to create a UI that has TreeView display.

Enjoy the hacking.
What is Elastic Block Storage in AWS?
Tags: aws
Published: 2023-06-26 04:47:50

Elastic Block Storage (EBS) is a block-level storage service provided by Amazon Web Services (AWS). It offers persistent storage volumes that can be attached to Amazon Elastic Compute Cloud (EC2) instances. EBS volumes are designed to provide durable, highly available, and scalable storage for your EC2 instances.

EBS volumes function like hard drives and can be used as primary storage for operating systems, databases, and applications running on EC2 instances. They provide persistent block-level storage, meaning that the data stored on an EBS volume persists even after the associated EC2 instance is terminated.

**EBS volumes offer different types to meet various performance and cost requirements. The available types include:**

**1. General Purpose SSD (gp2):** This is the default volume type and provides a balance of price and performance for a wide range of workloads.

**2. Provisioned IOPS SSD (io1):** This type is designed for applications that require high I/O performance and consistent low-latency access to storage.

**3. Throughput Optimized HDD (st1):** It offers low-cost storage for frequently accessed, throughput-intensive workloads.

**4. Cold HDD (sc1):** This type is ideal for less frequently accessed workloads where the storage cost is a significant consideration.

**5. Magnetic (standard):** This is the original EBS volume type, and it provides a baseline level of performance at a lower cost.

EBS volumes can be created, attached, detached, and deleted as needed. They can also be encrypted to ensure the security of your data. Additionally, AWS provides features like snapshots and replication for backup, restore, and data protection purposes.

By obtaining [AWS Training](https://www.edureka.co/aws-certification-training), you can advance your career in AWS. With this course, you can demonstrate your expertise in the basics of preparing for the AWS Certified Solutions Architect - Associate exam SAA-C03, many more fundamental concepts, and many more critical concepts among others.

Overall, EBS provides flexible and scalable storage options for EC2 instances, allowing you to meet the storage requirements of your applications in AWS.
Reduce Cloud Costs with Saving Plans: A Game-Changer in the Cloud Market
Tags: cloudcomputing, aws
Published: 2023-06-26 04:40:02



Are you looking for ways to reduce your cloud costs and optimize your budget? Look no further! Saving Plans are here to revolutionize the cloud market and help you save big. 💰💡

🔹 Introducing Saving Plans: Saving Plans are a flexible and cost-effective pricing model offered by major cloud providers like AWS, Azure, and Google Cloud. They provide significant discounts (up to 70%) on your cloud usage, allowing you to maximize cost savings without compromising performance or scalability.

🔹 Commitment-Based Savings: With Saving Plans, you commit to a specific usage volume (measured in dollars per hour) over a 1 or 3-year term. In return, you unlock substantial discounts compared to on-demand pricing. This commitment-based model enables you to predict and control your cloud costs effectively.

🔹 Flexibility Across Services: Saving Plans offer flexibility across a wide range of cloud services, allowing you to apply the savings to various compute options, such as virtual machines, databases, serverless functions, and more. This versatility enables you to optimize costs across your entire cloud infrastructure.

🔹 Automatic Discount Application: Once you have a Saving Plan in place, the cloud provider automatically applies the applicable discount to your eligible usage. This seamless process ensures that you benefit from the savings without the need for manual intervention or complicated calculations.

🔹 Savings for Existing and Future Usage: Unlike Reserved Instances, which apply to specific instances, Saving Plans provide savings for both existing and future usage. This flexibility allows you to optimize costs across your entire cloud footprint, including both new and existing workloads.

🔹 Cost Optimization Made Easy: Saving Plans simplify cost optimization by providing a single, predictable rate for your cloud usage. This eliminates the need to constantly monitor and adjust instance types or pricing models, streamlining your cost management processes.

🔹 Stay Competitive in the Cloud Market: As cloud providers fiercely compete to attract customers, Saving Plans emerge as a game-changer. By leveraging this cost-saving model, you can reduce your cloud expenses and gain a competitive advantage in the market.

Take a look at the table below to see how Saving Plans compare across major cloud providers:

| Cloud Provider | Saving Plan Options | Discount Range |
|----------------|---------------------|----------------|
| AWS            | Compute Savings Plans, EC2 Instance Savings Plans | Up to 72% |
| Azure          | Azure Reserved VM Instances                     | Up to 72% |
| Google Cloud   | Committed Use Discounts                          | Up to 57% |

Don't miss out on the opportunity to supercharge your cost optimization efforts in the cloud! Explore Saving Plans offered by leading cloud providers and start unlocking substantial cost savings today. 💪💻
Only internally vetted and approved Open Source libraries can be used
Tags: opensource, corporations, libraries
Published: 2023-06-26 04:39:38

---
title: Only internally vetted and approved Open Source libraries can be used
published: true
description: How does your company handle the use of open source libraries?
tags: opensource, corporations, libraries
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-06-26 04:37 +0000
series: opensource
canonical_url: https://osdc.code-maven.com/articles/only-internally-vetted-and-approved-libraries-can-be-used
---

This article is based on a conversation I had with a manager at one of the large hi-tech companies.
My conversation partner preferred that I leave out the name of the company.

I asked how can the developers use 3rd party open source libraries?

Developers can't install libraries directly from the 3rd party registry, nor from GitHub. Nor from anywhere else on the internet.
They can only use libraries and only the versions of those libraries that were vetted and approved by a team of the company specialized to screen open source libraries.
They have an in-house repository of the libraries, developers can only install from there.

If you wish to use a library that is not approved yet, you will need to submit a request to that team.
They will evaluate the library and all of its dependencies in terms of license and code security.

They will also ask you why do you need that particular library. What alternatives did you see and why would you like to use specifically this library.

They will will also take in account the level of maintenance this project gets.
After all, including a library that is not maintained will soon become a liability as the team finds out that some features are missing
or when they find bug or security vulnerabilities.

This of course makes it much harder to use Open Source libraries. It also means that this security team has to have members who can read
and properly evaluate code written in all the programming languages used in the organization.

This creates a pressure to reduce the number of programming languages in the organization. In itself this is not a problem,
but it might reduce the possibility to explore other languages that might fit better specific tasks.

In other words they say: We can't fully trust Open source software.
We need to have a strong SCM (Software Configuration Management) process.
We need to have version control for inbound open source code.
We need to have code review and license review for every piece of software that arrived to the company.
We are ready to allocate a separate team to verify and approve new open source packages to be added to the stack.

Only relatively large companies can afford to have such a team that is not working on the products of the company.
How To Avoid Breaking Your React Application On Production
Tags: react, javascript, codenewbie
Published: 2023-06-26 04:27:47

{% embed https://www.youtube.com/watch?v=gVj84413hVg %}

Do you know that your React app deployed on production can crash anytime due to unhandled errors?  
  
React Error Boundaries are here to save your day!

> Whenever any type of error happens during the rendering of a component or in lifecycle methods, React displays a blank page without showing any error message.

And getting a blank page on the production site is definitely not a good user experience.  
  
So React Error Boundaries provide a powerful mechanism to catch and gracefully handle errors that occur during the rendering lifecycle of your components.

## What is Error Boundary In React

Error boundaries are React components that **catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI** instead of the component tree that crashed.

Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

So watch the above youtube video to learn how to fix this issue.

Timestamps ⏰

00:00 - Introduction

01:06 - Why Need To Add Error Boundary 

02:14 - How to Use React Error Boundary 

03:22 - Displaying Custom Error Page 

04:45 - Resetting Application Errors

## Closing Points

If you're looking to enhance your skills in JavaScript, React, and Node.js with the MERN stack, then my [YouTube Channel](https://www.youtube.com/@codingmastery_dev) is the perfect resource for you.

The videos in this channel cover a range of topics related to JavaScript, React, and Node.js, including tutorials, code walkthroughs, tips and tricks, best practices, and much more.

Whether you're a beginner or an experienced developer, our content is tailored to help you learn and grow.

You can take a look at the below playlists also.

* [Express JS + MongoDB Crash Course](https://www.youtube.com/watch?v=GDe8DFZcgoI&list=PLSJnlFr3D-mEn4JLpA4F7UCAX_e5Nmx3q)
    
* [Learn Latest Webpack For Production](https://www.youtube.com/watch?v=ILcb7BD9R90&list=PLSJnlFr3D-mEBWnL0XGa_hpGyiXoI_BIN)
    
* [Redux Toolkit Crash Course](https://www.youtube.com/watch?v=ha2Fh4Vi7xo&list=PLSJnlFr3D-mEmCOE1mjlnsr1A8t5Zrmub)

**If you found this article and video useful, don't forget to subscribe to my [YouTube Channel](https://www.youtube.com/@codingmastery_dev) and hit the bell icon so you will not miss any future video notifications.**

------

**Want to stay up to date with regular content regarding JavaScript, React, Node.js?** [**Follow me on LinkedIn**](https://www.linkedin.com/in/yogesh-chavan97/)**.**
Variables and Data Types in JavaScript
Tags: beginners, javascript
Published: 2023-06-26 04:18:07






In JavaScript, variables are used for storing and manipulating data.  Variables allow the programmer to store values in the computer’s memory.  Storing variables enables us to retrieve these values when we need them.  



**Variables**
To declare a variable in JavaScript, we use the “var” “let” or “const”  keyword, followed by the variable name. 

```
let city;
```

In the above example, we declare a variable named “city” using the ‘let” keyword. Variables can hold various types of data, and their values can be changed throughout the program when using the “let” keyword.  “var” and “const” cannot be reassigned, but that is another topic of its own.  

**Data Types**

JavaScript lets us use following data types: numbers, strings, booleans, arrays, and objects. Below are examples of these JavaScript data types.

 **Numbers** 

JavaScript uses the number data type to represent numeric values. 

   	

```
let number = 10;
let price = 1.77;
```

The second example is a floating point number.  The difference is that 1.77 a decimal and not an integer.
  	 
   

 **Strings** 

Strings are a set of characters enclosed in single or double quotes. Strings are really just text for the purpose of this blog.
  
   

```
   let name = “Dot”;
   let message = "Woof";
```
   

 **Boolean**

Booleans, derived from Boolean Algebra, represent logical values and can be either true or false. Booleans are used for comparisons.  

   
  

```
   let dotIsADog = true;
   let dotIsACat = false;
```
   

 **Arrays**

Arrays are ordered collections of values, or a set of data enclosed in square brackets. They can hold elements of any data type, including numbers, strings, and even other arrays.

      

```
    let numbers = [1, 2, 3, 4, 5];
    let cars= [“Jeep”, “Cadillac”, “Chevrolet”];
```
  

 **Objects**

Objects are data types that store key-value pairs. 
   
   

```
let dog= {
     name: “Dot”,
     age: 3,
     city: “Boston”'
   };
```
   


Understanding variables and data types is critical in order to manipulate data in JavaScript.
Angular Project : Setting up the local environment and workspace
Tags: angular, beginners, programming, tutorial
Published: 2023-06-26 03:48:47

To set up Angular for development, follow these steps:

Before Preforming anything you need to know the [Angular Version Compatibility](https://angular.io/guide/versions) with NODE.JS, Typescript & RXJS.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fxsifskr3zaroly1syi.png)

- 
**Install Node.js:**
Angular requires Node.js and its package manager, npm. Download and install Node.js from the official website (https://nodejs.org). It's recommended to use the LTS (Long-Term Support) version.If you are unsure what version of Node.js runs on your system, run `node -v` in a terminal window.

- **Install Angular CLI: **
Angular provides a command-line interface (CLI) tool for creating and managing Angular projects. Install it globally by running the following command in your terminal or command prompt:
`npm install -g @angular/cli` 
After sometime your system will be installed with angular cli to confirm the same run `ng version`.

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


That's it! You have set up Angular for development. Next step will be Create a workspace and initial application.
Differences between .forEach() and .map()
Tags: vanillajavascript, beginners, codenewbie
Published: 2023-06-26 03:46:48

When a programmer is working with arrays in JavaScript there are two commonly used array methods, ".forEach()" and ".map()". At first glance they may seem pretty similar but there are a few key differences between them. These differences can greatly impact how one would transform and manipulate arrays. This post will be going over the differences between the two and understanding when you would use each method.

The purpose and functionality are the main differences. ".forEach()" is an array method that will iterate over each element in an array and then will perform a specified action on each element in the array. ".forEach()" will not return a new array and it is primarily used for executing side effects/operations that don't require a transformed array. ".map()" also iterates over each element in an array. The reason it differs from ".forEach()" is because it returns a new array with the exact length as the original array. ".map()" is most commonly used for transforming or mapping elements from one array to another array. 

The return values also differentiate ".map()" and ".forEach()". With return values ".forEach()" does not return anything, all it does is simply execute the provided callback function for each element in the array. ".map()" actually will return a new array. It will allow one to create a new array based on the transformation logic defined in within the callback function. 

Another difference is how each method will handle side effects and the purpose they serve. ".forEach()" is good to use when one wants to perform an action on each element of an array without creating a whole new array. One example would be using ".forEach()" to log each element to the console. ".map()" is useful when one would want to create a new array with modified changes. This allows you to perform transformations on each element and then collect the results in a new array. 

The mutability of the original array is also another difference. ".forEach()" does not modify the original array. It only operates on the elements in the array and it does not change their order or values. ".map()" will return a new array but leave the original array unchanged. This ensures that the original array remains the same while the new array will be transformed.

In conclusion the main differences between ".forEach()" and ".map()" are their pruposes, return values, how they handle side effects, and the impact on the original array. ".forEach()" is mainly used for executing operations on elements in an array without returning a new array. ".map()" is mainly used when transforming or mapping elements from one array to another by creating a whole new array. Understanding the differences will help one make informed decisions when working with arrays. Remember to use ".forEach()" for operations and side effects without returning a new array. Make sure to use ".map()" to create a whole new array which has transformed values from the original array.
How to Create a Basic Carousel using JavaScript, HTML, and CSS
Tags: beginners, tutorial, html, javascript
Published: 2023-06-26 03:36:03

To create a dynamic carousel that shows images or information that rotates across the screen by using a combination of JavaScript, HTML, and CSS to format and style. 

###HTML

One of the first things to do, is create basic HTML structure in the project file- index.html. In the body element create a <div></div> tag and in it add all of the information that will be displayed within the carousel. Each element should have a unique identifier, either id or class.  This will be used to grab the information for DOM manipulation and to style it within the style sheet. 

###JavaScript

Switching to the index.js file to work in, this is where the data will be declared and appended to the DOM. If information is from an API, remember to fetch the data and use the forEach() method to iterate through the array. Then declare variables in order to access the information that was fetched, change any text content or image source, and append all information to the DOM. For the carousel to work define a function that will handle the transition between the slides.

```
// Initialize carousel
      const carouselItems = Array.from(carousel.getElementsByClassName('carousel-item'));
      let currentIndex = 0;
      carouselItems[currentIndex].classList.add('active');

      // Function to show the next carousel item
      function showNextItem() {
        carouselItems[currentIndex].classList.remove('active');
        currentIndex = (currentIndex + 1) % carouselItems.length;
        carouselItems[currentIndex].classList.add('active');
      }

      // Set interval to automatically show the next item every 5 seconds
      setInterval(showNextItem, 5000);
    })
```

###CSS

Styling the carousel is what really brings it together. Here is an example of css being used-

```
.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.carousel-item.active {
  opacity: 1;
}

.info {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px;
  font-size: 16px;
}
```
What is Backlink Analysis
Tags: digitalworkplace, marketing
Published: 2023-06-26 03:21:00

[Backlink analysis](https://moviescinematic.com/what-is-backlink-analysis/) is the process of examining the links that point to a specific website. It involves evaluating the quantity, quality, and relevance of these backlinks. By analyzing backlinks, website owners and SEO professionals can gain insights into their site's link profile, identify potential issues, and devise strategies to improve search engine rankings. This analysis helps in understanding the link-building efforts of competitors and discovering new link-building opportunities. Ultimately, backlink analysis plays a crucial role in optimizing a website's visibility and organic search performance.
For full information visit [Lyrics Wallah](https://lyricswallah.in/) & [Movies Cinematic](moviescinematic.com)