teleren/devto huggingface dataset:
IBM iX @ WeAreDevelopers World Congress 2022
Published: 2022-05-24 09:41:56

It’s finally time again: The global developer community with the world’s greatest minds in tech meets once again in Berlin to share recent insights on software development, best practices and future tech trends. And IBM iX is in! With a century of human-centred IBM tech expertise in our DNA, we’re building bridges between humans and machines. Connect with us on site in area A, booth A.2.6, or check out our program to level up your skills. We’re looking forward to two days full of insights, a great speaker line-up, hands-on workshops, and fun!

➡️ Join our IBM iX workshops, listen to our expert talk or meet us at our booth on site and enjoy a good chat with our people from IBM iX! Find out more: https://lnkd.in/eWprhyD9
_____________

Session 1: 14 June, 12 AM – 1 PM
Automated Code Quality Checks with Custom SonarQube Rules
Daniel Strmečki, Martin Gluhak

Workshop 1: 14 June, 12.45 AM – 2:45 PM
Unit vs. Integration Testing in Spring Boot
Dajana Jeđud, Ivan Foro

Workshop 2:15 June, 11.45 AM – 1.45 PM
Implementing GrahQL with plain Java
Josip Primorac, Josip Mlakar

_____________

🎁 Take your chance to get a free event ticket & a surprise onsite and check out our speakers & sessions: https://lnkd.in/eWprhyD9

#ibmix #WeAreDevelopers #wearedevs #wearedevs22
Livewire confirm Sweet Alert
Published: 2022-06-04 21:13:07

---
title: Livewire confirm Sweet Alert
published: true
date: 2022-05-24 09:36:00 UTC
tags: 
canonical_url: https://dcblog.dev/livewire-confirm-sweet-alert
---

Using Sweet alerts with Livewire is possible by triggering events from Livewire / AlpineJs and having javascript listen for the event and act when it's triggered.

On a link or button using wire:click we can trigger sending an event using $emit it takes 2 params 

1) the event name  
2) the value to pass

```

<button wire:click="$emit('triggerDelete',{{ $contact->id }})" type="button">Delete</button>
```

Then in a view when the event is triggered a closure will file. From there a normal Sweet Alert is executed. When a confirmation runs the if result.value runs then triggers a method on the Livewire controller called delete and pass in the value.

```

@push('scripts')
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {

        @this.on('triggerDelete', id => {
            Swal.fire({
                title: 'Are You Sure?',
                html: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
            }).then((result) => {
                if (result.value) {
                    @this.call('delete',id)
                }
            });
        });
    })
</script>
@endpush
```

This approach is dead simple and allows Livewire and Sweet Alerts to work together.

You could trigger the event from a Livewire controller if you prefer.

Thanks to [BezhanSalleh](https://laracasts.com/@BezhanSalleh) for posting the solution on [Laracasts](https://laracasts.com/discuss/channels/laravel/how-to-make-confirmation-alert-in-livewire)
List the size of the database and tables: MySQL CLI
Tags: mysql, table, database, size
Published: 2022-05-24 09:29:40

1) Size of the database (in GB): 
```
SELECT table_schema AS "Database", SUM(data_length + index_length) / 1024 / 1024 / 1024 AS "Size (GB)" FROM information_schema.TABLES GROUP BY
table_schema;
```

2) Size of the database (in MB):
```
SELECT table_schema AS "Database", SUM(data_length + index_length) / 1024 / 1024 AS "Size (MB)" FROM information_schema.TABLES GROUP BY table_schema;
```

3) Size of the tables of a database (in MB): 
```
SELECT table_name AS "Table", ROUND(((data_length + index_length) / 1024 / 1024), 2) AS "Size (MB)" FROM information_schema.TABLES WHERE table_schema = "<db_name>" ORDER BY (data_length + index_length) DESC;

```
How I setup a new machine for development
Tags: productivity
Published: 2022-05-24 09:09:55

