teleren/devto huggingface dataset:
MDB5 Angular 5.2.0 is online!
Tags: angular, news, webdev, javascript
Published: 2023-12-06 16:00:00

We are very happy to inform you, that **MDB5 Angular 5.2.0** is online!
​
**​MDB5 Angular 5.2.0 Changelog:**

**​New:**
- A new MdbSidenavMenuDirective directive has been added to _Sidenav_ allowing to create multiple menus within one component
- A new size input has been added to _Select_ allowing to change input size to sm or lg

**Fixes and improvements:**
- Resolved problem with components rendering when using Server Side Rendering
- Resolved problem with overlay when using menuPositionClass in Dropdown​
- Replaced hardcoded padding-left value in _Sidenav_ link with a value from CSS variable
- Replaced hardcoded box-shadow, border-color and background-color values in _Buttons_ with a values from CSS variables
- Fixed events types for opened and closed events in _Datepicker_​
- Resolved problem with initial value in _Rating​_
- Resolved problem with the Host already has a portal attached error in Wysiwyg

_​Timepicker​_
- Fixed the button press behavior to consider the duration of the press
- Removed the default scroll effect from the arrow keydown events in inline mode

_​Multi Range Slider​_
- Resolved problem with thumbs position updates on ngModel or formControl value changes
- Added thumbs position constraints so that the position of a given thumb is limited by its counterpart

