teleren/devto huggingface dataset:
Use Flexbox to Make Responsive Layouts
Tags: css, flatiron, design, beginners
Published: 2023-05-03 22:16:38

I'm at the beginning of my Web Development journey like many of you, and it is a long and difficult road. But remembering if I keep going, all this hard work will pay off in the end. As I build upon my skills and add new tools to my belt, the things I used to think were hard(like callback functions) become easier with time. 

Unlike a lot of other fullstack devs, I actually love CSS and think it is fun to make a unique design of a webpage. I want to share with you one of my newest tools I have learned. Which is using Flexbox instead of hard-coding margins and padding. It allows you to create flexible and responsive layouts that look great on all screen sizes without the need for media queries(awesome, right?!).

The main advantage of using Flexbox is that it allows you to align and distribute your HTML elements in a container, which then can be aligned vertically and horizontally. Allowing you complete control of the element's size, order, and spacing.

To start using Flexbox, you will need to create a container element in your HTML file and then add child elements into the container. Then, to turn that container into a Flexbox, in your CSS file you will set the display property to flex. Lastly, you can set the flex properties of the child elements to determine how you want them to look. 

HTML

```html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```
CSS

```css
.flex-container {
  display: flex;
  flex-direction: row;
}
```
With these flex properties, the child elements within the flex container will now be evenly spaced. Flexbox also offers many other flex properties that can be used to customize the layout of your page. Some of these include flex-wrap, flex-flow, align-content, flex-basis, and align-self. These properties give you the ability to control the size, order, and alignment of individual flex items within the container and there are more properties to explore on your own.

Flex-flow is the way to define flex-direction and flex-wrap in a single declaration and they are defined like this.

```css
 .container {
        display: flex;
        flex-flow: row wrap;
    }
```

Using flexbox can save you a lot of time and effort when it comes to creating responsive layouts. Instead of manually calculating margins and padding for each element, flexbox does it for you. It allows you to easily create dynamic and flexible designs that adapt to different screen sizes without the need for media queries.

In conclusion, flexbox is a powerful tool for creating responsive layouts in web development. By using flex properties and a flex container, you can easily align and distribute your HTML elements in a flexible and responsive way.
Generate cryptographically-protected passwords with PHP
Tags: security, password, php, cybersecurity
Published: 2023-05-03 22:12:13

### How to implement cryptographically-protected passwords with PHP?

{% youtube sXl-T3DLO_Y %}


**What the video will cover:**
1. What’s a cryptographically secure password and how to use a Cryptographic Random Number generator (CRNG)?
2. `int_random` is available since PHP 7. Benefits of using a cryptographically secure function in comparison with `mt_random()`
3. When dealing with password, it’s very important to use a “cryptographically secure” like `random_int()` with PHP >=7.0 or random_compat for PHP 5.6 and older versions.
Visually programmed Chatbot powered by Rete.js 2
Published: 2023-05-03 21:22:41

![Rete.js 2 Chatbot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zerlcw0egvmsk65ekvoa.png)

This is a simple demonstration of a chatbot whose behavior is programmed using a visual editor.


{% codesandbox nok9iq %}

In this implementation, all elements are customized, including animated connections. The chat window is presented as a separate node that can be moved only using special handles at the bottom and top. A dataflow and control flow-based engine is used to process the graph. There is also validation of connections by checking socket compatibility.

{% github retejs/rete %}
Handling NULL in the DBs
Tags: database, dataengineering, sql
Published: 2023-05-03 21:00:52

_NULL_ represents an unknown value or its absence. But an absence of value doesn't mean an absence of problems with it.

First of all different DBMSs may behave differently when handling _NULL_ values (depending on SQL dialect or architecture). But I'll concentrate on common patterns in this topic. Let's have a look at the typical hurdles and ways to deal with them based on the two main situations (data modeling and querying the data).

---

### Data Modelling
Any data storage begins with data modeling. And it would be useful to understand how can _NULL_ values affect your database design.