Recently I purchased the new [Acer Nitro 5 AN515-58](https://www.acer.com/ac/en/US/content/model/NH.QFJAA.001) as my Lenovo Yoga 720-13ikb 80x6 can no longer support my development needs. As this is my first blog I hope this is not cringey.

Machine: [Acer Nitro 5 AN515-58](https://www.acer.com/ac/en/US/content/model/NH.QFJAA.001)
Operating System: Windows 11, Fedora 36
Editors: [VS Code](https://code.visualstudio.com/), [Sublime Text](https://www.sublimetext.com/), [Android Studio](https://developer.android.com/studio), [IntelliJ Idea](https://www.jetbrains.com/idea/)
Programming Languages: [Python](https://www.python.org/), [Flutter](https://flutter.dev/), [Java](https://www.java.com/en/), [JavaScript](https://www.javascript.com/), [Node](https://nodejs.org)
Productivity: [Cron Calendar](https://cron.com/), [Notion](https://notion.so/), [Anytype](https://anytype.io/), [Spotify](https://www.spotify.com/), [Discord](https://dicord.com/), [Todoist](https://todoist.com/)
Extensions: [Vitesse Theme](https://marketplace.visualstudio.com/items?itemName=antfu.theme-vitesse), [Flutter](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter), [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python), [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), [Carbon Product Icons](https://marketplace.visualstudio.com/items?itemName=antfu.icons-carbon), [Codesnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)
Other Apps: [Postman](https://www.postman.com/), [Chrome](https://www.google.com/chrome/), [Brave](https://brave.com/)

Write you own setup down below 👇

---
Create Simple Tab Component with Pure React
Tags: react, javascript
Published: 2022-05-24 09:08:28

Let's create Tabbed menu and view component with pure React. 

Let's define a `TabItem` component, pass it to the Tab and remove unnecessary nodes expect for `TabItem` by identifying the function's name in `props.children`. Use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `props.defaultIndex`. 
And use `Array.prototype.map` on the collected nodes to render the `tab-menu` and `tab-view`. Define `changeTab`, which will be executed when clicking a `<button>` from the `tab-menu`. `changeTab` executes the passed callback, `onTabClick` and updates `bindIndex`, which in turn causes a re-render, evaluating the style and className of the `tab-view` items and tab-menu buttons according to their index.


```css
/* App.css */
.tab-menu > button {
  cursor: pointer;
  padding: 8px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
}
.tab-menu > button.focus {
  border-bottom: 2px solid #007BEF;
}
.tab-menu > button:hover {
  border-bottom: 2px solid #007BEF;
}
```

```javascript
// Tabs.jsx
function TabItem(props) {
  return <div {...props} />;
}

function Tabs(props) {
  const [bindIndex, setBindIndex] = React.useState(props.defaultIndex);
  const changeTab = newIndex => {
    if (typeof props.onTabClick === "function") props.onTabClick(newIndex);
    setBindIndex(newIndex);
  };
  const items = props.children.filter(item => item.type.name === "TabItem");

  return (
    <div className="wrapper">
      <div className="tab-menu">
        {items.map(({ props: { index, label } }) => (
          <button
            onClick={() => changeTab(index)}
            className={bindIndex === index ? "focus" : ""}
          >
            {label}
          </button>
        ))}
      </div>
      <div className="tab-view">
        {items.map(({ props }) => (
          <div
            {...props}
            className="tab-view_item"
            key={props.index}
            style={{ display: bindIndex === props.index ? "block" : "none" }}
          />
        ))}
      </div>
    </div>
  );
}
```

Now you can use Tabs Component to render in your React application. 

```javascript
ReactDOM.render(
  <Tabs defaultIndex="1" onTabClick={console.log}>
    <TabItem label="A" index="1">
      Lorem ipsum
    </TabItem>
    <TabItem label="B" index="2">
      Dolor sit amet
    </TabItem>
  </Tabs>,
  document.getElementById("root")
);
```

Thanks
My Experience With Data Science so far
Tags: python
Published: 2022-05-24 08:54:02

When beginning my educational career after high school i got really into politics, this was around the 2016 election and that sort of field really interested me. I was able to attend the University of Maryland getting a government and politics bachelors degree and really enjoy my time there. This is where an issue arose, i graduated right as the Coronavirus outbreak began and most of the jobs in my field i was looking into were no longer hiring due to restrictions, and jobs in that field are not in high demand in the first place. Thus began my year and a half spiral of mental health problems and frustrations with the fact that it was so hard to move on with my life.

Eventually i started looking into masters programs and one that caught my eye was data science within government at UMD. My initial thought was that i might as well get a full and deeper understanding of data science and not pigeon hold myself to just government work. My brother attended Flatiron 2 years ago in the software engineering program and loved it so it was a no-brainer for me to attend Flatiron if i wanted to learn data science.

What i am most looking forward to learning in this course is AI programming and how i can set up a system to figure out data for any interest i am pursuing, whether that be politics, video games, sports, or anything else that catches my eye.

My hope is that by taking this course in Flatiron i will become a better person, find a job that truly interests me and hopefully i will become a good data scientist.
5 best websites for front-end developers
Published: 2022-05-24 08:53:02

Hello! Today I want to tell you best wwebsite for front-end developers.

```bash
Let`s start
```

------

**MDN Web Docs**

_MDN Web Docs_, previously Mozilla Developer Network and formerly Mozilla Developer Center. 

_The MDN Web Docs_ is an excellent resource for web developers. It gives an in-depth explanation of almost all concepts in JavaScript(including ES6) CSS and HTML. It a well-trusted source of knowledge. It also has a collection of articles curated to help beginners get into web development.

[MDN](https://developer.mozilla.org/ru/docs/Web)

------

**W3Schools**

_W3Schools_ is a free educational website for learning coding online. 

_W3Schools_ is a web developers site, with tutorials and references on web development languages such as HTML, CSS, JavaScript, PHP, SQL, and JQuery, covering most aspects of web programming. The site derives its name from the World Wide Web (W3), but is not affiliated with the W3C

[W3Schools](https://www.w3schools.com/html/default.asp)

------

**r/webdev**

_r/webdev_ cool community on Reddit where you can get help and find new features in Web development like new libraries, frameworks, and so on

[r/webdev](https://www.reddit.com/r/webdev/)

------

**SmallDev**

This website is like a swiss knife for web utilities. It is a lot of common utilities that we need on a daily basis.

It is super simple and intuitive. You just have to search for the feature you are interested in and click on it. Then you will be presented with some inputs params and generate the desired output.

[SmallDev](https://smalldev.tools/)

------

**codepen.io**

_CodePen_ is a social development environment. At its heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating online code editor for developers of any skill, and particularly empowering for people learning to code. Codepen focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.

[codepen.io](https://codepen.io/trending)
搭建出租盘口微信盘、信用盘、双面现金盘等
Tags: 盘口定制开发搭建, 信用盘, 哈希竞猜
Published: 2022-05-24 08:21:21

SG、BW、IDC、OA信用盘，微信飞鸟扫码盘，迪士尼大富杏彩现金足球真人视讯，其他另有web.app、外贸电商、小程序、棋牌、红包暗雷、区块链、交易所等各种程序开发
欢迎各位老板来聊：电报小飞机telegram：【duoteJG】
COMPLETE CONFIGRATION NODE + MONGODB + AWS + DOMAIN + SUBDOMAIN | HOST API SERVER!
Published: 2022-05-24 08:12:30


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

In this post I can give you complete information about the deploy nodejs api server in aws!

**We need to run commands and install packages!**

1. sudo apt update
2. sudo apt upgrade
3. sudo apt install nodejs
4. sudo apt install npm
5. sudo apt install git
6. sudo apt install nginx
7. Install mongodb [OFFICIAL WEBSITE](https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-ubuntu/)
8. sudo npm install pm2

**PROCESS TO LIVE**
_AWS CONFIGRATIONS:_

```
1. LAUNCH EC2 INSTANCES
2. UPDATE SECURITY GROUP - ADD PORT 
[ 22, 80, 443, 27017, <BACKEND-PORT> ]
3. GENERATE ELASTIC IP
4. POINT YOUR MAIN DOMAIN TO EC2 PUBLIC IP A RECORD
5. CREATE A SUBDOMAIN THAT NEED TO POINTING A SPECIFIC PORT
```

_EC2 CONFIGRATION:_

```
1. UPDATE NODEJS TO NEWEST LTS VERSION
2. CLONE BACKEND REPO TO [ VAR/WWW/HTML ] PATH
3. START PM2 [ SUDO PM2 START <FILENAME> ]
4. START MONGODB [ SUDO SYSTEMCTL START MONGOD ]
5. START NGINX [ SUDO SYSTEMCTL START NGINX ]
```

_>> ACCESS VIA IP IN YOUR BROWSER_

```
[ EC2 PUBLIC IP EXAMPLE 1.201.10.2 - NGINX MAIN SERVER ]
[ 1.201.10.2:<BACKEND-PORT> - BACKEND SERVER ]
```
_CONFIGURE NGINX FOR POINTING DOMAIN:_

```
1. EDIT NGINX CONFIG FILE [ /ETC/NGINX/SITES-ENABLED/DEFAULT ] 
   { COMMAND : SUDO NANO /ETC/NGINX/SITES-ENABLED/DEFAULT }
2. ADD THIS LINES IN YOUR SITE-ENABLES/DEFAULT FILE:

```

```
server {
	listen 80;
	server_name <DOMAIN OR SUBDOMAIN NAME>;
			
	location / {
	   proxy_pass http://127.0.0.1:<BACKEND-PORT>;
	}
}
```
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2022-05-24 08:00:24

---
title: "A Fun Programming Joke To Start Your Day"
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/5e12588a43d6b.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:___ What do you call an idle server?

___A:___ A waiter.
 -->
Responsive image mosaic With CSS and HTML.
Published: 2022-05-24 08:00:11

To create a responsive image mosaic:

- Use the `display: grid` property to create a responsive layout.
- Use `grid-row: span 2 / auto` and `grid-column: span 2 / auto` to create items that span two rows or two columns respectively.
- Put `grid-row` and `grid-column` styles in the media query to avoid applying them on small screens.

{% codepen https://codepen.io/phelixdusengimana/pen/YzerVzv %}

Bonus Tip:
- `loading='lazy'` attribute is used to make images load lazily — only when they are in the user's field of vision.

Do you have a question ping me via [Twitter](https://twitter.com/felix__dusenge)
MicroService Framework in C++
Tags: cpp, programming, webdev, opensource
Published: 2022-05-24 07:48:05

## MicroService

### What are MicroServices?

Microservice architecture, or simply microservices, is a distinctive method of developing software systems that tries to focus on building single-function modules with well-defined interfaces and operations. The trend has grown popular in recent years as Enterprises look to become more Agile and move towards a DevOps and continuous testing.

### Why Microservices?

Here I list some good reason to switch to microservices architecture:

- Increase Resilience
- Improve Scalability
- Decoupling of Features
- Simple API
- Faster Framework
- Easier Debugging and Maintenance
- Continuous Delivery
- Improve deployment velocity
- Better adaptation on Market requests
- Reduce Development and Deployment Cost

### Why C++?

Most of the Server application are developed in C++ and the needs of performance is ever more requested. So a low level language can be a good solution, and the C++ wins over the other languages.

## What is CXXMicroService?

{% github ZigRazor/CXXMicroService %}

CXXMicroService is a completely free and Open Source framework that give to the developers the possibility to build up a microservice in a faster way.
It aims to provide a simple set of API to do all you need with microservice.
The library is under development and all the contributions are welcome.

Please give me a feedback on this project, and if you want to contribute, please write me at zigrazor@gmail.com 

Thank you in advance,
Happy coding!
'Ascending' server environment variables to client with Vite
Tags: vitejs, env
Published: 2022-05-24 07:24:52

---
title: 'Ascending' server environment variables to client with Vite
published: true
description: No, I'm not talking about configuring .env
tags:
  - vitejs
  - env
//cover_image: https://direct_url_to_image.jpg
---

TL;DR:

```js
// vite.config.js
{
  envPrefix: ['VITE_', 'CF_PAGES_'],
}
```

---

With Vite, we can set environment variables in a `.env`, `.env.{mode}`, or `.env.{mode}.local`:

```txt
SECRET_STUFF          = "only for server"
VITE_NOT_SECRET_STUFF = "for server and client"
```

The default `VITE_` prefix will pass the variables to the client and we can use it with a string:

```js
// in a client js file
let msg = `Hey {import.meta.env.VITE_NAME}`
```

But what if we want to 'ascend' an env set by the platform? In my case, I want to expose `CF_PAGES_URL`, which contains the preview url for my Cloudflare Pages build. Obviously I can't write it in `.env`... I have read somewhere that `.env` can access other variables with a syntax like

```txt
VITE_PAGES_URL=$CF_PAGES_URL
```

...but I haven't tried that, because I found [this solution](https://vitejs.dev/config/index.html#envprefix):

```js
// vite.config.js
{
  envPrefix: ['VITE_', 'CF_PAGES_'],
}
```

That would 'ascend' all the `CF_PAGES_` variables & allow me to use them client side.

The end.
How do you manage all the versions of your dependencies ? Our answer here.
Tags: github, devops, opensource, tutorial
Published: 2022-05-24 07:17:54

_Check out our video to see the how-to with Flavien !_

{% youtube Pb9yt5PFQzo %}



## Intro: 

How do you manage your dependencies between your GitHub repositories?

Without automation we have to update the right files at the right place.

And for big projects, Git repositories can have a complex mesh that would make this task complicated.

## Part 1: Project shape

I'll start by showing you a sample of a classic mesh that could be found in a project split into several Git repositories.

This example will assume to be a cross-platform application with a web client, a mobile client, and a Desktop client.

For this we will have function libraries that will be common to all three targets.

### Dependencies:

```

protocol-lib: string-lib

core-code: string-lib, protocol-lib

desktop-app: core-code

mobile-app: core-code

web-app: core-code

```

As you can see, we have a total of 6 Git repositories that depend on each other. 
In our example, repository "core-code", that will contain the main code of the app, will be shared on each platform (desktop-app, mobile-app, and web-app). 
That core-code needs repository "string-lib" and "protocol-lib" to compile. 
And as it is quite a pain in the *** to always have to manually edit the right dependency files, this action will take care of it, if it's well configured. 
If we continue our exploration, the "protocol-lib" repository also requires the "string-lib" repository. Projects of a certain size can have pretty complex mesh links which can be a source of errors.

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

## Part 2: GitHub Action

When you publish a new release on the repository "string-lib", this action will automatically create a Pull Request on the repository "protocol-lib" and "core-code" to update the correct files and change its own link in dependancy file(s). And now, when you merge the PR on the repository "protocol-lib", and create a new release, it will update the previously created PR on the repository "core-code" to add these changes if it's not already merged.

Now we can accept changes on the repository "core-code" to update its version of "string-lib" and "protocol-lib". This will batch upgrade at once the version in "desktop-app", "mobile-app", and "web-app".

That's it, you can now focus on your work ;)

https://github.com/lenra-io/create-or-update-pr-action
how to Export Metamask Eth network Transaction to Portfolio App?
Published: 2022-05-24 07:11:54

Hi guys, I am currently trying bro build a portfolio tracker, where we require to pull transaction Level data (date & time, buy price, fees, Eth price at transaction point) from MetaMask.  
User can put his wallet address on our tracker and their transactions is imported. 
Looking forward to guidance if this can be done through metamask API? Very new to this. Thanks.
E-Commerce Microservices with Golang
Tags: go, microservices, programming, github
Published: 2022-05-24 06:50:52

Hi everyone. I want to show my GitHub project. It's a basic microservices project. I'm using Go to develop it. It's not completed yet.

You can check it out here

[https://github.com/aligoren/go_ecommerce_microservice](https://github.com/aligoren/go_ecommerce_microservice)

I'm not good at microservices or Golang. So, I hope I'll better understand Golang and Microservices with this project. It would be nice If I finish this project.

I need to feedbacks to improve my project :)

Thanks :)
Manage Form Input in React with object computed property names
Tags: react, beginners
Published: 2022-05-24 06:41:05

This is my memo for form input management with [computed property names](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names).

 1. set form Input state
```javascript
    const initFormInput = {
      firstName: "",
      lastName: "",
      email: ""
    };

    const [formInput, setFormInput] = useState(initFormInput);
```
2. write JSX
```javascript
    return (
        <FormContainer onSubmit={submitHandler}>
          <label>First Name</label>
          <Input
            type="text"
            required
            onChange={changeHandler}
            name="firstName"
            value={firstName}
          />
          <label>Last Name</label>
          <Input
            type="text"
            required
            onChange={changeHandler}
            name="lastName"
            value={lastName}
          />
          <label>Email</label>
          <Input
            type="email"
            required
            onChange={changeHandler}
            name="email"
            value={email}
          />

    <button type="submit">Submit</button>
        </FormContainer>
      );
```
3. define changeHandler

You can dynamically access appropriate property name of formInput object by using [].
```javascript
    const changeHandler = (event) => {
        const { name, value } = event.target;
        setFormInput({ ...formInput, [name]: value });
      };
```
The whole code is available [here](https://codesandbox.io/s/naughty-taussig-cen1dg?file=/src/App.js:235-306)

Thank you for reading :)

The original article is [here](https://medium.com/@lada496/manage-form-input-in-react-with-object-computed-property-names-af82f005d36e)