teleren/devto huggingface dataset:
How to make your HTML responsive using display grid. 💯✅
Tags: beginners, css, html, web
Published: 2023-04-07 04:43:04

To make your HTML responsive using display grid, you can follow these steps:

**Define the grid container:** First, define the container element that will hold your grid using the `display: grid` property. This will enable the grid layout.

**Set the grid template columns and rows:** Next, set the grid template columns and rows using the `grid-template-columns` and `grid-template-rows` properties. These properties allow you to specify how many columns and rows the grid should have, as well as their size and spacing.

**Place grid items:** After defining the grid template columns and rows, you can place your grid items using the `grid-column` and `grid-row` properties. These properties allow you to specify which cells your items should span across.

**Use media queries:** Finally, to make your grid responsive, you can use media queries to adjust the grid layout based on the screen size. You can use the @media rule to set different grid properties at different breakpoints, such as changing the number of columns or their size.

Here's an example code snippet that demonstrates how to create a simple responsive grid layout:

**CSS**

```
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;
}

.item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
  }
}
```

**Output**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93w63h6xjnzmmk6d9rjk.gif)

In this example, the .container element is set to `display: grid` and has three columns with a gap of 20px between them. The .item elements are placed within the grid using the `grid-colum`n and `grid-row` properties.

Then, two media queries are used to adjust the grid layout at different screen sizes. When the screen size is less than or equal to `768px`, the grid is set to have two columns instead of three. And when the screen size is less than or equal to `480px`, the grid is set to have only one column. This allows the grid to adapt and remain responsive on different devices and screen sizes.

Hope you like it.

That’s it — thanks.


