teleren/devto huggingface dataset:
Please don't use Bootstrap!
Tags: css
Published: 2022-01-30 01:32:23

In case you don't know what bootstrap is, [bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/) is a CSS framework. 

Here's why you shouldn't use Bootstrap. 

# All sites look alike!
When you start to see the same layout over, and over, and over again users begin to tune out. You’ve lost me. Your design looks like one of 6,000 other sites out there. And not just the same general layout, but the Exact. Same. Components.

> ”Let’s be honest: a great many of us are tired of seeing the same old Twitter Bootstrap theme again and again. Black header, giant hero, rounded blue buttons, Helvetica Neue. Yes, you can customize the header to be a different color, maybe re-color some of the buttons, use a different font. Ultimately, however, that doesn’t change anything—it still looks like Bootstrap.


# The files are *h u g e*!
Bootstrap will help you to build an attractive, responsive website, but some mobile users could be turned away by the slow loading time and battery drain issues. Bootstrap comes with a lot of lines of CSS and JS, which is a good thing, but also a bad thing because of the bad internet connection. And there’s also the problem with the server that will take all the heat for using such a heavy framework. Even when bootstrap is minified, it takes a lot of space

# Alternatives?
## TailwindCSS is much better!
> There is no faster framework than Tailwind when it comes to styling HTML. As a result, you can easily create good-looking layouts by styling elements directly. This is possible because Tailwind offers thousands of built-in classes that do not require you to create designs from scratch

### Just use plain CSS!
Why use any frameworks in libraries, and just learn the language by itself. You'll even learn (or become better at) a new language
Rootless Docker-Compose with Podman
Tags: containers
Published: 2023-01-05 22:41:04

---
title: Rootless Docker-Compose with Podman
published: true
date: 2022-01-30 01:21:11 UTC
tags: Containers
canonical_url: https://brandonrozek.com/blog/rootless-docker-compose-podman/
---

One of the benefits of Podman over Docker is that it can run daemon-less and without root. However, `docker-compose` is by far my favorite way to create and maintain containers. Luckily, the Podman folks emulated the Docker CLI so that `docker-compose` works well with Podman!

To install:

```
sudo dnf install -y podman podman-docker docker-compose

```

We can then emulate the docker socket rootless with the following commands:

```
systemctl --user enable podman.socket
systemctl --user start podman.socket

```

At this point, we’ll want to see if the daemon acts as expected

```
curl -H "Content-Type: application/json" \
	--unix-socket /var/run/user/$UID/podman/podman.sock \
    http://localhost/_ping

```

This should return `OK`. We then need to create an environmental variable to tell docker compose where the emulated docker socket lives.

```
export DOCKER_HOST=unix:///run/user/$UID/podman/podman.sock

```

To have this environmental variable persistent across reboots, add the above line to the user’s `.bash_profile`.

You’ll need a configuration file `docker-compose.yml` defined. Here is a sample one that spins up an image updating service.

```
version: "3.3"

services:
  watchtower:
    image: docker.io/containrrr/watchtower 
    container_name: watchtower
    hostname: watchtower
    environment:
      PUID: 1000
      PGID: 1000
      TZ: US/Eastern
    volumes:
      - /var/run/podman/podman.sock:/var/run/docker.sock:ro
    restart: always

```

If you want to add to add more volumes to the container, make sure it has the appropriate SELinux label if you’re using a distribution with it enabled.<sup id="fnref:1"><a href="#fn:1" role="doc-noteref">1</a></sup>

```
chcon -t container_file_t -R X

```

where `X` is the volume you wish to mount.

Now we can run `docker-compose`!

```
docker-compose ps

```

* * *

