teleren/devto huggingface dataset:
I want to display data in an Angular application based on true or false values.
Published: 2023-02-27 08:22:07

If the check is angular [application](https://www.interviewbit.com/angular-interview-questions/) true, I want to show the user list and if the check is false I want to show that the data is not available, but currently the user list is being displayed for both true and false.
``import { Component, OnInit } from '@angular/core';
import { UserDataService } from '../services/user-data.service';

``@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  check: any = false;
  pageTitle = 'Users List';
  errorMessage = '';
  //users: IUser[]=[];
  users: any;
  constructor(private userService: UserDataService) { }``

  ``ngOnInit(): void {
    this.userService.users().subscribe({
      next: (users: any) => {
        this.users = users;
        this.check = true;
        console.log("this.users");
        console.log(this.users);
      },
      error: (err: any) => this.errorMessage = err``


   })
  }

}
<p>users works!</p>
<div>*********************User Component*******************</div>
<p>{{check}}</p>
<div *ngIf="check">Data not available</div>
<ul *ngIf="check">
    <li *ngFor="let user of users">
        {{user.name}}
    </li>
</ul>``
Are you looking for a svelte plugin for file upload?
Tags: webdev, javascript, programming, react
Published: 2023-02-27 08:21:29

Check out my project.

![Drag drop](https://i.imgur.com/s04zCZY.gif)
 

There are plugins for each of
- react
- svelte
- vue
- angular

[Project page](https://progress-up.live)
Free AWS Cloud Project Bootcamp: From Zero to Hero, Let's Do This!
Tags: aws, cloud
Published: 2023-02-27 08:18:19

Are you ready to take your AWS skills to the next level? If so, the [Free AWS Cloud Project Bootcamp](https://aws.cloudprojectbootcamp.com/) is the perfect place to start! Led by the talented [Andrew Brown](https://twitter.com/andrewbrown), this boot camp provides a hands-on learning experience that mimics the real-world challenges of working in the cloud. Registration for the boot camp is closed. But you can still join the Saturday [live class sessions](https://www.youtube.com/channel/UC2EsmbKnDNE7y1N3nZYCuGw/live) to follow along and build your skills.

Participating in the boot camp has been a game-changer for my cloud journey. Not only have I been able to grow my technical skills, but I've also gained confidence in speaking about cloud concepts. Using Vim inside the [Gitpod](https://www.gitpod.io/) Terminal to create and edit files, I've challenged myself to deepen my understanding of the underlying concepts and minimize my reliance on the graphical interface.

Taking part in the Free AWS Cloud Project Bootcamp has been a revelation for me. Not only have I expanded my knowledge and understanding of AWS, but I have also discovered that I truly enjoy helping others learn about cloud technologies. It has been incredibly fulfilling to share my expertise with others and guide them through challenging problems.

Ready to unleash your cloud potential? Check out the [Free AWS Cloud Project Bootcamp](https://aws.cloudprojectbootcamp.com/) and get ready to level up your Cloud skills.
Today's Fun Joke For Developers - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2023-02-27 08:00:12

---
title: "Today's Fun Joke For Developers - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259ab8700f.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q___: Why was nobody given food at the developer conference?

___A___: It was a serverless function!
 -->
What Are Some Common Misconceptions about Programming Careers That You've Encountered?
Tags: discuss, beginners, codenewbie
Published: 2023-02-27 08:00:00

Contrary to popular belief, programming is not just for nerds or people who are good at math. 🤓 

There's also the misconception that programming is a solitary profession, but in reality, collaboration and teamwork are essential. 

Another common fallacy is that programming is a monotonous task, but there are many specializations and technologies to explore.

What other misconceptions and errors in judgment have you come across with regards to programming careers? Help us break down the stereotypes and encourage more diversity in tech!
Static vs Dynamic Data Typed Languages
Tags: programming, python, javascript, java
Published: 2023-02-27 07:59:37



##  Static Data type Languages:

- Variables are judged at compile time.
- Explicitly type declarations are required before hand.
- Values are static types which can't be altered once set.
- Produces more optimized code with the compile time performance check.
- C , C++ , JAVA , GO


```
string language_type;
language_type = "static"
```

> ~~language_type = 1~~


##  Dynamic Data type Languages:

- Variables are evaluated at runtime.
- No need to declare the data type before hand.
- Values are dynamic and can be altered with their types.
- Reduces extra efforts but in the end is less optimized as the code is prone to runtime errors.
- PHP , Perl , Python , JavaScript


```
var language_type;
language_type = "dynamic"
```

> language_type = true
Export data to CSV in Ruby
Tags: rails, ruby, csv
Published: 2023-02-27 07:46:33

A quick note on how to export an [Array](https://ruby-doc.org/core-3.0.1/Array.html) of [Objects](https://ruby-doc.org/core-3.0.1/Object.html) to [CSV](https://en.wikipedia.org/wiki/Comma-separated_values) in [Ruby](https://ruby-doc.org/).

---

For example when fetching data in [Rails](https://rubyonrails.org/) with raw SQL via:

```rb
data = ActiveRecord::Base.connection.execute('SELECT ...').to_a
```

One will get following data structure:

```rb
puts data

{"id"=>1, "first_name"=>"John", "last_name"=>"Doe"}
{"id"=>2, "first_name"=>"Jane", "last_name"=>"Doe"}
{"id"=>3, "first_name"=>"Michal", "last_name"=>"Bryxí"}
```

Then this one-liner can be used to create a file called `export.csv` with all the data:

```rb
File.write('./export.csv', data.map{ 
  |row| row.values.to_csv 
}.join)
```

Which will produce following output:

```csv
1,John,Doe
2,Jane,Doe
3,Michal,Bryxí
```

---

Image created with Midjourney prompt: `Clerk looking at tables and writting stuff with a pencil on a paper; Ruby is shining on a shelf --ar 16:9`
Convert directory into BTRFS subvolume
Tags: btrfs, linux, docker
Published: 2023-02-27 07:40:05

I've been using BTRFS for development and am loving the simplicity and features it provides.

One thing I do a lot is database snapshot on docker volume (to test db migration) - which I can easily do with BTRFS.

Here's how:
1. Convert docker volume directory into BTRFS subvolume
2. Snapshot the docker volume (now a BTRFS subvolume)

## Convert docker volume directory into BTRFS subvolume

```bash
# Directory to convert into BTRFS subvolume
dirPath='/var/lib/docker/test_docker_volume'

# Rename original dierctory
mv "${dirPath}" "${dirPath}_original"

# Create btrfs subvolume
btrfs subvolume create "${dirPath}"

# Copy as "reflink" for speed and save space
cp --archive --one-file-system --reflink=always \
  "${dirPath}_original/." "${dirPath}"

# Remove old directory
rm -rf --one-file-system "${dirPath}_original"
```

## Snapshot the docker volume

Create a read-only snapshot of `test_docker_volume` docker volume:

```bash
btrfs subvolume snapshot -r \
  /var/lib/docker/test_docker_volume \
  /var/lib/docker/test_docker_volume_bak
```
IoT Webinar: Power the IoT Devices.
Published: 2023-02-27 07:28:08





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

RT-Thread is partnered with NXP Semiconductors, STMicroelectronics, and WCH Electronics to bring an IoT Webinar on Mar 15, 8:00 AM — 11:00 AM PDT.

The 2023 IoT Contest follows the IoT Webinar on March 15, there are over 60 free hardware and cash prize prepared for the participants.

Register and get a chance to win! http://bit.ly/3RQGvcV
A Web App to generate custom dummy JSON and deploy it as an endpoint
Tags: webdev, fullstack, ai, openai
Published: 2023-02-27 07:12:37

Hello everyone, I'm excited to share a web application that I developed recently which generates dummy JSON using AI in just a few seconds. The app also enables users to deploy the generated JSON to an endpoint.

On a side note, I was able to develop the entire application, including planning, wireframing, UI design, frontend, backend, and testing, in less than a week. It was quite a challenge, but I'm happy with the end result.

I would love to hear your feedback on this application, and I'm open to any suggestions or improvements that you may have. So please do check out the link to the web application below and let me know your thoughts.
Thank you for your support!

https://generatejson.com/
Responsive Web Design: Best Practices and Advanced Techniques
Tags: webdev, css, design
Published: 2023-02-27 07:10:21

Creating a responsive website that looks great on any device is a must-have for any modern web designer. In this post, we’ll explore the best practices and advanced techniques for responsive web design.

1. **Use a Mobile-First Approach** With the majority of internet traffic now coming from mobile devices, it’s essential to design for mobile first. This approach helps you focus on the most important content and functionality, and ensures that your website is optimized for smaller screens.
2. **Design with a Fluid Grid**  
 A fluid grid is an essential component of responsive web design. Instead of using fixed widths for your website’s layout, use a grid system that scales with the screen size. This ensures that your website’s content is always displayed optimally, no matter the screen size.
3. **Use Media Queries for Targeted Styling**  
 Media queries allow you to target specific screen sizes and apply custom styling. Use media queries to create different layouts and styles for different devices, ensuring that your website looks great on all screens.
4. **Optimize Images for Performance**  
 Images can significantly impact your website’s performance. To ensure your website loads quickly on all devices, it’s essential to optimize your images. Use image compression tools and choose the right image formats to reduce file size without sacrificing quality.
5. **Test Your Design on Different Devices**  
 To ensure your design is truly responsive, test it on different devices and screen sizes. Use developer tools or testing tools to check how your website looks and performs on different devices.
6. **Use responsive frameworks and tools** Utilize frameworks and tools like [Bootstrap](https://getbootstrap.com/), or [TailwindCss](https://tailwindcss.com/) to streamline your responsive design process and ensure cross-browser compatibility. Bootstrap and Tailwind CSS, for instance, offer pre-built components and styles that you can use to easily create a responsive design. These frameworks also handle cross-browser compatibility, which can be a time-consuming aspect of responsive web design. With these tools, you can focus more on creating unique, custom designs that are optimized for all screen sizes, without worrying about compatibility issues.

### Conclusion

In conclusion, responsive web design is an essential skill for any modern web designer. With the tips and techniques we’ve explored in this blog post, you can create a responsive website that looks great on any device. From a mobile-first approach to fluid grids and media queries, these best practices will help you take your web design skills to the next level.

##Thank you for reading this far

Subscribe to my [Newsletter](https://sarveshh.beehiiv.com/) for exciting posts just like this.

{% embed https://sarveshh.beehiiv.com/subscribe %}

_Originally published at_ [_https://blog.sarveshpatil.com_](https://hashnode.com/preview/63ee488b9e450e00085d4aed)_._
Building a Dashboard with Chakra UI and ReactJS
Tags: javascript, beginners, react, chartjs
Published: 2023-02-27 07:01:50

Are you looking to build a dashboard for your web application but don't know where to start? Look no further than Chakra UI and ReactJS! In this post, I'll walk you through the steps I took to create a dashboard using these two powerful tools.

First, let's talk about Chakra UI. Chakra UI is a simple and modular UI component library for React that makes it easy to build responsive and accessible user interfaces. It comes with a variety of pre-built components, such as buttons, forms, and cards, which can be easily customized to fit your specific needs.

Now, let's dive into the dashboard itself. To start, I created a new ReactJS project and installed Chakra UI. From there, I created a layout using Chakra UI's Box component and began adding in other components, such as a graph and progress bars.

To add some interactivity to the dashboard, I used ChartJS and react-gauge packages to manage temperature, wind-speed and handle user interactions. 

If you're interested in seeing the full code for this dashboard, you can check out my GitHub repository. I hope this post has been helpful and inspires you to build your own dashboard using Chakra UI and ReactJS!


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

Deployed Link: `https://senai-assignment.vercel.app/`
Ultimate Guide To Exploratory Data Analysis
Tags: datascience, dataanalysis, programming, python
Published: 2023-02-27 06:24:59

Exploratory Data Analysis (EDA) is a crucial step in data science that involves looking over data and dissecting its key features. EDA assists in discovering patterns, connections, and underlying trends in data, which can then result in the creation of insights and guidance that is useful. Here is a step-by-step instruction for carrying out EDA:
**Step 1: Identify the issue and gather information**
Clearly defining the issue you're trying to find a solution for and gathering the appropriate information are the first steps in EDA. In order to do this, it may be necessary to collect data from a variety of sources, clean and prepare the data, and make sure the data is in an analytically-ready format.
**Step 2: Describe the data**
The following step is to describe the information you have gathered. The types and distributions of the variables or features that are present in the data are identified as part of this process. The data can be summarized using descriptive statistics like mean, median, mode, and standard deviation.
**Step 3: Visualize the data**
In order to better understand the data's patterns and relationships, EDA also involves visualizing the data. Some of the popular visualization methods used in EDA include histograms, box plots, scatter plots, and bar charts.
**Step 4: Identify outliers and anomalies**
It is crucial to recognize outliers and inconsistencies and assess how they affect the data in order to ensure that the analysis is accurate. Outliers can be found using a variety of statistical techniques, including the Z-score method and the interquartile range method.
**Step 5: Explore relationships between variables**
EDA also entails investigating the relationships between variables. The strength and direction of a relationship between two variables can be determined using correlation analysis. Regression analysis, for instance, can be used to model the relationship between two or more variables.
**Step 6: Test hypotheses**
You can test hypotheses to see if there is a statistically significant disparity between groups or variables after patterns and relationships have been identified. In order to test a hypothesis, a null hypothesis must be established, data must be gathered, and the null hypothesis must then be tested against the data.

**Step 7: Conclude your analysis and offer recommendations**
Following the completion of the previously mentioned steps, you are able to arrive at conclusions and offer suggestions based on the knowledge gained during the EDA process. These suggestions can be used to direct choices and enhance business results.

In conclusion, EDA is an essential process in data science that entails gathering, cleaning, defining, visualizing, and analyzing data in order to draw conclusions and offer advice. The above-described procedures will help you conduct EDA successfully and get the most out of your data.
White Box Testing
Tags: beginners, programming, tutorial, testing
Published: 2023-02-27 06:13:50

One of the software test design techniques, White Box Testing, can also be called transparent box testing. Just like its name, it is a technique in which test scenarios are designed by knowing and measuring the internal structure of the software’s code by looking through a white box. The main purpose of this method is to test the code snippets one by one and see that they can be run in a healthy way even in the smallest particle. It is tested whether the inputs determined as a result of the requirements meet the outputs in a part of the code. The functionality of the software is not tested.

It is mostly used by software developers as well as by software testers. This method is used at the unit, integration, and walk test levels. When we examine the advantages and disadvantages of the white box testing technique.


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

### Advantages of White Box Tests

- Since the tests are designed and made while the software is being developed, it can be intervened early.
- The reliability of the code is high as the developers review their code snippets many times.
- Code optimization is more.

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


### Disadvantages of White Box Tests

- Finding a qualified software tester who knows how to read code is difficult and costly.
- There may be points that may be overlooked because the developer does his own testing.
- Tests can take a long time because they are very comprehensive and detailed.


---

## 2 Different White Box Test Design Techniques


### 1. Command Test Design Technique
A command is a function that we want to perform directly in the code. Int y=5 is a command. Command test design, on the other hand, is achieved by going through all the commands in the software at least once and testing all of them.

### 2. Decision Test Design Technique
Decision scope is the decision points in our code that can generate more than one result, such as if else, while, switch. In this test design technique, the cases where the decision points are passed over each condition once are evaluated. Decision points must be passed over.
Knative async [beta]
Tags: kubernetes, knative, beginners, eventdriven
Published: 2023-02-27 05:51:03

Knative async is a feature that allows Knative services to be called asynchronously or conditionally asynchronously. It is currently in beta with the core functionality in place. Knative async is part of Knative Eventing, which is responsible for interconnecting asynchronously all the different parts of your distributed application.

Main benefit is that it helps free-up local resources following a true non-blocking model for long running connections using a queue. The requester just gets a `202-Accepted` as an acknowledgement.

Knative async works by creating a custom ingress for each Knative service that supports asynchronous invocation. The ingress contains an annotation that is read by the networking controller, which then creates the specific components necessary for that network mesh type. The components include a queue-proxy sidecar container that handles buffering requests until they are ready to be processed by the service.

To invoke a service asynchronously, you can either label it as always asynchronous or conditionally asynchronous. Always asynchronous services do not need a special header to be called asynchronously, while conditionally asynchronous services will respond when the **Prefer: respond-async** header is provided as part of the request.


---
**Most of the content on this beta feature is here:**
https://developer.ibm.com/blogs/knative-async-overview-use-case-and-status
Vector Clocks
Tags: distributedsystems, computerscience, systemdesign
Published: 2023-02-27 05:35:12


The main limitation of [Lamport Clocks](https://dev.to/sriramr98/the-notion-of-logical-time-311j) was that they were unable to assist us in determining the causal relationship between two events.

> If you're not sure what a causal relationship is, read my article on [Message Ordering](https://dev.to/sriramr98/message-ordering-23k8) first.

The reason for this is that we had a single timestamp that was being updated globally, which did not provide us with a complete picture of the sequence of events that occurred.

## Vector Clocks
Instead of each node maintaining a single timestamp, we maintain a list of timestamps - one for each node in every node.

For example, if we have a three-node system, the vector timestamp would look like \[ T1, T2, T3 \], where T1 is the logical time of Node 1, T2 is the logical time of Node 2, and T3 is the logical time of Node 3.

The entire list forms a single logical clock, known as vector clocks.

## How do Vector Clocks work?
1. When a node boots up, it determines the number of nodes in the cluster (N) and fills an array of size N with 0's.
2. Before executing an event, the node increments the clock of that node's time in the list. `N[i] = N[i] + 1`
3. When a message is sent, the time for that node is incremented, and the vector clock is attached to the message.
4. When a message is received, 
	1. It performs the action
	2. Update each list element by taking the maximum of that element's own list and the list received.


![Vector Clock Movement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m14kyprb6jufd65jofn4.png)



We say Event A caused Event B if A's vector timestamp is strictly less than B's vector timestamp.
We can also say that Event A and Event B are concurrent if their timestamps cannot be compared.

## Pseudocode 
```
on initialisation at node Ni do
	T := [0,0,..0] //One element for each node
end on

on any event occuring at node Ni do
	T[i] := T[i] + 1
end on

on request to send message m from node Ni do
	T[i] := T[i] + 1
	send_message(m, T)
end on

on receiving message (m, T') at node Ni do
	T[j] := max(T[j], T'[j]) for j in (1..n)
	T[i] := T[i] + 1;
	process_message(m)
end on
```

## Issues with Vector Clocks
The main problem with vector clocks is that they require a large amount of storage because each node must store N timestamps based on the number of nodes.

Furthermore, as the number of nodes increases, we will be sending a significant amount of data because the entire vector clock with all node timestamps must be sent even if only two nodes are interacting.