teleren/devto huggingface dataset:
XML com Java
Tags: braziliandevs, java, tutorial
Published: 2021-01-28 19:31:51

Olá pessoal, hoje irei explicar um pouco sobre como gerar um **XML** através de uma classe Java, com a biblioteca [XStream](https://x-stream.github.io/download.html).

Vamos criar um projeto chamado **XML_Java**, e dentro do projeto criar uma pasta com o nome **lib**, onde será armazenado o nosso **jar**.

Será necessário baixar o jar do **XStream** no site: [https://x-stream.github.io/download.html](http://x-stream.github.io/download.html).

![xstream](https://franciscochaves.com.br/assets/img/blog/2017/fev/xstream.gif)

Após o _download_, salve o arquivo **jar** na pasta **lib** dentro do projeto criado anteriormente, e adicione o jar ao _build path_, com estes procedimentos efetuados, o projeto reconhece o XStream.

![Adicione biblioteca XStream](https://franciscochaves.com.br/assets/img/blog/2017/fev/workspace-lib-add.gif)

Agora vamos codificar um pouco, utilizaremos duas classes, uma  classe cliente que vamos usar seus atributos para criação do **XML**, e outra classe para roda a aplicação.

```java
public class Cliente {

  private String nome;
  private String sobrenome;
  private int idade;
  private int identificador;

  public String getNome() {
    return nome;
  }

  public void setNome(String nome) {
    this.nome = nome;
  }

  public String getSobrenome() {
    return sobrenome;
  }

  public void setSobrenome(String sobrenome) {
    this.sobrenome = sobrenome;
  }

  public int getIdade() {
    return idade;
  }

  public void setIdade(int idade) {
    this.idade = idade;
  }

  public int getIdentificador() {
    return identificador;
  }

  public void setIdentificador(int identificador) {
    this.identificador = identificador;
  }
}
```

Classe responsável por inicializar a aplicação.

```java
import com.thoughtworks.xstream.XStream;
import com.thoughtworks.xstream.io.xml.DomDriver;

public class Main {

  public static void main(String[] args) {

    Cliente cliente = new Cliente();
    cliente.setNome("Francisco");
    cliente.setSobrenome("Chaves");
    cliente.setIdade(24);
    cliente.setIdentificador(1);

    XStream stream = new XStream(new DomDriver());

    //remoneando o nome do pacote
    stream.alias("cliente", Cliente.class);

    //criando o xml
    String xml = stream.toXML(cliente);

    System.out.println(xml);
  }
}
```

O resultado impresso no console após a execução:

```xml
<cliente>
  <nome>Francisco</nome>
  <sobrenome>Chaves</sobrenome>
  <idade>24</idade>
  <identificador>1</identificador>
</cliente>
```

Código do projeto no GitHub: 

{% github franciscojsc/xml-com-java %}
Deploy your React app on heroku and go severless
Tags: react, node, heroku, serverless
Published: 2021-01-28 19:22:43

The word serverless feels like there is no server but actually **Serverless is nothing but someone else's server.** So don't be confused. 

Herokuapp is great for deploying your projects without worrying about setting up a server. Heroku does that for you. 

So let's start with a react app and deploy it on heroku.

🛠️ Tools we need: 

 * A react app running on your local server.
 * [Heroku Cli] (https://devcenter.heroku.com/articles/heroku-cli)
 * Obviously a heroku account.


###Step 1: 
Let's create an `app.js` file on the root of you project for heroku configs so heroku will run a node server and that node server will serve the content from our react build. We will use express to create a server. Run this command in terminal inside the app root directory.

`npm i express`

Your `app.js` file should look like this.

`app.js`:
```
const path = require("path");
const express = require("express");
const app = express();
const publicPath = path.join(__dirname, "build");
const port = process.env.PORT || 3000;
app.use(express.static(publicPath));
app.get("*", (req, res) => {
  res.sendFile(path.join(publicPath, "index.html"));
});
app.listen(port, () => {
  console.log("Something cool is up and running 🚀🚀🚀!");
});
```

###Step 2:
Make changes in your `package.json` file.

```
 "scripts": {
    "start": "node app.js",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
```
I have replaced the start command with dev and start has new content which actually runs a production build of your app. The reason to do this because heroku will always look for start command and run it. We can not run dev server on heroku because of slow performance. You can do it if you want. But its not recommended.

###Step 3: 
Just run these commands in your terminal and there you go your app is deployed on heroku. 

`heroku create`, This creates a new project and a git repo in your heroku account. 

```
git add .
git commit -m "Initial Commit"
git push heroku master
```
Now if you want to continue your local development. You will not use `npm start` because npm start will run the local build if you have one, instead you will use `npm run dev` to continue development on local environment. 

Image Credits: Dave Ceddia
Bootstrap: The Fastest Way To Nice Panel UI
Tags: css, interface, ux
Published: 2021-01-28 19:19:42

We're using the [latest Bootstrap 5.x](https://getbootstrap.com/docs/5.0/getting-started/introduction/) so the first thing we want to do is set up our basic HTML skeleton to incorporate the bootstrap styles.

You can get the link for the required CSS and JavaScript at the bootstrap site (you can see them in our example).

The JavaScript link is required so that the functionality of the pill buttons work to move selection and load the content of each associated `div`.

```HTML
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Panel</title>
        <meta charset="utf-8">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    </head>
    <body>
    </body>
</html>
```

Next thing we do is get the sample using pill buttons and tabs from the official site and paste it into our HTML.

Copy and paste the following so that it is between your body tags.

You can click the *HTML* tab in the jsfiddle below to see it.
You can also click the *Result* tab and see it in action.

{% jsfiddle https://jsfiddle.net/raddevus/c7wsuj24/2/ html,result %}

### First Inner Div
The first inner `div` contains the `<a>` tags which represent the pill buttons the user can click.  

### Second Inner Div
The second inner `div` contains a set of divs, each of which represent the associated content which is displayed when the associated pill is clicked.

It's not much to see but the functionality is already there.

Now all we have to do is change the content to anything we want to display and it _just works_!.

## Change The Content
Here's an example with some additional content.  All I did was add some content between the second inner divs.  

{% jsfiddle https://jsfiddle.net/raddevus/c7wsuj24/13/ result,html %}

This is a nice quick way to get to this type of nice User Interface and functionality.

If you liked this, check out my new book, [Learn HTML5, CSS, JavaScript (Launch Your Dev Career)](https://dev.to/raddevus/published-book-amazon-kindle-free-3bj5) in my article here on dev.to about the book.

I also just [created an emoji manager](https://dev.to/raddevus/mojiwriter-easy-way-to-use-emojis-3lch) and wrote it up here on dev.to.
How to make a random password generator using javascript
Tags: html, css, javascript, opensource
Published: 2021-01-28 19:18:37

### So today we are doing to build a random password generator using html css js so lets start

At first lets see the folder structure
<pre>
PASSWORD GENERATOR MINI PROJECT USING HTML CSS & JAVASCRIPT
├───css
├───img
└───js
</pre>
 
in the project root make an index.html file and make a css file in css folder and a js file in js folder and for copying the password we need an clipboard image download it
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t1d2fytkox50hkbh698d.png)

open project in the code editor 
<pre>code .</pre>

### import css and js in the index.html file

now lets start codding.Write the entire html
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pncr8n528hyjwu3z0lqd.png)

After it we want to code the css so lets start. copy the entire style.css from here

<pre>
* {
  margin: 0;
  padding: 0;
  font-family: Consolas;
  user-select: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f8f8f8;
}

.inputBox {
  position: relative;
  width: 450px;
}

.inputBox h2 {
  font-size: 28px;
  color: #333333;
}

.inputBox input {
  position: relative;
  width: 100%;
  height: 60px;
  border: none;
  margin: 15px 0 20px;
  background: transparent;
  outline: none;
  padding: 0 20px;
  font-size: 24px;
  letter-spacing: 4px;
  box-sizing: border-box;
  border-radius: 4px;
  color: #333333;
  box-shadow: -4px -4px 10px rgba(255, 255, 255, 1),
    inset 4px 4px 10px rgba(0, 0, 0, 0.05),
    inset -4px -4px 10px rgba(255, 255, 255, 1),
    4px 4px 10px rgba(0, 0, 0, 0.05);
}

.inputBox input::placeholder {
  letter-spacing: 0px;
}

.inputBox #btn {
  position: relative;
  cursor: pointer;
  color: #fff;
  background-color: #333333;
  font-size: 24px;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 8px;
}

.inputBox #btn:active {
  background-color: #9c27b0;
}

.copy {
  position: absolute;
  top: 58px;
  right: 15px;
  cursor: pointer;
  opacity: 0.2;
  width: 40px;
  height: 40px;
}

.copy:hover {
  opacity: 1;
}

.alertbox {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: #9c27b0;
  color: #fff;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: 4em;
  display: none;
}

.alertbox.active {
  display: flex;
  justify-content: center;
  align-content: center;
}

</pre>
now lets write the js file open it and start put the js code in

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cvvhw4ajrwh1wxeivisw.png)

so now we have completed the project. the full code is on github .please follow me on github if you want and thanks for reading good bye...
github: [get the code here](https://github.com/Sadman-Sakib2234/Random_Password_Generator)
Our component development principals.
Tags: components, library, react, programming
Published: 2021-01-28 18:18:33

Building a component library it’s not an easy task, notably when it fulfills the purpose of being used by multiple projects and requirements are continually changing. Given these challenges, we have a set of principles that guide us through the process of creating reliable components.‌

**API design is foundational:** We take this field seriously.

1. Don’t start writing any code until the specification document is done and evaluated by the team.
2. Design from restricted API then relax based on valid use cases.
3. Create a deterministic API that doesn’t allow you to do the same thing in two different ways.
4. Defer it as long as possible. The best way of reducing the impact of breaking changes is to avoid them in the first place.
> *Until you have the information necessary, you are just guessing at what is needed and your success is determined largely by luck. I also believe you may be grossly underestimating the costs of speculation. — [WayneMack](https://wiki.c2.com/?WayneMack)*

5. Generalization process is the key to avoid breaking changes. Avoid generalizing your component too early but keep in mind that the new API shouldn’t compromise generalize when new use cases arrive. I wrote more about this interesting topic [here](https://medium.com/react-rainbow/generalization-process-applied-to-api-design-of-ui-components-88b68421792c).

**First-class Testing**: Our components are test infected. There isn’t software improvement without refactoring and there isn’t refactoring without tests.

**Internationalization**: We design each component with [i18n](https://en.wikipedia.org/wiki/Internationalization_and_localization) in mind. Any new component or feature has to be able to work fully in different locales.


> *[react-rainbow-components](https://react-rainbow.io/) wouldn’t be possible without the support of engineers from around the world. Thus, building a component library with internationalization is a requirement, not a nice to have.*


**Accessibility**: It’s part of our definition of done. It’s a must-have for each component.

**Documentation**: It’s critical to the success of any project. There is no adoption without good documentation.

I know you have your own set of principles, let us know if ours make sense to you, we are eager to learn from you. Comment below.
Interchange numerical values without temporal's
Published: 2021-01-28 18:44:54

This excercises introduce you to a dark idea of what is information, at least for me, let's see:

supouse that a = 2 and b = 3

Do that

let a = a + b;
let b = a - b;
let a = a - b;

Is done, y así intercambias dos valores numéricos sin intermediarios, Luis. Chao.
Adding new features to my open source (React + Django) job board
Tags: react, django, javascript, python
Published: 2021-01-28 18:40:50

A few days ago I [wrote a blog](https://dev.to/harsh_vardhhan/open-sourcing-my-automated-job-board-reactjs-django-pbg) on my recently built open source job board. Since then I have added some new features. Built an admin login so owner of the job board can -

## **Post jobs manually to the job board**
{% youtube 36DFsjmBejQ %}


## **Edit job posts (even the ones which are scraped from the internet)**
{% youtube JVvcek-Hwas %}

## **What will you learn by these new features**
- **Django Authentication** for creating the admin functionality.
- **Firebase** for uploading image of job post.

## **What feature I plan to add next**
- Integrate **stripe payment** for posting paid jobs. 

## **[Back-End](https://github.com/TrakBit/fullstackbot-backend) & [Front-End](https://github.com/TrakBit/FullStackBot)**
[![FullStackBot](https://dev-to-uploads.s3.amazonaws.com/i/wyo7ixlmesq0otbwpjat.jpg)](https://www.fullstackbot.com/)
5 Signs You Are Ready To Become a Programmer
Tags: career, productivity, beginners
Published: 2021-01-28 18:37:04

[![Signs If You Are Ready To Be a Programmer](https://dev-to-uploads.s3.amazonaws.com/i/apd3gysk84ts8bvkc36a.png)](https://youtu.be/bNT-mxVsE7k "Signs If You Are Ready To Be a Programmer")


In this video, I am underlining some important personality traits that are as important as having a programming ability:

1. Curiosity  
2. Resourcefulness
3. Discipline
4. Be Patient
5. Be Rational

[YouTube - DevPool](youtube.com/channel/UC03vw5F2isFkbJhyEZU5bvg?sub_confirmation=1 "DevPool")
How to save your Flash Application
Tags: electron, flash, showdev, javascript
Published: 2021-01-28 18:31:24

# ⚡ Save Flash ⚡
Save Flash is an Electron App that permit to include your Web Flash Application in an Electron container and run it as Desktop App.

On December 31, 2020 Flash is officially dead, but not all applications written with it. If you have an application, personal project or anything else developed in Flash and deployed online you can still make it accessible as a desktop application thanks to 'Save Flash'!

Save your application, save Flash.

{% github webeetle/save-flash %}

## Who are you?
In case you're interested I'm {% github riktar/riktar %}
Create A Form Template - Building SaaS #78
Tags: python, django, templates
Published: 2021-01-28 18:27:12

{% youtube 0Cm1R4aGLoY %}

In this episode, I created a template for one of my new forms on the new social media app that I'm building. We talked about context data, template styling, and special considerations for forms in templates.

I had an empty template for the invite sending form to begin.

I filled in a first attempt at the template with a header and displaying form errors. While building that, I added some context information that was needed for the display.

Since this is a new app, I created new styles that didn't exist yet. We needed a disabled button style for the scenario when the user can't send an invite.

After styling things, I added the hidden form data that the Django view expected to receive before sending an invite to another user.

Once the form was functional, we updated the template to include informational copy to make the page more understandable. In the process of adding that copy, I added some dynamic data to show how many remaining connections the user had available.

I put this new data on the `User` model and wrote some tests for this.
Structurizr quick tip: moving relationship descriptions
Tags: architecture, c4model, structurizr
Published: 2021-01-28 17:36:19

---
title: Structurizr quick tip: moving relationship descriptions
published: true
description: 
tags: #architecture #c4model #structurizr
//cover_image: https://direct_url_to_image.jpg
---

By default, Structurizr will render relationship descriptions half way along the line, like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ruytm53f0mlmddg8juk7.png)

If you need to move the relationship (perhaps because it's overlapping something else), when editing the diagram, you can hover the mouse pointer over the relationship so that it's highlighted, and press the `Up`/`Down` cursor keys to move it forwards/backwards along the line. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nhcfyghs4f69mxtoneqq.png)

Just note that this doesn't work when auto-layout mode is enabled.
Eat Sleep Cloud Repeat  - The Podcast
Published: 2021-01-28 17:35:21

Hi there - I'm James Millar.  If you don't already know me, I'm a freelance software developer and Pluralsight author from the UK.  I specialise in cloud technologies, mainly Azure and AWS.  I write extensively about both platforms and I'm passionate about teaching people about the cloud.

So I decided to launch a new podcast - Eat Sleep Cloud Repeat.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/venssr9au67ia88joipp.png)

So what’s it all about?  Do we really need another podcast about the cloud?

Well in this podcast I want to put something together for beginners.  Those people that are new to the cloud.  Sure there’s going to be useful stuff here for everyone but I’m going to assume that you know nothing about cloud computing at all.  Maybe you run a small business or perhaps you lead a team of software developers, there’s going to be something here for you.

In the first few episodes, we’re going to be focusing on what exactly the cloud is.  Why you might want to embrace it and how you can move your existing code into the cloud.

We’re then going to look at how you can use the cloud to drive your business forward.  How you can innovate and get the edge on your competitors.

Some of it’s going to be business focused and some will be more technical.  I’m even hoping to get a few guests on to talk about their experiences so if you're interested in getting involved then let me know.

Find out more at [james-millar.co.uk](https://www.james-millar.co.uk) or listen now on [Apple Podcasts](https://podcasts.apple.com/gb/podcast/eat-sleep-cloud-repeat/id1550512916) or [Spotify](https://open.spotify.com/show/20MAcHYu8bPCG8wDYlax3h)
AWS CloudFormation Templates: Getting Started. Available Now
Published: 2021-01-28 17:21:38

I'm excited to announce a new course is available now in the Pluralsight library,  

The AWS CloudFormation Templates: Getting Started course shows you step by step how you can use CloudFormation Templates to codify your infrastructure, providing you with a single source of truth and allowing you to automate the deployment of your infrastructure.  You will explore how to create resources, discover how to use parameters and outputs and how to define mappings. When you’re finished with this course, you’ll have the skills and knowledge of CloudFormation templates needed to create templates for your own infrastructure.

Find it now only on [Pluralsight](https://www.pluralsight.com/courses/aws-cloudformation-templates-getting-started)
LearnDash WordPress-LMS Review
Tags: learndash, lms, wordpress
Published: 2021-01-28 17:17:43

Wenn Sie nach einem WordPress LMS-Plugin suchen, finden Sie schnell Empfehlungen für LearnDash. Dies ist zum einen auf das Gesamtpaket zurückzuführen, das vom Learning Management System bereitgestellt wird. Sie zahlen einmal und können unbegrenzt viele Kurse erstellen, Ihre Inhalte schützen und sogar Kursforen für Ihre Schüler haben. Es gibt fast keine unerfüllten Wünsche.

In wenigen Minuten können Sie Kurse erstellen und verkaufen, den Fortschritt der Benutzer verfolgen, Zertifikate, Prämienpunkte und Abzeichen ausstellen und Wettbewerbe erstellen. Wenn Sie es ernst meinen, Online-Kurse zu erstellen, dann ist LearnDash das WordPress LMS-Plugin für Sie.


Weiter lesen: [LearnDash Review](https://kursprofi.com/review/learndash/)
YC startup, founding engineer,  Regis Wilson chats with Corey Quinn about joining a startup during the pandemic
Tags: startup, devops
Published: 2021-01-28 17:00:51

---
canonical_url: https://releasehub.com/blog/podcast-guest-on-screaming-in-the-cloud
---

I had the pleasure of reconnecting with Corey Quinn on his excellent podcast, ["Screaming in the Cloud"](https://www.lastweekinaws.com/podcast/ "Screaming in the Cloud podcast"). The far-ranging topics wandered working together at a company, to discussing how far internet technology has developed, to changing jobs in the middle of a pandemic, to what we do at Release.
You can view the full episode and transcript [here](https://releasehub.com/blog/podcast-guest-on-screaming-in-the-cloud "Reconnecting with an old boss, Regis Wilson. Screaming in the Cloud episode").
อะไรคือความแตกต่างระหว่าง shell, sh, และ bash
Tags: linux
Published: 2021-01-28 16:36:27

### **Basic Unix Architecture**
ก่อนอื่นต้องขอพูดถึงเรื่อง Basic Unix Architecture ก่อน ซึ่งองค์ประกอบหลักของ Unix ประกอบด้วย 3 ส่วนหลักๆ คือ 
- **Kernel**: เป็นเซ็ตของโปรแกรมที่ใช้สำหรับจัดการ และติดต่อกับอุปกรณ์ Hardware ต่างๆ
- **Shell**: เป็น Command interpreter ที่ทำหน้าที่เชื่อมต่อระหว่างผู้ใช้งานกับ Kernel ตัวอย่าง shell เช่น **sh**, *ksh*, *csh*, **bash**
- **Utilities**: เป็นคำสั่งที่ผู้ใช้งานสามารถเรียกใช้ได้บน Shell

![](https://dev-to-uploads.s3.amazonaws.com/i/r7qu41hcfgkt0zz37hhv.jpg)


สรุป Bourne **SH**ell (sh) และ **B**ourne Again **SH**ell (Bash) ก็คือ shell command-line interpreter ทั้งคู่

### **แล้ว sh กับ bash มันแตกต่างกันอย่างไร?**
ถ้าว่ากันง่ายๆ เลย bash ก็คือ sh ที่ถูกใส่ฟีเจอร์เพิ่มเข้ามา เพื่อให้สามารถทำงานได้หลากหลายมากยิ่งขึ้น เช่น bash สามารถใช้ local variable ได้แต่ sh ทำไม่ได้

### **ในเมื่อ bash ดีว่า sh แล้วทำไมเรายังต้องใช้ sh อยู่อีกละ ?**
เหตุผลที่ยังคงต้องใช้ **sh** อยู่ก็เพราะว่า:
- sh มันเป็น shell command-line interpreter ที่เป็นมาตรฐานสำหรับ POSIX system ซึ่งเราสามารถใช้ script ที่เขียนด้วย **sh** ไปรันบน OS ที่ compatible กับ POSIX system ได้

### Reference:
- https://gist.github.com/mdeguzis/1d429ae8a8ccff78ea82
- https://ragavwrittings.home.blog/2019/05/10/unix-is-always-ultimate/
- https://medium.com/dolab/shell-script-eaff418b49a5
- https://en.wikipedia.org/wiki/POSIX