1. [https://bugzilla.redhat.com/show\_bug.cgi?id=2125878](https://bugzilla.redhat.com/show_bug.cgi?id=2125878) [↩︎](#fnref:1)
Autenticação em várias contas do GitHub usando SSH
Tags: github, beginners, git, ssh
Published: 2022-01-30 01:05:37

Para você desenvolvedor que tem uma ou mais contas no github e quer usar ssh para ter mais produtividade.

Vou mostrar como autenticar em duas contas do github usando chave ssh.

Iremos acessar a pasta `.ssh`

`cd .ssh/`

Depois iremos gerar a chave ssh com o nome do usuário do github `ssh-keygen -f code_041_id_rsa`



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

Em seguida iremos copiar o conteúdo no arquivo gerado pelo ssh `cat code_041_id_rsa.pub` e colocar no github.


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

Em seguida dentro da pasta `.ssh`, iremos criar o arquivo de configuração.

`touch config`

Iremos adicionar o Host e IdentityFile no arquivo de configuração da conta do github

```
Host github.com-code-041
  HostName github.com
  IdentityFile ~/.ssh/code_041_id_rsa
```
Em seguida iremos gerar uma nova chave essa

`ssh-keygen -f williamkoller_id_rsa`

Iremos copiar a chave essa e colocar no github

`cat williamkoller_id_rsa.pub`


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

Agora iremos adicionar o Host e IdentityFile para a nova conta do github

```
Host github.com-williamkoller
   HostName github.com
   IdentityFile ~/.ssh/williamkoller_id_rsa
```

Agora iremos testar, fazendo um clone de uma das contas do github.


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

Lembrando que precisamos colocar o nome do Host.

`git clone git@github.com-williamkoller:williamkoller/hyperion.git`


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


Testando a segunda conta


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

`git clone git@github.com-code-041:code-041/code041.git`


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

Pronto, agora temos duas contas do Github usando chaves ssh diferentes.

Espero ter ajudado!!
Inscrutable ways or how I returned to the path of a software engineer
Tags: beginners, programming, flatiron
Published: 2022-01-30 00:46:24

Hi, I'm Olga or Olya, I was born and raised in Ukraine where I graduated with a degree in computer science in 2012. However, I have never worked as a programmer, "thanks" to some of my professors and friends who ruined my self-esteem, confidence, etc.. They did it so effectively that I was terrified to even attempt it, after which I stopped looking in that direction :(
Regardless, I decided to stay in IT because for me it is an interesting field, and I became a manual Quality Assurance Engineer. ( Yeees, I was that pesky person who always annoys the developers :D )

I immigrated to the US in October 2019 and left behind everything I had. I am grateful to my husband who was able to, step by step, give me confidence and break the wall with all those stereotypes that fettered and limited me. After a while I realized that I want to pursue a career as a software engineer. However, since I obtained my degree in another country and never used those skills, I feel like I am coming into tech field as a newbie. I know that the world of technology always changes very rapidly, and I missed many years of knowledge, experience, and changes in this area. With that in mind, I have taken my first step towards getting back on track, and now I am a software engineering student at Flatiron School!

I am happy to be among the passioned and focused people, who are not afraid to change their lives and do what they love. I don't want to lie, it is tough, and I still have 12 weeks of intensive program ahead of me. I am excited and overwhelmed at the same time, sometimes frustrated and definitely tired (thanks again to my husband, he looks after the kids after daycare and cooks while I am on campus or continue studying after the kids go to bed). However, it is rewarded with happiness of getting something to work, with confidence when you passed the test with understanding and when you completed your first project. I believe and hope that I will succeed and I do not want to give up no matter what!
Luca is the new and unique microlearning educational web platform in Latin America

Tags: news, webdev, beginners, programming
Published: 2022-01-30 00:20:05

[The Luca Educational Platform facilitates learning in primary and secondary school students](https://www.lucaedu.com/)
Luca arrives in Mexico! Luca is an educational platform that serves to provide children and young people with educational tools developed by expert teachers, which allow them to continue their studies and stay updated, and to be the main support for mothers and fathers when providing school support for their children.

**Luca is the new and unique microlearning educational web platform in Latin America**

The way the application is built allows easy selection of the microlearning videos that contain the official lessons of each country in Latin America.

The characteristics of the program allow it to be used on any type of operating system and on any navigation device connected to the Internet.

**I recommend you try it and please tell me about any errors or suggestions for improvement.**

It is available only in Spanish for now and registration can be done totally free.

Thank you for participating and helping me improve this program that will allow access to education in LATAM and thus contribute to the reduction of educational dropouts for children and young primary and secondary students.
Self-Signed Certificates that Work in Chrome
Tags: ssl, chrome, certificate
Published: 2022-01-29 23:55:11

> This article was originally posted on my [personal blog](https://deiucanta.com).

---

Creating a self-signed certificate is quite simple. However, Google Chrome flags most of them as insecure and doesn't even give you the "proceed" button/link.

In order to make it work, you need to add `-addext "extendedKeyUsage = serverAuth"` in the `openssl` command. Here is a complete example

```shell
openssl req \
  -x509 \
  -nodes \
  -days 365 \
  -newkey rsa:2048 \
  -keyout server.key \
  -out server.crt \
  -addext "extendedKeyUsage = serverAuth"
```

This command will give you two files: `server.key` and `server.crt`.

If you want to run the same command in a non-interactive mode you just add `-subj "/C=US/ST=State/L=Locality/O=Organization/CN=www.example.com"`
React Mui PC でもスマフォでも中央揃えで縦長の枠を作る
Tags: javascript, css, materialui
Published: 2022-01-29 23:53:36


CRA と mui で作成

```js
import {
  Card,
} from '@material-ui/core/';


function App() {
  return (
    <Card
      variant="outlined"
      style={{
        minWidth: 300,
        maxWidth: 300,
        minHeight: 640,
        marginLeft: 'auto',
        marginRight: 'auto',
        marginTop: 30,
      }}
    > in card text
    </Card>
  );
}

export default App;
```

直接スタイルを当てた。

===

## PC

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

===

## iPhone X (devtool)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6knw4w8yktubtuwpzsx.png)
Nft For Beginners
Published: 2022-01-29 23:47:36

There is a high probability you have heard about NFT, which in full is called non fungible tokens. This simply means that it cannot be replaced or interchanged. 

**What brought about NFT?**

NFT became popular due to blockchain technology becoming mainstream. NFT can be any digital assets, artworks, pictures, videos or music. What makes them interesting is that they have unique properties which make it easy to prove ownership.

For example, if you have a picture, let's assume your picture, to make it an NFT, you just have to store it with its attribute on the blockchain. You don't even need to be a programmer or technical person to do this. This can be easily done on  [Opensea](https://opensea.io/) .

NFTs are quite popular because people are buying and selling it. you may not be able to sell your NFT picture but if you are an artist or a creative, you can make a lot of money listing your creative asset on an NFT marketplace. 

**What makes NFT stand out in the blockchain world?**

They can be traded across different ecosystems, this means you can view your NFT on different wallets and marketplaces. This is possible due to open standards adopted across the ecosystem.
It is easy to trade and respond to market forces, demand and supply determine the price in the long run. The ownership is verifiable without the need for any third party.

NFTs are been utilized in various industries.
Arts - Arts are being sold as NFTs on  [Opensea](https://opensea.io/)  or other platforms
Music - Music are hosted on  [Opulous](https://opulous.org/)  as NFTs
Videos - Videos are hosted on  [AirNFTs](https://www.airnfts.com/)  as NFTs
Gaming - NTs are a big part of the [ Axie infinity](https://axieinfinity.com/)  game.
Sports - NBA top shot is a big example of how the NBA is cashing out with NFTs.
Real Estate - Virtual lands are been sold as NFTs on  [Decentraland](https://decentraland.org/) 

**NFT Marketplaces**

The most popular one is  [Opensea](https://opensea.io/)

Others are [SuperRare](https://superrare.com/) and
[Rarible](https://rarible.com/) 

Thank you for taking the time to read, you probably have no idea how blockchain works

You can check out my article -  [Blockchain for Beginners](https://dev.to/josh4324/blockchain-for-beginners-5bc0)
France TV apuesta de la mano de Atos por la descarbonización en la creación de su nuevo medio NOWU

Published: 2022-01-29 23:42:39

Impacto del carbono considerado desde el principio del proyecto
Para garantizar la optimización y la reducción de su impacto en el carbono, EcoAct y Greenspector establecieron un punto de referencia de las mejores prácticas en medios de comunicación con bajas emisiones de carbono y luego calcularon la huella de carbono del proyecto. En el momento de la puesta en marcha del proyecto, la huella de carbono de los medios de comunicación se estimó en 74 toneladas de CO2 equivalente (esto es, por ejemplo, 37 viajes de ida y vuelta de París a Nueva York) y se controlará con el tiempo a medida que se desarrolle el servicio. Greenspector también ha estudiado el nivel de corresponsabilidad del medio, gracias al certificado de sobriedad digital de Greenspector. NOWU fue el primer medio de comunicación que obtuvo un buen resultado: una puntuación ecológica de 61/100, que corresponde al nivel de bronce.

Apoyo a largo plazo
Gracias a estos primeros análisis en profundidad, EcoAct y Greenspector pudieron identificar palancas de reducción tanto para la creación de la plataforma como para su uso, además de actividades de sensibilización y formación, combinadas en un plan de acción concreto con una ambición coherente con los objetivos del Acuerdo de París.

“El ecodiseño se integró desde la misma concepción de la web de NOWU. Desde el principio, el equipo digital aplicó las mejores prácticas, incluyendo simulaciones de consumo de energía y recursos que se desarrollaron según casos de uso lo más cercanos posible al comportamiento de los usuarios para detectar posibles excesos de consumo en la web. Nuestra colaboración con EcoAct nos ha permitido proyectar mejor el impacto del carbono del proyecto para convertir a NOWU en un referente en medios de comunicación ecológicos por diseño”. Thierry Leboucq, presidente de Greenspector.

“EcoAct está encantada de haber podido contribuir a la implantación de una estrategia de descarbonización para un medio de comunicación que pretende sensibilizar a los jóvenes en materia de desarrollo sostenible. Y Greenspector, gracias a su experiencia en el ámbito digital, ha sido un verdadero apoyo en el desarrollo y despliegue de esta estrategia”. Yann Josse, director de negocios del sector público de EcoAct.

[ver mas...](https://href.es/)
Pide-lo Hostelería, el innovador software para el sector HORECA, de la empresa Darytech

Published: 2022-01-29 23:41:59

Para hacer más fáciles estas complicadas circunstancias, Darytech propone una innovadora tecnología para que el sector HORECA siga abriendo sus puertas al público de manera segura, llamada Pide-lo Hostelería.

¿Cómo funciona el software Pide-lo?
Darytech es una agencia que desarrolla softwares. Su aporte más reciente al sector HORECA (hoteles, restaurantes, caterings y otros negocios de comida) consiste en un completo software disponible para cualquier plataforma llamada Pide-lo Hostelería, cuyo objetivo es facilitar la interacción entre el cliente y el camarero añadiendo fluidez al servicio de mesa reduciendo el riesgo de contagio.

Los comensales deben escanear el código QR que encontrarán en la mesa para poder acceder a la carta digital, o bien al sistema de auto pedido. También tendrán la oportunidad de ver fotos, conocer precios, pagar y leer el resumen de los productos disponibles en el idioma que escojan. Posteriormente, podrán pedir su comanda directamente al camarero que es notificado inmediatamente en su propia área privada.

Por otra parte, el propietario del establecimiento de hostelería podrá añadir o quitar productos de la carta. Además, tendrá la posibilidad de destacar productos por temporada, gestionar los pedidos por mesa y control de aforo (el cliente puede consultar el aforo del establecimiento en todo momento, para así poder reservar una mesa de manera online e inmediata).

Beneficios del software Pide-lo para los hosteleros
El programa está diseñado para adaptarse a todo tipo de negocios, destacando los bares y restaurantes de comida rápida, de tapas o de propuestas gastronómicas más especializadas como podría ser una marisquería. También está pensado para cualquier hostal u hotel que tenga a su disposición un restaurante, ya que se puede gestionar cada habitación independientemente, incluso crear áreas en las zonas comunes para pedir, por ejemplo, un cóctel. Gracias a la aplicación, el hostelero puede revisar las estadísticas y el historial de ventas del establecimiento en tiempo real para planificar estrategias que aumenten los ingresos.

De igual forma, el uso del software ayuda a evitar el acercamiento entre las personas y agiliza los procesos para así cerrar temprano, lo que se adapta a la perfección a las normas dictadas por las autoridades. El propósito de esto es evitar multas o cierres como los ocurridos en múltiples negocios de toda España, los cuales han sido sancionados por tener clientes sin distanciamiento y en horarios de toque de queda.

[ver mas...](https://href.es/)
Custom NextJS Server with Typescript
Tags: nextjs, typescript
Published: 2022-01-29 23:38:16

> This article was originally posted on my [personal blog](https://deiucanta.com).

---

There is an official NextJS guide on how to create a custom server. However, it only works with JavaScript. Please follow their guide and come back.

> [https://nextjs.org/docs/advanced-features/custom-server](https://nextjs.org/docs/advanced-features/custom-server)

---

1. Rename `server.js` to `server.ts`.

2. Update the `scripts` in `package.json`

   ```json
   "scripts": {
   "dev": "ts-node server.ts",
   "build": "next build",
   "start": "NODE_ENV=production ts-node server.ts"
   }
   ```

3. Install `ts-node`

   ```
   yarn add ts-node
   ```

4. Add this section in `tsconfig.json`

   ```json
   {
     // ...
     "ts-node": {
       "transpileOnly": true,
       "compilerOptions": {
         "module": "commonjs"
       }
     }
   }
   ```
Instagram Clone
Published: 2022-01-29 23:10:52


(if you see the picture either squeezed or stretched, it's because dev.to did not implement it correctly for some browser widths. Bold text with **** does not work either, I hope dev.to will fix it.)

Link to the fully working app:
instopound.herokuapp.com


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mjcah9slr64ulnf1ycu.jpg)



Meet Instapound - Instagram for those who don't know the metric system! What's a gram? How much is a gram? 

If you keep asking yourself those questions, do not worry! We got you covered! No more grams, no more kilograms. At Instapound we convert grams to ounces, pounds to kilograms!

I've been working on an instagram clone for 4 weeks using:

- GraphQL
- Prisma for Postgres
- React
- Apollo-Express
- styled-components



Implemented functionality:

- Upload photos
- Like a photo
- Comment on a photo
- Follow a user
- Personal feed

Search functionality still needs to be implemented (easy to do).

I wanted to call it Instaounce, but the word is hard to read and InstaOunce didn't look good aesthetically. So, Instapound it is!
Productivity Tips From Developers to Developers
Tags: webdev, productivity, career, discuss
Published: 2022-01-29 22:30:55

_*header pic by [Shen Comix](https://twitter.com/shenanigansen)_

Remember when you were a junior dev and you didn't know how to progress faster, what productivity tools and appoaches to use, what kind of mindset you need to adopt. What tips and tools would you give to a younger self? What important lessons did you learn as a dev? 

Please, share in the comments! 
I'll pick some of your answers for my next article.
Getting humble bundle books
Tags: humblebundle, books, python
Published: 2022-01-29 20:38:05

I have been using [Humble Bundle Books](https://www.humblebundle.com/books?hmb_source=navbar) for at least three years. However, they still haven't implemented a user-friendly way to download all the books from the order page. They have an option to download all the books, but when you click on it, you will have one popup for each book to download, and you would need to do it multiple times if you want your books in different formats.

![Very Angry Image](https://media.giphy.com/media/11tTNkNy1SdXGg/giphy.gif)

So I decided to use my ⌨️🐒skillz to come up with a better solution.

Here I present to you `humble_get` a cli tool that would allow you to download all of your Humble Bundle books from the comfort of your terminal.

```bash
pip install humble-get

# Get YOUR_KEY from humble_bundle page
# https://www.humblebundle.com/downloads?key=YOUR_KEY

# And get all of your books in a nice directory:
humble_get -key YOUR_KEY -format epub -p ./my/books/directory
```

### Resources
{% github Bobrinik/humble_bundle_books %}
Steps to generate github ssh keys for windows
Tags: github, git, ssh
Published: 2022-01-29 20:55:19

![Image of the error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxbbnkhmozmgyw7yq62v.jpg)Have you wondered why you get this weird error while trying to push or clone code from github? to explain this in few words, it's the new ssh protocol which is githubs way of allowing you easily authenticate to the github service without supplying your username and password everytime you want to push code to the github cloud

1.`ssh-keygen -t rsa -b 4096 -C "your_email@example.com"` copy and paste this code on your command line.

2. Type `cd .ssh` to gain access to that directory. You will find 3 files inside the directory namely; id_rsa, id_rsa.pub and known_hosts.

3. Type `cat id_rsa.pub` to open and copy the generate key

4. Once this code has been copied, navigate to settings->SSH and GPG keys.

5. Use the green button on the top right to create new ssh key, you will be required to fill in a name, then paste and save the generated key. voila!