teleren/devto huggingface dataset:
Adding a background image to a text.
Tags: webdev, javascript, programming, beginners
Published: 2022-09-01 23:58:05

In this tutorial, we'll see how to add a background image to a text and this can be any image of your choice.

I already posted a complete video tutorial on my YouTube channel, and you can watch it there.

Now, let's get right into it!

**The interface we'll be expecting**

![Our Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk2zmkutsf557jd75cge.png)

We'll deal with only 2 files here ; `index.html` and `styles.css`.

**The HTML SETUP**
We'll add our standard HTML boilerplate and link the external stylesheet(`styles.css`)
```
<!DOCTYPE html>
<head>
    <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body> </body>
</html>
```
Now we're going to add an `h1` tag to the body of our HTML
```
<!DOCTYPE html>
<head>
    <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body> 
 <h1>Hello World!</h1>
</body>
</html>
```
And that's that for our HTML

**Adding Styles to our HTML**
The first thing we want to do is to increase the font size a bit,I'll set it to a 100px
```
h1{
   font-size:100px;
  }
```
Then we'll add a background image from the [Pexels Website](https://www.pexels.com/)
```
h1{
  ...
 background:url(https://images.pexels.com/photos/7422479/pexels-photo-7422479.jpeg?cs=srgb&dl=pexels-nothing-ahead-7422479.jpg&fm=jpg)
```

Now we'll have an interface like this:

![BG image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dm33ttujfpqm4mg54a84.png)

But we rather want the image in the background of the text and not in this way, this is how to implement that
```
h1{
  ...
  background-size: contain;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

```
Finally, we should get the result we expected when we preview int the browser

![Final Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5m2sfdytx74g49iqm5o.png)