1. **Primary key** uniquely identifies each record in a table, and cannot contain _NULL_ values.
2. Avoid situations when **foreign key** is a _NULL_ value. It might lead to broken relationships between tables. You could avoid it setting _NOT NULL_ constraint.
3. Not all DBMSs treat _NULL_ as a unique value. So it's better to avoid **unique constraints** in the columns which possibly could have _NULL_ values.
4. **Partitioning** by the column which potentially has _NULL_ values could lead to uneven data distribution and hence reduce the benefits of partitioning. You may encounter a similar problem in the **bucketing**/**clustering** process.

### Querying the data
1. Generally any **arithmetic operation** involving a _NULL_ will result in _NULL_. For example, 120 - _NULL_ = _NULL_.
2. Be careful when **comparing values** potentially containing _NULLs_. _NULL = NULL_ is not true, and neither is _NULL <> NULL_. Instead, you should use the _IS NULL_ or _IS NOT NULL_ operators to check for _NULL_ values.
3. **Aggregate functions** usually ignore _NULL_ values. However, the _COUNT_ function counts _NULL_ values when using the _COUNT(*)_.
4. **Logical operations** involving _NULL_ values could result in _NULL_.
5. When you **filter** the values in the column containing _NULLs_ you may lose some important data. For example, you have a table with columns Name and City, and you want to select all the names from all the cities except New York and Washington. Using _City IS NOT IN ('New York', 'Washington')_ will result in rows with the _NULL_ city being lost.
6. When you **INNER JOIN** tables if either of the join columns contains a NULL value, the row will not be included in the result set.

### Classic handling approaches
The general approach to handling _NULL_ values includes:
1. Use **COALESCE** (or analogs depending on DBMS) for the columns which potentially can have a _NULL_ value.
2. Use **IS NULL** or **IS NOT NULL** for comparison operations.
3. Use **OUTER JOIN** or handle the JOIN clause using COALESCE when comparing columns possibly containing _NULL_ values.
4. Create **Unit tests** and **Quality metrics** for your data.
5. Experiment more. Knowledge comes with practice.
Unleashing the Power of Statistical Analysis in Machine Learning: Exploring Common Methods and Techniques
Tags: python, stats, machinelearning
Published: 2023-05-03 20:28:16

Hello readers today, I want to talk about the importance of statistical analysis in machine learning.

Statistical analysis involves 

- collecting
- organizing, 
- summarizing,
- interpreting data


to find patterns, trends, and relationships. This helps us better understand the data and make informed decisions based on evidence.

> **Statistical Techniques** are utilized by machine learning to learn from data and provide predictions or recommendations, especially for challenging problems that traditional programming methods find difficult to handle.

Statistical analysis helps us prepare data for machine learning, select the right features, evaluate model performance, and interpret results. Machine learning helps us discover new insights from the data, test hypotheses, and make predictions.

> There are some common statistical methods used in machine learning such as 
> - descriptive statistics, 
> - inferential statistics, 
> - correlation,
> - regression,
> - classification, 
> - clustering,
> - and dimensionality reduction.

I hope you have enjoyed reading the blog and grain some knowledge in it. Please leave a comment below if you have any questions or feedback. Thank you for your time and attention!
Unwrap Oracle Home .plb
Tags: oracle, troubleshooting, sql, database
Published: 2023-05-03 20:25:49

When you get an error with an Oracle `DBMS_` package, there's a line number given to be able to troubleshoot. However, most of them are `wrapped` to have their code compact, with comments stripped, when loading it in the dictionary. Opening the file with a `CREATE OR REPLACE PACKAGE BODY` shows only random printable characters:

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

To troubleshoot an error, you can get the PL/SQL code back easily in order to check the line where you got an error. 

There's a plugin for SQL Developer:
{% embed https://github.com/Trivadis/plsql-unwrapper-sqldev %}

An online site can also do it online: https://www.codecrete.net/UnwrapIt/

Here is a small script that writes the code from all `*.plb` in the `$ORACLE_HOME` to a `.unwrapped` one:

```sh
export PATH=$PATH:$ORACLE_HOME/python/bin
pip install html2text
for f in $(grep -l ' wrapped *$' $(find $ORACLE_HOME -name "*.plb"))
do
 curl -s -F "file=@$f" -F "ShowLineNumbers=false" -F "UnwrapFile=Unwrap File" https://www.codecrete.net/UnwrapIt/ |
 html2text | awk '
/Unwrap More Code/{p="Y";next}
/Bleichenbacher/{print "--",$0;next}
p=="Y"{gsub(/ʼ/,qq);print}
' qq="'" > ${f}.unwrapped && wc ${f}.unwrapped
done
```

This is to run on only in a lab, why not a container started from Oracle 23c Free edition (`docker run container-registry.oracle.com/database/free`), and is for educational purpose only. Nothing is encrypted when wrapped, but that doesn't give you any right on the code. This is not Open Source!
How to Read and Visualize CSV Data in Golang using Gonum/Plot
Published: 2023-05-03 19:35:49




**Introduction
**
CSV (Comma Separated Values) is a popular format used for storing and exchanging data. In this blog post, we will learn how to read CSV data and visualize it using the Gonum/Plot package in Golang.
**
Prerequisites**

Before we start, make sure you have Golang installed on your machine. You can download and install it from the official Golang website (https://golang.org/dl/). We will also be using the Gonum/Plot package for visualization, which you can install by running the following command:

```
go get -u gonum.org/v1/plot/...

```


We will be using the Titanic dataset for this example, which can be downloaded from the following link: [https://www.kaggle.com/c/titanic/data.](https://www.kaggle.com/c/titanic/data.) Download the dataset and save it as titanic.csv in your working directory.
**
Reading CSV Data**

To read CSV data in Golang, we will be using the encoding/csv package. The following code reads the titanic.csv file and stores the data in a slice of slices:

```
// Open the CSV file
file, err := os.Open("titanic.csv")
if err != nil {
    panic(err)
}
defer file.Close()

// Create a new CSV reader
reader := csv.NewReader(file)

// Skip the header row
if _, err := reader.Read(); err != nil {
    panic(err)
}

// Read in all the CSV records
records, err := reader.ReadAll()
if err != nil {
    panic(err)
}



```
In this code, we first open the titanic.csv file and create a new csv.Reader. We then skip the header row using the Read() function, and read in all the CSV records using the ReadAll() function. The data is stored in a slice of slices, where each slice represents a row in the CSV file.
**
Visualizing CSV Data**

To visualize the CSV data, we will be using the Gonum/Plot package. The following code creates a scatter plot of the CSV data: 

```
// Create a new plot
p := plot.New()

// Convert the CSV data to a plotter.Values
data := make(plotter.XYs, len(records))
for i, record := range records {
    x, err := strconv.ParseFloat(record[0], 64)
    if err != nil {
        panic(err)
    }
    y, err := strconv.ParseFloat(record[1], 64)
    if err != nil {
        panic(err)
    }
    data[i].X = x
    data[i].Y = y
}

// Add a scatter plot to the plot
scatter, err := plotter.NewScatter(data)
if err != nil {
    panic(err)
}
scatter.GlyphStyle.Color = color.RGBA{R: 255, A: 255}
scatter.GlyphStyle.Radius = vg.Points(4)

// Add the scatter plot to the plot and set the axes labels
p.Add(scatter)
p.Title.Text = "Titanic Dataset"
p.X.Label.Text = "Age"
p.Y.Label.Text = "Fare"

// Save the plot to a PNG file
if err := p.Save(4*vg.Inch, 4*vg.Inch, "scatter.png"); err != nil {
    panic(err)
}

```
In this code, we first create a new plot using plot.New(). We then convert the CSV data to a plotter.XYs slice, where each element represents a data point in the scatter




[Apache-Age:-https://age.apache.org/](https://age.apache.org/)
[GitHub:-https://github.com/apache/age](https://github.com/apache/age)
Star Catcher: Using ChatGPT and Midjourney make a Game completely from Scratch
Published: 2023-05-03 19:30:18

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

Check out my latest video

The gaming industry has consistently pushed the boundaries of innovation, and with the rapid advancements in artificial intelligence, we're entering a new era of possibilities. In our latest video project, I combined the powers of ChatGPT, MidJourney, JavaScript, and PixiJS to develop a game from scratch. Before diving into the project overview, let's briefly explain these powerful tools.

ChatGPT: An AI-driven language model developed by OpenAI, ChatGPT is designed to understand and generate human-like text. It can be a valuable asset for tasks like content creation, code generation, and problem-solving.

MidJourney: An AI-driven image generation tool, Mid Journey can create high-quality visuals and designs based on textual prompts. It's a fantastic resource for developing game assets and graphics.

JavaScript: A versatile programming language, JavaScript is widely used for web development, enabling the creation of interactive and dynamic elements on web pages.

PixiJS: A 2D WebGL graphics library for JavaScript, PixiJS allows for fast, efficient rendering of visuals, making it a popular choice for game development.

Now that you know the tools, I'll give you a high-level overview of the project here, but to truly appreciate the power and potential of these technologies, you'll want to watch the video for yourself.

**The Project: Star Catcher - A Space Adventure**

Our goal was to create a fun, engaging game called Star Catcher, featuring a player-controlled spaceship dodging asteroids and catching stars. ChatGPT and MidJourney came together to shape the game's design, mechanics, and aesthetics. The project had its challenges, but the combined technologies demonstrated their capabilities in creating a functional, enjoyable game.


As the game took shape, I turned my focus to polishing and refining the gameplay. Some highlights include adding a combo system to reward skilled players, making visual enhancements, and implementing character selection to allow players to choose their favorite color for their spaceship.

Despite the incredible potential of AI-driven technologies, it's important to recognize their limitations. In our project, ChatGPT struggled with certain tasks, like integrating the new character selection feature using JavaScript and PixiJS. However, as I continue to refine my understanding of how to work with these tools, I can leverage their strengths more effectively.

Our Star Catcher project is just the beginning of what's possible when we combine human ingenuity with AI
Shut up and take my image!
Published: 2023-05-03 19:07:29

If you have built your docker container image and want to deploy a web service, then you need to push your image up to some image repository. Think; GitHub for images.

I prefer github actions, and deploying each time we push to the main branch.

You might need to configure your cloud provider's image repository manually before pushing images to. For GCP, we need to create a Service Account manifest first (JSON content).

This is the part of my github action that pushes the image:

```
name: Push Image

on:
  push:
    branches:
      - "main"

  GCP_PROJECT_ID: ${{ secrets.GCP_PROJECT_ID }}
  GCP_SA_KEY: ${{ secrets.GCP_SA_KEY }}
# Replace monadium with the name of your image.
IMAGE_URL: eu.gcr.io/${{ secrets.GCP_PROJECT_ID }}/monadium:${{ github.sha }}

jobs:
  ci:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout repo
        uses: actions/checkout@v2

      # This will change depending on your cloud provider. Main thing is that docker is configured to use the auth credentials from your cloud provider.
      - name: Setup GCP
        uses: google-github-actions/setup-gcloud@master
        with:
          project_id: ${{ env.GCP_PROJECT_ID }}
          service_account_key: ${{ env.GCP_SA_KEY }}
          export_default_credentials: true

      - name: Setup Docker For GCP
        run: |
          gcloud auth configure-docker -q

      # Build the application outside your docker image. Cargo build is Rust's build command. Change it to what your language requires.
      - name: Cargo Build
        run: cargo build --release

      # This will copy the built artefact(s) into the image.
      - name: Docker Build
        run: docker build -t $IMAGE_URL .

      # You can now push to the image repository.
      - name: Docker Push
        run: docker push $IMAGE_URL
```

There are a lot of other ways to push images, but I like the fact that most of this code works the same for all cloud providers, and usually works the same way locally if you need to debug.
Data Visualization: The Importance of Visualizing Data and How to Use Matplotlib and Seaborn to Create Stunning Visualizations
Tags: machinelearning, datascience, learning
Published: 2023-05-03 18:45:25

Data visualization is a powerful tool that allows us to communicate complex data insights in a simple and intuitive way. By creating visual representations of data, we can better understand patterns and relationships that might be difficult to discern from raw data alone. In this article, we will discuss the importance of data visualization and how to use libraries such as Matplotlib and Seaborn to create different types of visualizations.

**The Importance of Data Visualization:**

Data visualization is important for several reasons. Firstly, it allows us to identify patterns and relationships in the data that might not be immediately apparent from looking at raw data. Secondly, it helps to communicate data insights to others in a way that is easy to understand and interpret. Finally, it can help to identify errors or outliers in the data that might otherwise go unnoticed.

**Creating Visualizations with Matplotlib:**

Matplotlib is a popular data visualization library in Python that provides a wide range of tools for creating static, interactive, and animated visualizations. Here are some examples of how to use Matplotlib to create different types of visualizations:

1. Line plots:

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

x = np.linspace(0, 10, 100)
y = np.sin(x)

plt.plot(x, y)
plt.show()
```

2. Scatter plots:

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

x = np.random.normal(size=100)
y = np.random.normal(size=100)

plt.scatter(x, y)
plt.show()
```

3. Bar charts:

```
import matplotlib.pyplot as plt

x = ['A', 'B', 'C', 'D', 'E']
y = [10, 15, 20, 25, 30]

plt.bar(x, y)
plt.show()
```

**Creating Visualizations with Seaborn:**

Seaborn is a Python library that provides a higher-level interface to Matplotlib, making it easier to create more complex and visually appealing visualizations. Here are some examples of how to use Seaborn to create different types of visualizations:

1. Line plots:

```
import seaborn as sns
import numpy as np

x = np.linspace(0, 10, 100)
y = np.sin(x)

sns.lineplot(x, y)
plt.show()
```

2. Scatter plots:

```
import seaborn as sns
import numpy as np

x = np.random.normal(size=100)
y = np.random.normal(size=100)

sns.scatterplot(x, y)
plt.show()
```

3. Bar charts:

```
import seaborn as sns

x = ['A', 'B', 'C', 'D', 'E']
y = [10, 15, 20, 25, 30]

sns.barplot(x, y)
plt.show()
```

**Conclusion:**

In conclusion, data visualization is an essential tool for communicating complex data insights in a simple and intuitive way. By using libraries such as Matplotlib and Seaborn, we can create a wide range of visualizations that help to identify patterns and relationships in the data, communicate data insights to others, and identify errors or outliers in the data. By taking the time to properly visualize data, we can gain a deeper understanding of the data and make more informed decisions based on the insights that we discover.
Welcome Thread - v223
Tags: welcome
Published: 2023-05-03 18:37:09

---
title: Welcome Thread - v223
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![The words "hello there" flashing in multiple colors with waving hands around the greeting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdotc00ged0s5k8n4fhc.gif)
---

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

3. If you are new to coding, want to help beginners in their programming journey, or just want another awesome place to connect with fellow developers, check out the [CodeNewbie Org](https://dev.to/codenewbieteam). You can also say hi in our weekly [Hello Newbie](https://dev.to/codenewbieteam/hellonewbie-v3-22go) thread!

**Great to have you in the community!**
Mother D*cker!
Published: 2023-05-03 18:33:25

If you want to use containers to deploy something to the cloud, here's a simple way to get started without feeling like a sinking ship.

## 0 Build your code outside of a container

You first need to find out how to build your code. You might generate a .dll, .jar, or a folder of .js files.

## 1 Copy the code into a container image

Find a good base image to use to run your code.
Copy the built content into your container.
Expose the right port for your web server.
Set the command that starts the web server.

Here's a Dockerfile example for C# .NET v7:

```
FROM mcr.microsoft.com/dotnet/aspnet:7.0
WORKDIR /app
COPY published/ ./

EXPOSE 5182

ENTRYPOINT ["dotnet", "LabApi.dll"]
```

This will work across architectures for many languages, but not all. If it doesn't work locally, then it can still work in your CI/CD of choice, like GitHub Actions. And that's the only thing you need to get started!