**MDB5 Angular 5.2.0** - Check it out **[HERE](https://mdbootstrap.com/docs/angular/)**
A new tool to easily build, train and test Neural Networks for regression tasks 💻🚀
Tags: machinelearning, ai, datascience, algorithms
Published: 2023-12-06 15:54:40

Ever felt like building Neural Network models for regression tasks is too complicated? You just want to perform some simple predictions - say forecast house prices given their size, year of construction, energy efficiency and so on - and you have to go through a bunch of very painful and time-consuming steps: installing the Tensorflow environment, importing and parsing the data, coding the model... Wouldn't it be easier if there was a tool that did all that for you?

---

That's where **[Domeis](https://www.domeis.it/)** comes in

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

**[Domeis](https://www.domeis.it/)** is a Postman-like tool that allows developers to easily and quickly build, train and test Neural Network models for regression tasks through an intuitive JSON editor-based interface. You can just define your model in the JSON editor, then click on the "train" button to train it and the "test" button to test it. No need to install any library or environment, nor to write any code. You can do everything directly on Domeis interface.



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


We found **[Domeis](https://www.domeis.it/)** to be a very cool tool to very quickly put together and compare Neural Network models, without having to code your way through it.

Take a look at it and let me know what you think!

https://www.domeis.it/
Day 3: Weather App app using Flutter
Tags: flutter, learning, day3
Published: 2023-12-06 15:41:08

Hey there!
Revealing a new milestone—a dynamic weather app! Still learning and exploring Flutter's potential. More to come!
🌦️
Here is the project [link](https://github.com/api00/ongoing_app_development_learning)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqjuml0bz7eoioa67een.png)
TimerApp with watchOS in Swift
Tags: swift, mobile, beginners
Published: 2023-12-06 15:32:34

In this blog, I will be implementing TimerApp with `Combine`.

**ContentView**
```swift
import SwiftUI
import Combine

struct ContentView: View {
    @State private var timerDuration: TimeInterval = 60
    @State private var timerActive = false
    @State private var timeRemaining: TimeInterval = 60
    @State private var timerCancellable: AnyCancellable? // subscriber
    
    // publish event in every second as a publisher
    let timer = Timer.publish(every: 1, on: .main, in: .common)
    
    var body: some View {
        VStack {
            Text("Timer \(timeString(time:timeRemaining))")
                .font(.title2)
            
            if(timerActive) {
                Button("Stop Timer") {
                    self.timerActive = false
                    self.timerCancellable?.cancel()
                }
            } else {
                Button("Start Timer") {
                    self.timerCancellable?.cancel()  // cancel any existing timer before start the timer
                    self.timeRemaining = self.timerDuration
                    self.timerActive = true
                    // subscribe to publisher, timer
                    self.timerCancellable = timer.autoconnect().sink { _ in
                        // whenver event is triggered (every second), this callback is called
                        self.updateTimer()
                    }
                }
            }
            
            // giver users options (1, 5, 10 minutes) using Picker View
            Picker("Duration", selection: $timerDuration) {
                Text("1 Minute").tag(TimeInterval(60))
                Text("5 Minute").tag(TimeInterval(300))
                Text("10 Minute").tag(TimeInterval(600))
            }
        }
        .onDisappear {
            self.timerCancellable?.cancel()
        }
    }
    
    private func timeString(time: TimeInterval) -> String {
        let intTime = Int(time)
        let minutes = intTime / 60
        let seconds = intTime % 60
        
        return String(format: "%02i:%02i", minutes, seconds)
    }
    
    private func updateTimer() {
        if(timerActive && timeRemaining > 0) {
            timeRemaining -= 1
        } else {
            timerActive = false
        }
    }
}
```

**Demo**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wz08fnarjojbjp40tax3.png)
C# - Interpolated String Handling
Tags: csharp, programming, beginners, tutorial
Published: 2023-12-06 15:30:00

C# 10.0 introduced improvements in the handling of interpolated strings, offering better performance and more control over the string interpolation process. This enhancement allows for more efficient creation of strings and can be particularly beneficial in scenarios involving logging or other performance-critical string manipulations.

Here's how you can take advantage of the improved interpolated string handling:

1. **Compiler Optimization of Interpolated Strings:**
   The C# compiler can now treat interpolated strings as `string`, `IFormattable`, or `FormattableString` depending on the context, which allows for more efficient memory usage and potentially avoids unnecessary allocations.

2. **Custom Interpolated String Handlers:**
   You can create custom interpolated string handlers to control string interpolation, for example, to avoid allocating a `string` object when it's not necessary.

Example:

```csharp
public static void Main()
{
    var name = "Alice";
    var age = 30;

    // Traditional interpolated string
    var message = $"Name: {name}, Age: {age}";
    Console.WriteLine(message);

    // Using custom interpolated string handler for logging (simplified example)
    Log($"Name: {name}, Age: {age}");
}

public static void Log(string message)
{
    // Custom logic for handling the interpolated string
    // For instance, you might decide to format the string differently 
    // or not to allocate a string at all if a certain logging level is not enabled
    Console.WriteLine("Log: " + message);
}
```

In this example, the `Log` method can be enhanced to use a custom interpolated string handler, allowing for more efficient processing of the string based on the application's needs (like different logging levels).

By utilizing these improvements in interpolated string handling, developers can write more efficient and performant code, particularly in scenarios where string manipulation and formatting are frequent operations.
𝐓𝐢𝐫𝐞𝐝 𝐨𝐟 𝐮𝐧𝐫𝐞𝐥𝐢𝐚𝐛𝐥𝐞 𝐩𝐮𝐛𝐥𝐢𝐜 𝐟𝐚𝐮𝐜𝐞𝐭𝐬? 😫
Published: 2023-12-06 15:18:54

We've compiled a list of free faucets for Public Testnets to save you time and frustration. 🤑

Check out the list now: https://buildbear.io/faucet 

Learn more at https://x.com/_BuildBear/status/1732393005435548067?s=20

Elevate your development experience with BuildBear 🚀

BuildBear is a specialized platform that provides:
- Personalized sandboxes👨‍💻
- Dedicated faucets for each sandbox💰
- Blazing-fast transaction speeds⚡
- A user-friendly explorer for effortless debugging🔍
- many Features

🛠️ Create Your Sandbox Now and Streamline Your Development Process at https://buildbear.io 🚀
CryptonbotsAI
Tags: cryptocurrency, bitcoin, cryptoworld, cryptocoins
Published: 2023-12-06 15:16:16

CryptoBotsAI recognizes a significant gap within the cryptocurrency industry—a need for a cohesive and all-encompassing framework. This framework aims to consolidate various functionalities, tools, and resources under one roof. By doing so, it streamlines the often complex and disjointed processes that investors and stakeholders face in the cryptocurrency space.
By offering a comprehensive framework, CryptoBotsAI empowers investors to shift their attention away from piecing together disparate tools and services. Instead, they can focus their efforts on evaluating and engaging with legitimate, reliable, and viable solutions. This simplification and unification of resources not only enhances efficiency but also promotes trust and confidence within the cryptocurrency market.
In essence, CryptoBotsAI's vision is to create a unified ecosystem that serves as a one-stop destination for investors and industry participants, enabling them to navigate the cryptocurrency market with clarity and ease.

At present, the cryptocurrency landscape is characterized by a proliferation of fragmented solutions, each tailored to address specific niche needs. These solutions often focus on singular aspects of cryptocurrency trading, investment, or management. While this diversity can be beneficial, it also poses challenges for investors and industry professionals.

website link: https://www.cryptobotsai.com/
Twitter link: https://twitter.com/CBAIOfficial
linkedin link: https://www.linkedin.com/company/cryptobots-ai/
Instagram link: https://www.instagram.com/cryptobots_ai/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8j7gtz4lwkxjif4e1gl.png)
A decade of dotenv
Tags: node, javascript
Published: 2023-12-06 14:57:44

---
title: A decade of dotenv
published: true
description: Node.js features and the trajectory of the dotenv npm package
tags: nodejs, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21p6aau4x4uhkgupvk4t.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-12-04 14:30 +0000
---
Node.js v20 has been released and quite a few new features were included. Among those and included in version 20.6.0, there is the `--env-file` flag, allowing you to import files for configuring environment variables natively. This is a popular feature among applications because `dotenv` has amassed the staggering number of 36 millions **weekly** downloads.


![Screenshot of downloads on npm for dotenv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/677iboem648vnigmy5uu.png)

As an avid dotenv user I wanted to thank their maintainers for keeping the project alive for [10 years](https://www.npmjs.com/package/dotenv/v/0.0.1) (wow). A perfect exemplary of dedication to Open Source.

![saying goodbye GIF](https://64.media.tumblr.com/33a191cd53a74a79917bd789370a9896/feea50fc7d8cfaf1-a2/s540x810/040ac1ff1370012d7a828ec1c3c616655203e2f2.gif)


Going back to the `--env-file` feature in hand, it can also be used to move `NODE_OPTIONS` environment variable to your .env file and avoid clutter on your Node.js commands. Last but not least, have in mind that you will still be able to pass environment variables on the Node.js command and that they will take precedence over your .env file:

```bash
$ SECRET=123 node --env-file=.env -e "console.log(process.env.SECRET)"
```

The previous command will always print "123", no matter the value for the variable SECRET you define in your .env.
First component and Vitest
Published: 2023-12-06 14:55:17

Yesterday, I completed my first component.
![menu component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dn0p6tmfykmbjej53h0a.png)

When I tried to set up a small automated frontend test, I initially chose Jest. However, I received advice about potential memory leak issues with Jest. While I wasn't sure what a memory leak was, I decided to follow the advice to avoid problems.

This led me to consider Vitest as an alternative for testing. Unfortunately chatGPT which hasn't received an update, doesn't recognize Vitest since it was introduced after January 2022. Despite this, the good thing about Vitest is that its syntax is almost identical to Jest. After spending some time understanding it, I followed Jest tutorials to learn how to conduct tests in Vitest.





Now, I've successfully completed my first test. It's a small test, but it works!

```js
it('should open the dropdown menu with "Inicio" option after being clicked', async () => {
  const { getByText, getByAltText } = render(<NavbarButton />);
  const svgElement = getByAltText('menu SVG');
  fireEvent.click(svgElement)
  const buttonInicio = getByText('Inicio') 

});
```
What is side effect? What is that term in React?
Tags: webdev, react, javascript, programming
Published: 2023-12-06 14:38:23

Hello, I'm reviewing the issue of Hook React. I've never approached the React class so I don't understand how it works. As for the [side effect] part, what is it? To understand it, I can't grasp anything. Whenever I should use it, when it comes to using the useEffect hook in React, I have also searched the documentation about it, but there is no satisfactory answer. I want to know how to get the side effect, and should I use useEffect in it? Which case? , in some cases I have carefully considered that useEEfect is only used when working with web-Api, specifically if you can use callbacks, then use useEffect? is wrong
CMD+P & VSCode
Tags: vscode, sublimetext
Published: 2023-12-06 14:33:27


![VSCode can't do basic things, like find files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hyrsgsg265ax84z9n2z.png)

What am I missing about VSCode? I don't get why it's so popular... I can't even get it to go to a file in the directory tree using CMD+P?

VSCode even has its own tag on DEV!
CREATE AND CONFIGURE AN AZURE FILE SHARE
Tags: beginners, azure, devops, cloudcomputing
Published: 2023-12-06 14:10:23

* Under data storage in the left pan click on **file shares**


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

* Click **+ file share** and create a file share


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

* Give your file a global Azure name and click on create.


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

* After the file share is created, click on it


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

* Click on Connect


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

* Copy the script


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

* Go to smart search engine in Azure, search and select virtual machines.


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

* Select your virtual machine


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

* Under operations in the left pan, click on **Run command**


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

* Next, click on **RunPowerShellScript**


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

* Paste in the script you copied earlier and click **Run**


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

* Replace the **PowershellScript** and click on run


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

* Return to the file shares blade to verify the new folder and file were created.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isv2pmi1sc6gjby98mff.png)
"Transforming Smiles: The Artistry of Dental Veneers at PurpleDental"
Tags: dentalimplant
Published: 2023-12-06 14:08:39

In the realm of cosmetic dentistry,[ dental veneers](https://purpledentalct.com/services/dental-veneers/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj9w47y5zhxafnjef0a7.jpeg)) stand as a beacon of artistic transformation, offering a pathway to impeccable smiles. At PurpleDental, the application of dental veneers isn't just about enhancing teeth—it's an artful blend of precision, customization, and a commitment to crafting radiant smiles.

Understanding Dental Veneers
Dental veneers are thin, custom-made shells crafted from high-quality materials such as porcelain or composite resin. These shells are meticulously bonded to the front surface of teeth, masking imperfections and enhancing their appearance.

Craftsmanship at PurpleDental
At PurpleDental, the application of dental veneers is an artisanal process. Their team of skilled cosmetic dentists and technicians collaborates closely to ensure each veneer is tailored to fit the patient's unique dental anatomy and aesthetic preferences.

The Veneer Application Process
The journey to a dazzling smile with dental veneers involves several steps:

Consultation and Planning: A detailed consultation allows patients to express their desired outcomes. Comprehensive assessments help in planning the perfect smile makeover.

Preparation: A minimal amount of enamel is gently removed from the tooth surface to accommodate the veneer. Impressions are taken to create custom veneers that match the patient's natural teeth.

Trial and Bonding: Before permanent placement, patients may have a trial fitting to ensure the veneers align with their expectations. Once approved, the veneers are bonded to the teeth using specialized dental adhesives.

Beyond Aesthetics: Functional Enhancement
Dental veneers not only enhance the appearance of teeth but can also improve functionality by addressing issues like chipped, misaligned, or discolored teeth. They provide a natural-looking, durable solution for achieving a flawless smile.

Personalized Care and Satisfaction
At PurpleDental, the emphasis goes beyond the technical procedure—it's about patient satisfaction and confidence. Each individual is guided through the process with care, ensuring their preferences are considered and their concerns addressed.

Embrace a Radiant Smile Today
Dental veneers at PurpleDental embody precision, artistry, and a dedication to crafting smiles that exude confidence and charm. For those seeking a transformative solution to achieve a picture-perfect smile, dental veneers stand as a gateway to renewed self-assurance and radiance.

Contact PurpleDental today to schedule a consultation and embark on a journey towards a dazzling, custom-crafted smile with expertly applied dental veneers.
Make Circular View in React Native using Border Radius
Published: 2023-12-06 14:07:22

In the lifecycle of developing mobile application I came to an requirement where the application needed circular view to display Image. The hackish way implemented was admin was uploading the image with perfect circular dimension. 

The app was used my more people and they started using rectangular images making the UI unfriendly. After dong some research, a way was found where if you create an square and provide radius half of the value of length, it would be a circle. I am trying to demonstrate same thing over here. Let's explore the illustration demonstrating the creation of a circular image view in React Native using border-radius. 

Let's begin with an example to create circular image view from the following code:

```
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

const CircularImgView = ({ imageUri }) => {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: imageUri }}
        style={styles.circularImgView}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  circularImgView: {
    width: 150,
    height: 150,
    borderRadius: 75, // Half of width and height to make it circular
  },
});

export default CircularImgView;

```

Let's see usage of this code:

```
<CircularImgView imageUri="https://yourserverurl.com/profilePic.png" />

```
Now, let's see the Circular TextView:

```
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const CircularTxtVw = ({ text }) => {
  return (
    <View style={styles.circularTextView}>
      <Text style={styles.text}>{text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  circularTextView: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: 'grey',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
    fontWeight: 'bold',
    color: 'black',
  },
});

export default CircularTxtVw;

```
So let's use above code :

```
<CircularTxtVw text="Hello" />

```

I hope this example will give clarity on how to create Circular View using square and borderRadius which is half of the one length of side of the square.
I built a platform to check service uptime and availability
Tags: uptime, buildinpublic, remix, react
Published: 2023-12-06 14:05:51

So I got bored and think of what I can build to easy my workflow and here we are, [Statussync.dev](https://statussync.dev)



## Why [Statussync](https://statussync.dev)

As a developer most of our workflow depends on one service or the other, take Github as example you either use Github as VCS or as a service you build a web app on the challenge now is that any time some part of GH service is down e.g API, Copilot, Pull request, Issues etc there is no way of you know that happened in order to know you either have to go to X (Twitter) and see the trending topics or go to GH status page to keep track of what's wrong.

Let's imagine you have more than one service you used in your web-app e.g Github/GH API, Stripe, Cloudflare, Discord API, Telegram API, Digitalocean etc keeping up with all of these services become a job on it own but what if we can streamline the whole process so that you can do all in a single dashboard.


![Statussync Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84q4nm3uq62doyf8xdrk.png)

[Statussync](https://statussync.dev), a web platform that aggregates all third-party service uptime and incident reports into a single dashboard notifies you when a service is down and aids in the documentation of past incidents. With custom service and monitoring (Coming soon) you will be able to add your own service which user can subscribe to.


### Here I explained how [Statussync](https://statussync.dev) works in detail

{% embed https://www.youtube.com/embed/M46FOIA44aI?si=KRpkbcvQY83K7Ab4 %}


## Tech Stack
- Remix
- Prisma
- TailwindCSS
- Supabase
- Lemonsqueezy
- Digialocean App platform


Launching soon on Product Hunt https://www.producthunt.com/products/statussync


More update coming soon after successful launch on PH, wish me best of luck.


[Statussync.dev](https://statussync.dev)