teleren/devto huggingface dataset:
Dockerizing Angular App
Tags: angular, docker, beginners, devops
Published: 2023-01-26 10:52:12

## **What is Dockerizing?**
**Dockerzing** is the process of packing whole app into a single bundle that will be ready to deploy anywhere in any system that has docker got installed.

# Let's get started....

**Angular** is a very popular framework to make single-page applications. I prepared a simple angular app that helps us in making HTTP Requests(GET,POST, PUT, DELETE, PATCH), simply like post man. 

**Nginx** is a popular web-server that serves static content and also it will works as a reverse proxy. Since our web-app contains simple static content, We'll be using the Nginx to serve the static project.

Dockerizing the angular app is so simple with the following steps

- Prepare the Dockerfile in the Angular project directory
- Build the docker image with the following command
- Run the project with the help of image that we created

# Preparing the docker file
Copy down the following script and create a new file with name **Dockerfile** in the root directory of the project.

`#stage 1`
`FROM node:latest as node`
`WORKDIR /app`
`COPY . .`
`RUN npm install`
`RUN npm run build`
`#stage 2`
`FROM nginx:alpine`
`COPY --from=node /app/dist/<app-name> /usr/share/nginx/html`

Note: Replace the **<app-name>** with your application name

# Preparing the image
Use the following command to build the docker image
> `docker build -t <dockerhub-username>/<image-name>:<version> .`

Or if you created the docker file in the other directory replace **.** with the actual path of the docker file.

After the successful building of the image. We should check if the image got added to the local repository of the docker with the following command
> `docker images`

Now let's deploy the image into a container

> `docker run -p 8080:80 --name <container-name> -d <dockerhub-username>/<image-name>:<version>`

After the successful running of the container we should see the status of the container with the following command and it says Up and running from some minutes/hours.

> `docker ps`

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

Now if we go to browser and access it with `http://localhost:8080` we should see the app running.

# Pushing images to Docker hub
We should have a docker hub account and we have to authenticate first. And then go through with the following steps.

1. Login with docker hub `docker login`.
2. Push the image `docker push <dockerhub-username>/<image-name><version>`

# Summary

We have learnt creating an image of our angular application, running it in a docker container and pushing the image to docker hub.

Thank you for reading the post. Hope the post is beginner friendly and it may helps you. I'm too a beginner :)

Git Repo: `git clone https://github.com/TejeshPalagiri/REST-Pilot.git --branch master`
Docker Image: `docker pull tejeshpalagiri/rest_pilot`
Vue JS -Emit Multiple Values
Tags: vue, beginners
Published: 2023-01-26 10:40:40

**Emit Multiple Values from Child to Parent in  VueJS **

VueJS custom events are a great way to communicate between child and parent components.
I was recently was in need of a way to pass more than one value from child to parent within a single custom event. The VueJS Docs do not provide any example showcasing this and instead I needed to refer to some comments within a Stack Overflow thread and also some articles here on dev.to

Here is what worked for me
**To emit more than one parameter, it's best to pass the data as an object:**



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

VueJS's custom events only accepts two parameters:

1. The name of the event. In this case, the event name is success.
2. Data you want to pass. This can be a string, object, number, boolean, or function.

**Access the parameters from the parent component using an event listener:**
We emitted the date event from the child component. This event can be captured within the parent component where the child is rendered using the @ sign, in this case, @date.

@date calls the dateRangeSelected method when success is emitted from the child component.
The fromDate and toDate params will be received as a parameter of type object  for the dateRangeSelected method.We can then access these parameters in this method and use as you please.


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pdv5ymn0631d81i2t5l.png)
How to learn CSS with games
Tags: css, learn
Published: 2023-01-26 10:39:06

Learning CSS isn’t the easiest. But the community helped solving that by creating a lot of interactive games online (as the best way to learn is with games).

### Selectors