###Conclusion
Thanks for reading to the end!
You can watch the video version of this tutorial [here](https://www.youtube.com/watch?v=qC8qyrGCPN4&t=13s).
Consider giving me a follow on my [Twitter](https://twitter.com/dev__steve) if you liked this article.
Dos formas de crear un proyecto con React JS
Tags: javascript, beginners, react, tutorial
Published: 2022-09-01 23:10:10

Existen muchas formas de crear una aplicación con React JS, sin embargo quisiera compartir la forma más usada y la forma que deberíamos probar usar a partir de ahora. 

Hace algunos años la única manera de crear un proyecto con React JS era crear el proyecto desde cero, archivo por archivo a través de la configuración de webpack, lo cual sinceramente es una locura, aunque como punto a favor, se tenía un control total.

Hoy en día la manera más sencilla de crear un proyecto de react js es usando el comando

```
npx create-react-app nombre-de-app
```
Y es que este comando hace algo tan increible como crear una aplicación de react js desde cero, al cual le podremos asignar un nombre en lugar de "nombre-de-app".

Pero no todo acaba ahí, hace poco se ha sumando una herramienta muy buena e increíblemente rápída llamada Vite JS. Los invito a ver este video 😉

{% embed https://youtu.be/OyQ76APYPtI %}
Day 144: Sequelize postgres finally done!!
Published: 2022-09-01 22:54:14

Hi!
Finally the task for setting up Sequelize na dpostgres is now done and merged this task took me a lot of effort as I was new to sequelize and not very familiar with postgres database so I had to research a lot and learn to read sequelize documentation but overall it was a good  experience and I learned a lot along the way

I started a new task that I will be focusing on tomorrow of setting up Jenkins for the CI and CD which is a complete new technology for me so I expect a lot of reading as well but eventually I will be able to do it as always. we got this..

Signing off...
How does the internet work?
Published: 2022-08-31 12:38:08

“How does the internet work?”

The internet is a worldwide computer network that transmits a variety of data and media across interconnected devices. It works by using a packet routing network that follows Internet Protocol (IP) and Transport Control Protocol (TCP).
TCP and IP work together to ensure that data transmission across the internet is consistent and reliable, no matter which device you’re using or where you’re using it.
When data is transferred over the internet, it’s delivered in messages and packets. Data sent over the internet is called a message, but before messages get sent, they’re broken up into tinier parts called packets.
These messages and packets travel from one source to the next using Internet Protocol (IP) and Transport Control Protocol (TCP). IP is a system of rules that govern how information is sent from one computer to another computer over an internet connection.
Using a numerical address (IP Address) the IP system receives further instructions on how the data should be transferred.
The Transport Control Protocol (TCP) works with IP to ensure transfer of data is dependable and reliable. This helps to make sure that no packets are lost, packets are reassembled in proper sequence, and there’s no delay negatively affecting the data quality.

When you type in a web address into your browser...

Step 1: Your PC or device is connected to the web through a modem or router. Together, these devices allow you to connect to other networks around the globe.
Your router enables multiple computers to join the same network while a modem connects to your ISP (Internet Service Provider) which provides you with either cable or DSL internet.

Step 2: Type in a web address, known as a URL (Uniform Resource Locator). Each website has its own unique URL that signals to your ISP where you want to go.

Step 3: Your query is pushed to your ISP which connects to several servers which store and send data like a NAP Server (Network Access Protection) and a DNS (Domain Name Server).
Next, your browser looks up the IP address for the domain name you typed into your search engine through DNS. DNS then translates the text-based domain name you type into the browser into the number-based IP address.
Example: Google.com becomes 64.233.191.255

Step 4: Your browser sends a Hypertext Transfer Protocol (HTTP) request to the target server to send a copy of the website to the client using TCP/IP.

Step 5: The server then approves request and sends a “200 OK” message to your computer. Then, the server sends website files to the browser in the form of data packets.

Step 6: As your browser reassembles the data packets, the website loads allowing you to learn, shop, browse, and engage.

Step 7: Enjoy your search results.
Novas Datas! Treinamento e Voucher Gratuito de Certificações Microsoft – AZ900 / DP900 / AI900 / PL900 / SC900
Tags: exames, ai900, az900, azure
Published: 2022-09-01 22:32:56

---
title: Novas Datas! Treinamento e Voucher Gratuito de Certificações Microsoft – AZ900 / DP900 / AI900 / PL900 / SC900
published: true
date: 2022-09-01 22:20:21 UTC
tags: Exames,AI900,AZ900,Azure
canonical_url: 
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kz9jg990p59588nykzp.jpg)

Novidades na Microsoft LATAM Event Hub! Treinamentos e Vouchers Gratuitos!

É isso mesmo que você acaba de ler! Nesse post vou ensinar vocês a como conseguir um voucher para fazer as provas das certificações (AZ900 / DP900 / AI900 / PL900 / SC900) totalmente de **graça** , **0800** , **free**! rsrsrs

Exame AZ900 – $60 dólares – ≅ R$ 314,00

Exame DP900 – $60 dólares – ≅ R$ 314,00

Exame AI900 – $60 dólares – ≅ R$ 314,00

Exame PL900 – $60 dólares – ≅ R$ 314,00

Exame SC900 – $60 dólares – ≅ R$ 314,00

**Total = R$ 1570,00 em certificações sendo oferecidas totalmente grátis!**

Mas vamos logo aos passos, é bem simples.

Acesse: [https://guiadeti.com.br/novas-datas-treinamento-e-voucher-gratuito-de-certificacoes-microsoft-az900-dp900-ai900-pl900-sc900/](https://guiadeti.com.br/novas-datas-treinamento-e-voucher-gratuito-de-certificacoes-microsoft-az900-dp900-ai900-pl900-sc900/)
Interactive CSS Filter React Component (with GIFs!)
Tags: codepen
Published: 2022-09-01 22:04:13

<p>Making a reusable React component to demonstrate CSS filters with interactive sliders. Uses a touch of CSS grid and Sass as well. Can use your own image or gif, too!</p>

<p>[EDIT]: Original used old class-based React; updated to use React Hooks!</p>

{% codepen https://codepen.io/harunpehlivan/pen/BaxaNjz %}
Sliding Puzzle in Vue
Tags: codepen
Published: 2022-09-01 21:55:58

<p>A JS sliding puzzle, leaning on Vue and its (awesome) built-in <code>&lt;transition-group&gt;</code> to handle the tile sliding animation, with CSS grid for the layout. </p>

<p>The puzzle uses Vue data and reactivity to highlight squares that are in the correct location, and it counts the total with a progress bar at the top. The puzzle is always solvable, since the board starts solved then generates random legal moves to shuffle the board. No two games are the same (except by extreme coincidence)!</p>

<p>It's possible to change the board size by altering the <code>ratio</code> near the top of the JS, but it's still a little buggy at some sizes and takes a while to generate at larger values. Plus, it becomes illegible at a certain point.</p>

<p>Playable with mouse clicks, keyboard arrow keys, touch, or swipe (thanks to Hammer.js)</p>

<p>Probably not very accessible at all because I wasn't really sure how to handle a number grid in that regard (and the autofocus is probably very bad), but tried to make it as semantic as possible at least.</p>

{% codepen https://codepen.io/harunpehlivan/pen/XWqWbJY %}
Blogging mistakes
Tags: blog, webdev, wordpress, testing
Published: 2022-09-01 21:33:25

Since I have started blogging I have been looking at a lot more blogs for research purposes. Trying to see what I can add to my site and just what other people are doing in the space I have just entered. So I found a fun blog about making money online. Read a few articles on their medium page and then click over to their website. This is where my experience went down hill.
There were 2 major issues I noticed almost right away. 

## 1 - slow and sluggish  
I was greeted with a notification saying the site had been optimized for speed by nitropack. turns out this was a footer for the page that loaded first. The site took a while to load. If I can load up my Facebook feed faster than I can load your little blog site there is something wrong. Because we live busy lives and nobody has time to wait, we want our content now. The site was made using WordPress which there is nothing wrong with, not everyone need to know code. But Wordpress sites are dynamic(using php) and usually use lots of 3rd party plugins. This can make them sluggish even if it's optimized like this one. This is a big reason iam an advocate for JAMstack and static responsive webpages. 

## 2 - template text  
 If you work in design print or web you have seen this before
   
>Lorem ipsum dolor sit a met… 
  
This is filler text, used by developers as a place holder, so they can build out the page before filling in content. It is Latin. Please never leave this in your final site. I should never be reading that when your site is live. If that page is under construction leave a notice of that.
While the site is still usable the entire contact page is Latin and there is an ecommerce section. Who would but so thing from someone they can't even contact? 

## So what's the take away
This is a great example of why you might want to hire a web developer. Even if you use word press (there are developers who specialize in WordPress or related technology such as PHP or Ecommerce). If your a developer or just learning please don't make these same mistakes. Take pride in your web presence and let's all strive to make the internet a better place.
The Day-1 Decisions that Make or Break Companies w/ PlanetScale's CEO Sam Lambert
Tags: devops, podcast, career, management
Published: 2022-09-01 21:01:35

Your early tech stack decisions won’t ensure long term success, but they can certainly set you up for long term failure. 

Pragmatists rejoice! This week’s episode of Dev Interrupted features Sam Lambert, CEO & President of PlanetScale, a tech leader known as the ‘Oracle of Pragmatism’. 

In a winding conversation that touches on Sam’s time at GitHub, where he helped the then 40th most-trafficked website in the world run on just 2 servers, to his experience working at Facebook where he learned that you don’t need to sacrifice quality in order to move fast, this episode has the insights you need to make straightforward, no BS decisions about your tech stack. 

Or as Sam says, learn how to avoid “the new hotness” in order to build a culture that reflects the often boring decisions that make or break a company.

{% spotify spotify:episode:1GLxk73tNoVUMwCc4LOSza %}

## Episode Highlights Include:
* (2:18) Lessons in pragmatism from GitHub 
* (6:49) Sam's experience at Facebook
* (10:40) Moving fast without sacrificing quality
* (17:12) Building teams that are passionately pragmatic
* (26:07) Why people are scared of their database
* (29:19) What is the serverless movement?

While you’re here, check out this video from [our YouTube channel](https://www.youtube.com/c/DevInterrupted?sub_confirmation=1), and be sure to like and [subscribe](https://www.youtube.com/c/DevInterrupted?sub_confirmation=1) when you do!

{% youtube DmxT2ghdxog %}

## [You’re invited to Interact on October 25th!](https://devinterrupted.com/event/interact/?utm_source=dev.to&utm_medium=referral&utm_campaign=202210%20-%20Event%20-%20Interact%20-%20Referral%20-%20Distro%20-%20Podcast%20Blog)

*Want to know how engineers at Slack and Stripe connect their dev teams’ work to the business bottom line? Or how team leads at Shopify and CircleCI keep elite cycle time while minimizing dev burnout and maximizing retention?*

*These are just two of the topics we’ll tackle at [Interact](https://devinterrupted.com/event/interact/?utm_source=dev.to&utm_medium=referral&utm_campaign=202210%20-%20Event%20-%20Interact%20-%20Referral%20-%20Distro%20-%20Podcast%20Blog) on October 25th.* 

*A* ***free, virtual, community-driven engineering leadership conference,*** *[Interact](https://devinterrupted.com/event/interact/?utm_source=dev.to&utm_medium=referral&utm_campaign=202210%20-%20Event%20-%20Interact%20-%20Referral%20-%20Distro%20-%20Podcast%20Blog) is a one-day event featuring over 25 of the most respected minds in development, all selected by the thousands of engineering leaders in the Dev Interrupted community.* 

## [Register now!](https://devinterrupted.com/event/interact/?utm_source=dev.to&utm_medium=referral&utm_campaign=202210%20-%20Event%20-%20Interact%20-%20Referral%20-%20Distro%20-%20Podcast%20Blog)


![Register now!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9xpvwbw5xfawom98qga.jpg)
[Upcoming Webinar] How to setup a Developer Control Plane using CDK & Kubernetes on AWS EKS
Tags: aws, cdk, kubernetes
Published: 2022-09-01 21:01:12

Hey, devs!

Would you like to learn about deploying to AWS EKS using a Developer Control Plane? 

Kyle Campbell, CEO at CTO.ai, is hosting a special demo using our Developer Control Plane to deploy on AWS #EKS & the Lumen Techco edge using Sectionio. 

I promise this is going to be an insightful session. You can [register here](https://attendee.gotowebinar.com/register/2592040813674185998).
Concurrency or Parallelism? Differentiate them
Tags: programming, beginners, concurrency, parallelism
Published: 2022-09-01 20:54:26

In this post, I'll try to illustrate the differences between concurrency and parallelism. These terms are usually misused (I did too several times), so let's see if we can finally clear any doubts about this topic.

## What is a CPU and how does it work?

A CPU is like the brain of a computer. It's where the majority of the operations are done. Also is responsible for executing the tasks we need.

A CPU can have a single core or multiple cores. Let's imagine that a CPU is a factory, and each core is a worker. The more cores a CPU has, the more work it can perform at the same time.

This is the key part. Each core can perform only one task at a time. If this point is clear, you already understood half of the topic.

## So... what is parallelism?

As the word says, it's when multiple tasks are run **in parallel**. That means that several tasks are run at the same time. If you understood the previous point... how many cores are needed (at minimum) if you want to run two tasks in parallel?

Since one core can perform only one task at a time, you'll need **at least** 2 cores. If you have more than two, the rest of the cores are going to be idle, because 1 task -> 1 core.


![Example of two parallel tasks running on two cores](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjd1owcyly21f5d3jatz.png)  

## Ok, but what is concurrency?

Nice! We understood parallelism, let's dive into concurrency now!

You can think about concurrency as an **illusion of parallelism**. Let me explain that.

Imagine someone working in customer service. That person has to serve two queues of people, but there is only one employee.  So the person decides to go with the first customer in the first queue. If that customer has to fill out a form or perform any other task that doesn't need the attention of the employee, the person goes to the second queue. If the same situation happens or the client in the first queue finishes the task, the employee comes back. Repeating that process creates an illusion of parallelism. As seen from the outside, it may look like the employee is serving both queues at the same time.

The same thing happens in a CPU. Since we are working with a single core, just one task at a time can be performed. But the CPU, by fast switching between the two tasks, creates an illusion of parallelism.


![Concurrent execution of two tasks in a single core](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/853so1jcduqthv2gyf19.png)

## Conclusion

You have learned the differences between parallelism and concurrency. You learned that one core can work on just one task at the same time.  If you want to run two tasks in parallel, you need a CPU with (at least) two cores. If your CPU is a single core and want to run two tasks at (almost) the same time, you need to use concurrency. In concurrency, the CPU switches very fast between the two tasks, creating an illusion of parallelism.
🚚 SMS batch sending with csv input
Tags: showdev, news, java, ux
Published: 2022-09-01 20:41:53

## ❔ About

In many customer usecases, people need to **send SMS in a batch mode... for a very wide amount of business cases.**

## 💭 ERP Integration considerations and `csv`

Customer data can be managed through an endless list of ERP/CRM and middlewares (relational databases, ETL jobs,...), including hand-made solutions and Spreadsheets, etc...

☝️ Still, at some point, they all may need to **notify their customers on a regular or event driven basis** (birthdays, fidelity points, special events, emergency, dates,...).

What all these people do is an export of : 

1️⃣ The customer phone number
2️⃣ The custom message to send

This is exactly what this feature is about.

We need to send that data to your customer thanks to a simple `csv` as :

☑️ They are easy to produce on **any language and any platform/middleware**
☑️ There are a lot of **ready to use automation tools** (Power Automate, Zapier, IFTTT,...) around them

## 🗃️ Input data : the `csv`

The input can come from any spreadsheet : 

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

... then exported to `csv` :

```
to,message
+687XXXXXX,"Hey Jack, All work and no play makes Jack a dull boy."
+687XXXXXX,"Today is your birthday, come to our shop to enjoy your discount."
+687XXXXXX,"Come enjoy black friday tomorrow morning!"
+687XXXXXX,"Yoy now have 1000pts. on your fidelity card, come enjoy discount today"
+687XXXXXX,"Your command has been delivered and awaits for you at the postoffice"
```

Next, to send the `csv`, just : 

```csv
opt-sms send -f "${SHORT_NUMBER_CODE}"\
    -c "${ACCOUNT}"\
    -i "~/demo_batch_sms.csv"
```

And you're done.

Now... enough talk, let's enjoy the demo!


## 🍿 Demo

{% youtube qjjETvi0W9k %}
React.Children.map returns null when I have children (jsx)
Tags: webdev, javascript, react, help
Published: 2022-09-01 20:30:49

Well this one was a fun one, NOT! 

I just spent so much time debugging something that is so simple and I should have known from a hundred other times of doing it right.

The issue is you go to use React.Children.map and you pass valid children, yet you still get an empty array.

You may see the error in the console log, "Functions are not valid as a React child."

At this point, you should be looking at your passed children to make sure you wrapped them in angle brackets so that it's a valid JSX Element.

> Wrong! Missing angle brackets.
![Wrong solution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47s8gcy19yj8z82kyhzz.png)

vs 

> Correct!
![correct solution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qgoo54y5g3p0o62o0yl.png)
Taking a path into the unknown
Published: 2022-09-01 20:29:35

These latest weeks were tough and challenging for one single purpose. The desperate need of learning things I've never had contact before and total disinterest in learning any of it. But I had to.

The issue began when a damaged commit was sent to production and, long story short, it bundled up all of the dependencies regarding master, branch and my local project. 

I won't dive deep into what happened, but I thought it should be something to let people know. Sometimes we will have to walk on "uncharted land" to get to know the geography of the place. This means we will need to do the work many people won't take on. 

The good thing is that you'll be a step closer into being a very reliable professional in your company, and this is one step closer into your own personal goals.