To read my other articles [click here](https://dev.to/margishpatel).

[What is Flexbox : A Beginner's Guide to Flexbox CSS Layouts](https://dev.to/margishpatel/beginners-guide-to-flexbox-2hco)

---

👋Hey there, Let’s connect on:
Linkdin: [Margish Patel](https://www.linkedin.com/in/margish-patel-63843b1b5)
Twitter: [@margish96patel](https://twitter.com/margish96patel?t=ruk_O0DrnioOU_yQmHcWbw&s=09)
Email: [babariyamargish97@gmail.com](babariyamargish97@gmail.com)
WordPress Widgets User Meta Pro
Tags: programming, javascript, tutorial, beginners
Published: 2023-04-07 04:41:35

[User Meta Pro](http://user-meta.com) is a popular plugin that allows you to add custom fields and user meta data to your WordPress site, and the widgets it provides can be used to display this data in a variety of ways. We'll begin by introducing User Meta Pro and its core features, and then dive into the different widgets available. We'll demonstrate how to use these widgets to display user meta data on your site, and provide tips and tricks for customizing their appearance and functionality. 

Whether you're new to WordPress or an experienced user, this tutorial will help you get the most out of User Meta Pro and its widgets. 

https://www.youtube.com/watch?v=2g3-ZF6pBuM&ab_channel=UserMetaPro
O que é um proxy e qual sua função?
Published: 2023-04-07 04:10:44

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

Eae dev, blz?
No artigo de hoje vamos falar sobre o que é proxy e quais seus tipos.

Um proxy, em termos simples, é um servidor intermediário entre um dispositivo e a internet. Ele atua como um servidor que recebe solicitações de conexão da internet em nome do dispositivo, verificando a solicitação e em seguida, envia a solicitação para o dispositivo. O proxy também pode ser configurado para mascarar o endereço IP do dispositivo, permitindo que o usuário navegue na internet anonimamente.

Há vários motivos pelos quais alguém usaria um proxy. Um dos motivos mais comuns é a segurança. O proxy pode atuar como uma camada extra de segurança, ajudando a proteger o dispositivo de ameaças como malware e ataques de hackers. O proxy também pode ser configurado para bloquear sites específicos, impedindo o acesso a sites maliciosos ou inadequados.

Outro motivo para usar um proxy é para acessar conteúdo restrito geograficamente. Por exemplo, se um site estiver bloqueado em um determinado país, um usuário pode usar um proxy localizado em outro país para acessar o site. O proxy faz com que a solicitação pareça ter originado do país onde o proxy está localizado, permitindo que o usuário acesse o conteúdo.

O proxy também pode ser usado para acelerar o carregamento de sites. Ele pode armazenar em cache as páginas da web frequentemente acessadas, permitindo que elas sejam carregadas mais rapidamente quando acessadas novamente.

Existem diferentes tipos de proxies, cada um com suas próprias funcionalidades e recursos. Os proxies mais comuns incluem proxies HTTP, proxies SOCKS, proxies transparentes e proxies reversos.

**Proxies HTTP**:

Os proxies HTTP são os mais comuns e são usados para navegar na web. Eles podem ser configurados no navegador ou no sistema operacional do dispositivo. Quando um dispositivo solicita uma página da web, o proxy HTTP atua como intermediário entre o dispositivo e o servidor da web, buscando a página solicitada e a enviando de volta para o dispositivo.

**Proxies SOCKS**:

Os proxies SOCKS são semelhantes aos proxies HTTP, mas são usados para outras aplicações além da navegação na web. Eles são mais comuns em jogos online e em aplicativos de compartilhamento de arquivos ponto a ponto.

**Proxies Transparentes**:

Os proxies transparentes não alteram o endereço IP do dispositivo e são geralmente usados ​​por empresas para monitorar o tráfego de rede dos funcionários.

**Proxies Reversos**:

Os proxies reversos são usados ​​para melhorar o desempenho de servidores da web de alto tráfego. Eles atuam como intermediários entre os clientes e os servidores, permitindo que os servidores processem solicitações de maneira mais eficiente.

Resumindo, um proxy é um intermediário entre um dispositivo e a internet. Ele pode ser usado para proteger o dispositivo de ameaças, acessar conteúdo geograficamente restrito e melhorar o desempenho de servidores da web. Existem vários tipos de proxies, cada um com seus próprios recursos e funcionalidades específicas.
Monitoramento e rastreamento
Tags: go, monitoring, opentelemetry, programming
Published: 2023-04-06 23:47:37

Um tempo atrás a firma decidiu deixar de usar a biblioteca do NewRelic para coletar dados de traces distribuídos e métricas de runtime (usados pra rastrear requisições, monitorar memória, processamento, erros e definir alertas) e passaria a utilizar o OpenTelemetry, que é uma especificação de coleta de métricas e dados de trace agnóstico a ferramenta onde você guarda os dados e possui implementação pra várias linguagens (todas as linguagens que eu procurei tinham sua implementação). Na época, programando em Java, você adicionara o Java Agent do OpenTelemetry e já tínhamos uns 70% funcionando, como usava Spring Boot, era só adicionar o Spring Cloud Blá Blá Blá (se não me falha a memória era o Spring Cloud Sleuth, mas não poria a minha mão no fogo) e o trabalho estava feito.

Atualmente, programando em Go, percebi que não tem nada automágico, que algumas bibliotecas não tinham um mecanismo pra coletar essas informações e nem tem muito material sobre, nem em inglês (eu até vi algum material falando sobre trace, mas quase nada sobre métricas de runtime, nem mesmo em inglês)... Então resolvi pegar o assunto pra dar uma olhada e comecei a fazer uma prova de conceito e achei válido ir documentando o que fosse aprendendo sobre o assunto. A ideia é utilizar o máximo possível de soluções da comunidade (principalmente do repositório oficial de Go do OpenTelemetry, o [open-telemetry/opentelemetry-go-contrib](https://github.com/open-telemetry/opentelemetry-go-contrib))...

Daí, pensei em uma organização de micro serviços meio aleatória e saiu o desenho abaixo.


![Rascunho de diagrama de micro serviços da prova de conceito](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujszlwhnj1hbj4xdpcf1.png)

Depois comecei a pesquisar ferramentas de visualização dessas paradas e encontrei duas opções que me pareceram interessantes, o Jaeger, que só tinha suporte a visualização dos traces (mas a visualização dele fica bem legal) e a stack do OpenSearch (OpenSearch e OpenSearch Dashboards), que tem visualização de traces e te da uma estrutura pra criar gráficos com as métricas de runtime (mas a visualização é bem mequetrefe), na dúvida tentei configurar ambos utilizando Docker (e, como todo castigo pra trouxa é pouco, resolvi aproveitar a opção com o Opensearch e subir também uma estrutura pra jogar o stdout do Docker num índice do OpenSearch e permitir visualizar no Dashboards, deu um trabalhinho, mas no final funcionou mais ou menos bem)...

A estrutura com o Jaeger ficou da seguitne forma:

![Estrutura de micros serviços + Jaeger](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tphh45t8g7dag7i8v93.png)

E a estrutura utilizando o OpenSearch ficou assim:

![Estrutura de micros serviços + Opensearch Stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihuzbcngulj6e6l53x2r.png)

O código do projeto esta em [eldius/golang-observability-poc](https://github.com/eldius/golang-observability-poc.git).

Pretendo ir documentando o que for aprendendo no processo.
1020. Leetcode Solution in cpp
Tags: cpp
Published: 2023-04-07 03:26:43

```cpp
class Solution {
 public:
  int numEnclaves(vector<vector<int>>& A) {
    const int m = A.size();
    const int n = A[0].size();

    // remove lands connected to edge
    for (int i = 0; i < m; ++i)
      for (int j = 0; j < n; ++j)
        if (i * j == 0 || i == m - 1 || j == n - 1)
          if (A[i][j] == 1)
            dfs(A, i, j);

    return accumulate(begin(A), end(A), 0, [](int s, vector<int>& row) {
      return s + accumulate(begin(row), end(row), 0);
    });
  }

 private:
  void dfs(vector<vector<int>>& A, int i, int j) {
    if (i < 0 || i == A.size() || j < 0 || j == A[0].size())
      return;
    if (A[i][j] == 0)
      return;

    A[i][j] = 0;
    dfs(A, i + 1, j);
    dfs(A, i - 1, j);
    dfs(A, i, j + 1);
    dfs(A, i, j - 1);
  };
};
```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/number-of-enclaves/
6 tips to help you fast-track your career
Tags: programming, career, devjournal, beginners
Published: 2023-04-07 02:32:00

Are you looking to advance your software development career?

Here are 6 tips to help you fast-track your career 


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


Thanks for reading this.

If you have an idea and want to build your product around it, schedule a call with [me](https://calendly.com/pragyanatvade).

If you want to learn more about DevOps and Backend space, [follow me](https://dev.to/pragyanatvade).

If you want to connect, reach out to me on [Twitter](https://twitter.com/pragyanatvade) and [LinkedIn](https://www.linkedin.com/in/pragyanatvade/).
"Learning a New Skill from Scratch: My Journey of Overcoming Challenges and Gaining Confidence".
Published: 2023-04-07 02:28:45

Have you ever found yourself in a position where you had to learn something completely new without any prior knowledge or experience? That's exactly what happened to me recently when I decided to learn a new programming language. In this post, I'd like to share my experience of starting from scratch and the lessons I learned along the way after doing it the wrong way for many years.
When I first started learning programming language, I felt completely overwhelmed. I didn't know where to start, and everything seemed so complex and confusing. I found myself spending hours trying to understand basic concepts, only to feel like I wasn't making any progress. It was frustrating and discouraging, but I knew I had to keep pushing forward.
To make the learning process easier and more effective, I tried a few different strategies. First, I broke down complex topics into smaller chunks, focusing on one concept at a time. I also sought help from  communities which provided me with valuable insights and advice. Additionally, I found a mentor who could guide me and answer my questions, which was incredibly helpful in overcoming roadblocks.
Despite the initial challenges, I've gained a lot from starting from scratch. For one thing, I have a much deeper understanding of how the language works and how to troubleshoot and solve problems more effectively. I also feel more confident taking on more challenging projects, knowing that I have the skills and knowledge to tackle them and I am proud of myself for taking less time to do my new Task.
If you're in a similar position of having to learn something from scratch, know that it's possible. It's not easy, but it's worth it. The key is to be patient with yourself, break down complex topics into smaller chunks, seek help when you need it, and keep pushing forward. With time and effort, you'll be amazed at how much you can learn and accomplish.
How to Add a Meson Cloud to Home Screen on iOS and Android?
Tags: meson, cloud, ipfs, arweave
Published: 2023-04-07 02:25:39

## Add a Meson to Home Screen on iOS

**1.** Navigate to the **Safari** icon and tap to open the app.

**2.** Tap on the **URL bar**.

**3.** Now type the Meson Cloud address that you want to add to your home screen. And then hit the **go** button on your keyboard. 

**4.** Tap the **Share** icon in the bottom navigation bar.

**5.** Scroll up through the list of options, and tap on the **Add to Home Screen** button.



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



**6.** Now tap on **Add** to add the open website or web page to your iPhone’s home screen.


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



And the website’s shortcut will appear on your iPhone’s home screen. Next time, you just tap on the shortcut and it will take you directly to the website or the page you just added.

## Add a Meson to Home Screen on Android

**1.** Navigate to the **Chrome** browser on your Android smartphone and tap to open it.

**2.** Tap on the **URL bar** to begin.

**3.** Type the address of the Meson Cloud and then tap on **Go**. 

**4.** Once the Meson Cloud loads up, tap on the **kebab menu** to expand the options.

**5.** Tap on **Add to Home screen**.


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



**6.** Now tap on **Add**.

**7.** A pop-up menu will again appear, tap on **Add** to add the website to the home screen.


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



And the website will now appear on the home screen of your Android smartphone.
How Artificial Intelligence will change the future
Tags: ai, programming
Published: 2023-04-07 02:08:45

[Artificial Intelligence (AI)](https://itsfalconb.blogspot.com/2023/03/what-is-ai-how-artificial-intelligence.html) is a rapidly growing field that involves the creation of intelligent machines that can perform tasks typically associated with human intelligence, such as learning, reasoning, problem-solving, and decision-making. AI is transforming the way we live, work, and interact with technology, and it has the potential to revolutionize almost every aspect of our lives. In this article, we will explore the basics of artificial intelligence, its history, its applications, and its future.

AI technologies are increasingly being used in a wide range of applications, including virtual assistants, self-driving cars, medical diagnosis, and fraud detection. While AI is still in its early stages of development, it has the potential to revolutionize many industries and transform the way we live and work.
How to install Jenkins !!
Published: 2023-04-07 01:18:14

Step 1 - **Prerequisites**

Navigate to https://www.jenkins.io/
Choose Documents - https://www.jenkins.io/doc/book/installing/linux/
Understand the Pre-requisites. To run Jenkins on Host we need Java to be installed.

Step 2 - **Install updates and Java**

. apt-get install update
. apt-get install openjdk-11-jre

Step 3 - **Installing Jenkins packages** 

. 
curl -fsSL https://pkg.jenkins.io/debian-stable/jenkins.io.key | sudo tee \
  /usr/share/keyrings/jenkins-keyring.asc > /dev/null
echo deb [signed-by=/usr/share/keyrings/jenkins-keyring.asc] \
https://pkg.jenkins.io/debian-stable binary/ | sudo tee \ /etc/apt/sources.list.d/jenkins.list > /dev/null
---------------------------------
copy,paste above package download command as a whole and hit enter

. apt-get install jenkins

Step 4 : ***You need to open ports in system firewall***

. ufw enable
. ufw allow 8080
. ufw reload
. ufw status   -- **wait for a while till this command throws open ports**
. ufw allow openssh

step 5 : ***Start Jenkins and unlock Jenkins***

. systemctl start jenkins
. systemctl status jenkins   -- **it should show the status as active**

. cat /var/lib/jenkins/secrets/initialAdminPassword  --- *Note down this password*

. In your browser navigate to https://your_ip_address_of_machine:8080

step 6 : ***Setup Jenkins***


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

Remember or note down your admin username and passsword

Step 7 : ***Choose install plugins***

Choose your plugins, thus I have integrated Jenkins with Github

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

step 8 : To be continued ...
Launch Your Web Hosting Business with Mozfire's Reseller Plans: Affordable and Feature-Rich Solutions for Your Customers
Published: 2023-04-06 23:33:17

As the founder of [Mozfire](https://mozfire.in), I'm proud to introduce our Reseller Hosting plans, designed to help entrepreneurs and businesses launch their online presence with ease. Our hosting services come with exceptional website functionality, 24/7 professional assistance, and a refund policy of up to 7 days, so you can rely on us to support your business goals.


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

Our Reseller Hosting plans offer affordable, low-cost options for anyone looking to start their own web hosting company. With four plans to choose from, you can find the perfect fit for your business needs and budget. Let's dive into the details of each plan.

First, we have our Basic plan, priced at ₹299 per month. This plan includes 30 cPanel accounts, Litespeed Webserver, 10 GB storage, unlimited databases, and unmetered bandwidth. You'll also receive weekly backups and a free 1-click WordPress install to get your website up and running quickly.

Next up is our Advance plan, priced at ₹499 per month. This plan includes 60 cPanel accounts, Litespeed Webserver, 20 GB storage, unlimited databases, and unmetered bandwidth. You'll also receive weekly backups, a free 1-click WordPress install, and a free SSL certificate to encrypt sensitive data and improve SEO rankings. Plus, if you sign up for a yearly plan and use promo code "YEARLYDEAL," you can save 20% off your total cost.

For those looking for more storage and cPanel accounts, our Premium plan is the perfect fit. Priced at ₹599 per month, this plan includes 100 cPanel accounts, Litespeed Webserver, 50 GB storage, unlimited databases, and unmetered bandwidth. You'll receive weekly backups, a free 1-click WordPress install, and a free SSL certificate. Plus, if you sign up for a yearly plan and use promo code "YEARLYDEAL," you can save 20% off your total cost.

Lastly, our Recommended plan is ideal for businesses with high traffic websites or multiple websites to host. Priced at ₹999 per month, this plan includes unlimited cPanel accounts, Litespeed Webserver, 200 GB storage, unlimited databases, and unmetered bandwidth. You'll receive weekly backups, a free 1-click WordPress install, and a free SSL certificate. Plus, if you sign up for a yearly plan and use promo code "YEARLYDEAL," you can save 20% off your total cost.

No matter which plan you choose, you'll benefit from our user-friendly control panel, 1-click domain name setup, access to over 150 free apps, and Germany's data centers for faster page loads. We also offer paid options for up to 30 days of backups, so you can recover your hosting account in case of mishaps.

At Mozfire, we're committed to providing exceptional hosting services and round-the-clock professional assistance. With our Reseller Hosting plans, you can start your own web hosting company with ease and confidence. Try us out today and see the difference for yourself.
React Router Dom Tutorial
Tags: reactrouterdom, router, tutorial, programming
Published: 2023-04-06 23:25:25

We are used to accessing different pages of a web application, like About, Contact, etc. To navigate on these pages we need to create routes where each route represents a different screen.

To create routes in React we can use the [React Router Dom package ](https://www.npmjs.com/package/react-router-dom) and by the way, this is the subject of this tutorial. This package will help us to set up the routes in your app.

First of all, you need a react project. I am assuming you already have one at this point. More details about how to create a React app you can get on [React's official documentation](https://legacy.reactjs.org/docs/getting-started.html).

### React Router Dom

After creating your react app using your preferred method, you need to install the [react-router-dom package](https://www.npmjs.com/package/react-router-dom) with the following code:

```
npm install react-router-dom
```

With the project created and the react-router-dom package installed, we will create our routes file.

For this tutorial, I create my routes inside the App.js as below, but you can create a separate one, just doing the right imports later. First, I imported Routes and Route in the component.


```
import { Routes, Route } from 'react-router-dom';
```

After import, I created the routes:

```
//App.js

function App() {

  return (
    <Routes>
      <Route index element={<Component0 />}/>
      <Route path="/component1" element={<Component1 />}/>
      <Route path="/component2" element={<Component2 />}/>
      ...
      <Route path="/component5" element={<Component5 />}/>
      <Route path='*' element={<NotFound/>}/>
    </Routes>
  )};

export default App;
```

### index.js

To make sure your app will work, we need the Browser Router:

```
/* Browser Router from react-router-dom */
import {BrowserRouter} from 'react-router-dom';
```

After import you need to wrap your App with Browser Router, which I did on the index.js component:

```
//index.js

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
    document.getElementById('root')
)

```

### Set links 

Finally but not least important, we can create links using any component of our application, always importing the Link:

```
import { Link } from 'react-router-dom';
```

Now each link  can be:

```
<Link to="/component1">Component1</Link>
```