If you want to learn CSS selectors, you can try out [CSS Diner 🍱](https://flukeout.github.io/):

![Select the apple on the plate
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uj4ziz0im8b8z5rg6iy5.png)

### Flexbox

For flexbox, you can try out [Flexbox Froggy 🐸](https://flexboxfroggy.com/)

![Frogs needing alignment with CSS flex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/633kujzp457cxv10g553.png)

### Grid

And finally, you can learn CSS Grid with [Grid Garden 🧑‍🌾](https://cssgridgarden.com/)

![Water all plants with CSS Grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/461qqw3byx7kbdyhcmzi.png)
A step-by-step roadmap to mastering Javascript 🔥
Tags: javascript, webdev, beginners, react
Published: 2023-01-26 10:09:59

A step-by-step roadmap to mastering Javascript 🔥

1️⃣ 
Start by learning the basics of JavaScript, such as variables, data types, control structures, and functions.

2️⃣ 
Practice writing code and experimenting with different concepts to solidify your understanding.

3️⃣ 
Learn about JavaScript's core objects, such as arrays, strings, and numbers.

4️⃣ 
Learn about the Document Object Model (DOM) and how to manipulate HTML and CSS with JavaScript.

5️⃣ 
Learn about event handling and how to create interactive web pages.

6️⃣ 
Learn about JavaScript's built-in objects, such as Date, Math, and RegExp.

7️⃣ 
Learn about Asynchronous JavaScript and concepts like promises, async/await, and fetch API.

8️⃣ 
Learn about JavaScript libraries and frameworks such as jQuery, React, Angular, and Vue.js.

9️⃣ 
Practice building real-world projects, such as a simple game, a calculator, or a weather app.

🔟 
Keep yourself up-to-date with new features and best practices by regularly reading documentation and articles about JavaScript.

Hope this helps 🙌

Do Like ❤️ & Save 🔖

𝗙𝗼𝗹𝗹𝗼𝘄 me on **[Linkedin](https://Linkedin.com/in/rammcodes)** for more:
Tips💡+ Guides📜 + Resources ⚡ related to programming and Web Development 👨‍💻

Do **Follow** me here on dev.to ✅
Memory Implications of static vs non-static. Comparing pass by reference & value.
Published: 2023-01-26 09:58:01

In computer programming, a static variable is a variable that retains its value between function calls and has a lifetime that is the entire duration of the program. Non-static variables, also known as automatic or stack variables, are created when a function is called and are destroyed when the function exits.

In terms of memory implications, static variables take up space in memory for the entire duration of the program, while non-static variables only take up space while the function they are declared in is running.

Pass by reference and pass by value are terms that refer to how arguments are passed to a function. In pass by value, the function receives a copy of the argument and any changes made to the argument within the function do not affect the original value of the variable outside the function. In pass by reference, the function receives a reference to the original variable and any changes made to the variable within the function will be reflected in the original variable.

In terms of memory implications, pass by reference allows the function to directly access and modify the memory of the original variable, while pass by value creates a copy of the variable that consumes additional memory.
Transition from Frontend Development to Web3, Blockchain domain ✅
Tags: web3, blockchain, frontend, webdev
Published: 2023-01-26 09:26:02


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

As a frontend developer, I had always been interested in the potential of blockchain technology and the decentralized web. So, when the opportunity presented itself for me to transition into the web3 and blockchain domain, I jumped at the chance.
The transition has been both exciting and challenging. On one hand, there is a lot of new and cutting-edge technology to learn, such as smart contract development and decentralized storage solutions. On the other hand, the ecosystem is still relatively young and there are not as many resources or established best practices as there are in the frontend development world.

One of the biggest challenges I have faced is learning to think differently about data storage and security. In traditional web development, data is typically stored on centralized servers and protected by traditional security measures such as firewalls and password hashing. In the decentralized web, data is stored on a distributed network of nodes and secured through cryptographic methods such as hashing and digital signatures.

Another challenge has been understanding the unique economic and business models of decentralized applications. In traditional web development, revenue is typically generated through advertising or subscription models. In the decentralized web, revenue can be generated through cryptocurrency transactions, token sales, and other mechanisms.

Despite these challenges, I have found the transition to be incredibly rewarding. The decentralized web has the potential to fundamentally change the way we think about data ownership, privacy, and control. As a developer in this space, I feel like I am making a tangible impact on the future of the internet.

Overall, the transition from frontend to web3 and blockchain development has been a great experience. It has pushed me to learn new technologies and think about problem in a different way, which has been a great opportunity for professional growth. And I have no doubt that the web3 and blockchain will continue to evolve and revolutionize the way we interact with the digital world.

Thanks for reading this blog, if you have any queries or just want to connect with me. Please follow this link [samyogdhital](https://linktr.ee/samyogdhital). I am highly active on twitter.
CodePen Designs - 26 : A Pen by Paul Slaymaker
Tags: codepen, css, webdev, design
Published: 2023-01-26 09:51:14

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space.

---


#### Codepen Design - 26
---

{% codepen https://codepen.io/aymak/pen/VwBybMZ %}



---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)


---
---
Intro to Matplotlib in Python, Part1-plot().
Tags: programming, tutorial, python
Published: 2023-01-26 09:44:44

**1. What is Matplotlib**
It is a library which helps us to plot and visualize the data in 2D form. It is an easy way to represent huge amount of data. It was introduced by John D.Hunter in the year 2002.

**2. Why Matplotlib**

- Easy visualization to data.

- Consist of bar graphs, histograms, pie charts, line graphs, etc.

- Compatible with other third-party libraries and packages, that extend its functionality.

**3. Plotting on X and Y axis**

- By default, the plot() function draws a line from point to point.
- Also draws points on graph.
- positions of points are in order. Eg(10,7), here 10 is point on X axis and 7 on Y axis.
- Example:

```
import matplotlib.pyplot as plt
import numpy as np

x = np.array([1, 8])
y = np.array([3, 10])
plt.plot(x,y)
plt.show()
```
OUTPUT

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

**NOTE**
- The x-axis is the horizontal axis.

- The y-axis is the vertical axis.
Asynchronous programming with C#
Tags: csharp, programming, tutorial, dotnet
Published: 2023-01-26 09:35:45

Asynchronous programming is an essential part of modern software development, and C# provides powerful tools for implementing it. Asynchronous programming allows developers to write code that can execute tasks concurrently, without blocking the main thread of execution. This makes applications more responsive and efficient by allowing multiple tasks to be processed at the same time.

In C#, asynchronous programming is implemented using a combination of language features such as async/await keywords and Task objects. The async keyword marks a method as being capable of running in an asynchronous context while the await keyword tells compiler that it should wait until all operations within an async method have completed before continuing with subsequent instructions in the program flow. By combining these two elements together developers can create highly performant applications which are able to process multiple requests simultaneously without waiting on any particular task or operation to complete before continuing with other work items in its queue. 

To illustrate how this works let’s take a look at some sample code written using Visual Studio 2019: 

```
public static void Main() {  

      var myTask = DoSomethingAsync();   // Start executing DoSomethingAsync(). Returns immediately!    

      Console .WriteLine("Doing something else...");     
      // Continue doing other things here...    
} 

private static async Task<int> DoSomethingAsync() {        
      int result = await LongRunningOperation();         
      return result;     
}    

private static int LongRunningOperation(){          
      Thread.Sleep(5000);           
      return 42;        
}
```
 				   
In this example we start off by calling our long-running function “DoSomethingAsync” from our main entry point (Main). Notice however that when we call this function nothing actually happens because all operations within “DoSomethingAsync” are marked with ‘async' so they will run asynchronously instead – meaning they won't block or delay anything else happening inside Main(). We then print out some text indicating what's going on next ("Doing something else...") followed by finally returning control back over again once everything has finished executing inside "LongRunningOperation". 

The advantage here is obvious - not only does our application remain responsive throughout but also no unnecessary resources were wasted during execution since only one thread was used for both functions even though their individual executions were performed independently from each other (in parallel). This makes asynchronous coding very effective when dealing with high volumes data processing scenarios where performance needs to be optimized accordingly

In this blog we focused on what and how's of asynchronous programing, in the next blog we will understand Task class and its methods in more detail.

Happy Coding!...
Book review: Go Programming Language for Dummies
Tags: go, books, beginners
Published: 2023-01-26 09:29:45

Do you have plans to learn Go in 2023?  Which book should you read to help you get started?

That's the question I intend to answer in my new series of book reviews. Today I published the first in a series of 6 reviews, highlighting the good and bad about the most recent books to help you learn Go.

In this video, I review the book "Go Programming Language for Dummies" by Wei-Meng Lee, and offer my recommendation whether you should buy this book, or some other, to help you learn the Go language.

{% youtube https://youtu.be/oxaWKtS0_S8 %}
Test for dynamically created elements like time and token with jest(spys)
Tags: webdev, javascript, beginners, testing
Published: 2023-01-26 09:24:13

Jest is a popular JavaScript testing framework that provides a variety of powerful features for testing your code. One such feature is the spyOn method, which allows you to create a spy on a specific method of an object.

In this article, we'll take a look at how to use the spyOn method, using the following code example as a guide:

```javascript

//code to be tested 
private generateExpirationTime() {
    return new Date(Date.now() + 60 * 60 * 1000);
}

private generateRandomTokenId() {
    return Math.random().toString(36).slice(2);
}

//the test 

test.only('should return sessionToken for valid credentials', async() => { 
    jest.spyOn(global.Math, 'random').mockReturnValueOnce(0);
    jest.spyOn(global.Date, 'now').mockReturnValueOnce(0);

    UserCredentialsDbAccessMock.getUserCredential.mockResolvedValueOnce({
        username:'someUser',
        accessRights:[1,2,3]
    })

    const expectedSessionToken:SessionToken ={ 
        userName:'someUser',
        accessRights:[1,2,3],
        valid:true,
        tokenId:"",
        expirationTime: new Date(60 * 60 * 1000)
    }

    const sessionToken = await authorizer.generateToken(someAccount)
    expect(expectedSessionToken).toEqual(sessionToken);
    expect(SessionTokenDBAccessMock.storeSessionToken).toBeCalledWith(sessionToken);
})

```

In this example, we are testing **a function generateToken that internally uses generateExpirationTime and generateRandomTokenId functions.**

- The `jest.spyOn(global.Math, 'random')` is used to create a spy on the Math.random() method

- The `jest.spyOn(global.Date, 'now') `is used to create a spy on the Date.now() method. 

- The `mockReturnValueOnce `method is then used to specify a value that the spy should return when it is called. In this case, jest.spyOn(global.Math, 'random').mockReturnValueOnce(0) means that the Math.random() **spy will return 0 when it is called for the first time**. 

- Similarly, `jest.spyOn(global.Date, 'now').mockReturnValueOnce(0) `means that the Date.now() spy will return 0 when it is called for the first time.

**summary**


Spies are useful for testing because **they allow you to control the behavior of specific methods in order to test different scenarios**. 

- In this case, by using spyOn to replace the Math.random() and Date.now() methods with spied versions that return specific values, the generateExpirationTime() and generateRandomTokenId() methods can be tested with known input.

Additionally, **_UserCredentialsDbAccessMock.getUserCredential.mockResolvedValueOnce({username:'someUser',accessRights:[1,2,3]}) is used to mock the return value of the function getUserCredential of `User_**
Arrays.fill in Java
Tags: java, coding, programming, interview
Published: 2023-01-26 09:11:04

Ever thought how to fill the whole array with same value in Java !? 
in CPP, we use memset or can initialise with any value, when it comes to java, we use Arrays.Fill().
> Arrays.fill(name of Array, value), it takes the name of array and value 


## index 
we can use form start index to end index to fill the particular value
```
int ar[] = {2, 2, 2, 2, 2, 2, 2, 2, 2};
  // Fill from index 1 to index 4.
Arrays.fill(ar, 1, 5, 10);
System.out.println(Arrays.toString(ar));
```
> [2, 10, 10, 10, 10, 2, 2, 2, 2]



it is very helpful in Dp or when you want to assign same value.
## multiple values
```
 public static void main(String[] args)
    {
        int [][]ar = new int [3][4];
  
        // Fill each row with 10. 
        for (int[] row : ar)
            Arrays.fill(row, 10);
     
        System.out.println(Arrays.deepToString(ar));
    }
```

> we have used  Arrays.deepToString() method Printing 2D array.

## using stream method
```
double[][] arr = new double[20][4];
Arrays.stream(arr).forEach(a -> Arrays.fill(a, 0));
```

### 3D array 
```
 int[][][] ar = new int[3][4][5];
  
        // Fill each row with -1. 
        for (int[][] row : ar) {
            for (int[] rowColumn : row) {
                Arrays.fill(rowColumn, -1);
            }
        }
  
        System.out.println(Arrays.deepToString(ar));
    }
```

### understanding
```
double[][] arr = new double[5][2];
Arrays.fill(arr[0], 0);
Arrays.fill(arr[1], 0);
Arrays.fill(arr[2], 0);
Arrays.fill(arr[3], 0);
Arrays.fill(arr[4], 0);
```
Singula Team Identity & Website
Tags: ux, identity, behance, css
Published: 2023-01-24 10:27:07

May we boast a little?

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

During the last month we’ve been telling how Singula is seen as company — mostly through its key members. Now, it’s time to finally sum it up and there is no better tool for this than branding.

Branding in general and Singula’s website as a part is your uniq digital universe. Within it you can built and modify your own products. This idea was reflected in many interactive elements engaging you into cooperation.

Genuinely, integrity is a key concept for our website, considering the art of progress arises in people’s interaction around the world. We’ve made an effort to prevent you from distraction and built up main design using minimalism and simple shapes.

Our major brand pattern is connected to image of bonding and cooperation an atom. Atom is a universal construction item, tiny and invisible, but running deep into the known world.

Let’s make this step into the future together?

View more about identity case via [link](https://www.behance.net/gallery/155103883/Singula-Team)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hdirs7r5qe4bwjqqwyy.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a65lmlc95pfl6b3z5031.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dx73721mlnk84oqhivv.png)