teleren/devto huggingface dataset:
Custom fonts in Next.js + Tailwindcss
Tags: nextjs, tailwindcss, tutorial
Published: 2021-12-14 18:14:50

To add fonts to your Next.js project you do not need any extra dependency:

**1**- Download your fonts and add them to the public/fonts directory.

**2**- Tailwindcss tells us in their guide the fastest way to include Tailwind if we do not plan to write any custom CSS in our project is to import it directly into pages/_app.js:

```
// pages/_app.js

- import '../styles/globals.css'
+ import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
}

export default MyApp
```

However, this is not our case and therefore we maintain `styles/globals.css`:

```
// styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
```

**3**- Declare your fonts in `style/globals.css`:

```
// styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'MyFont';
  font-style: normal;
  font-weight: 400;
  src: local(''), url('/fonts/MY-FONT.woff') format('woff');
}

@font-face {
  font-family: 'MyFont';
  font-style: bold;
  font-weight: 600;
  src: local(''), url('/fonts/MY-FONT-BOLD.woff') format('woff');
}
```

**4**- Configure Tailwindcss to add the fonts you have imported:

```
// tailwind.config.js 

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'

  theme: {
    extend: {
      fontFamily: {
        myfont: ['MyFont'],
        sans: ['MyFont', 'sans-serif'],
      },
    },
  },

  variants: {
    extend: {
      fontFamily: ['hover', 'focus'],
    },
  },

  plugins: [],
  corePlugins: {
    fontFamily: true,
  },
};
```

**5**- Use your font 😊

```
// components/MyComponent.js
   
export default function MyComponent() {
  return (
    <div className="font-myfont">
      Hello World
    </div>
  );
}
```

Any questions about the post? Feel free to ask me. 

[Original post.](https://manuelalferez.com/posts/custom-fonts-in-next-js-tailwindcss)
Terraform Data Sources | How to Use Data Sources?
Tags: terraform, devops, programming, tutorial
Published: 2021-12-14 17:57:11

{% youtube vCUdKKD3Kfk %}

GitHub Project - https://github.com/rahulwagh/Terraform-Topics/tree/master/data-sources

Terraform data sources can be used to fetch information back from the Cloud service provider (AWS, Google Cloud, Azure etc..). Along with your terraform provisioning script you need to write the terraform data source resource block for creating the data sources. 

Terraform data sources can help you to fetch - 

1. Internal IP
2. External IP
3. Instance ID
4. Tags

and much more other information associated with your terraform resource which can help automate your infrastructure code.

In this lab session, we are going to create a Terraform Data source to fetch the public IP of an EC2 instance. But similar terraform script can be written for other cloud resources such as S3 Bucket, IAM Rule, etc.
How to use Helmfile to manage your Helmchart?
Tags: kubernetes, devops, tutorial, programming
Published: 2021-12-14 17:55:51


{% youtube r9KePPg0KQY %}


Helmfile is an another wrapper working on top of Helm Chart. Just like Helm Chart, Helmfile also uses the YAML for writing the configurations.

But why do you need Helmfile if you are working with Kubernetes and Helm Chart?

1. You can bundle several Helm Charts into a Single Helmfile to manage your kubernetes eco system
2. Helmfile helps you to keep isolation between the different environments(developemnt, staging, production)
3. It can help you to identify the differences between the new changes which you want to apply against the existing running deployment inside kubernetes cluster
4. Helmfile uses the Go Templates which lets you templatify your Helmfile and also you can use Sprig Library with functions - requiredEnv, exec, readFile, toYaml, fromYaml, setValueAtPath, get, tpl, required, fetchSecretValue, expandSecretRefs
5. With the help of HelmFile you can deploy multi-tier applications inside kubernetes cluster.
Kubernetes Secrets | How to use kubernetes Secrets 
Tags: kubernetes, devops, programming, tutorial
Published: 2021-12-14 17:54:07


{% youtube atrEUnA-E1k %}


Kubernetes secrets are used for storing sensitive information such as username, password, Database credentials, and any kind the sensitive information which should not be seen in plain text format.

In this lab session, we will take a look on - 

1. What are secrets in Kubernetes?
2. How to create Kubernetes Secrets using kubectl command?
3. How to Base64 encode Kubernetes secrets?
4. How to create Kubernetes secret from file?
5. Deploy busy box container image inside Kubernetes cluster using Kubernetes secrets?
6. Store MySql Username, Password in Kubernetes Secrets?

Along with that, we will also see what are the recommended practices for using Kubernetes secrets.
How to run your pods without turning gray 📦👴
Published: 2021-12-14 17:46:00

In development stages when we debug our Kubernetes deployments or playing with Helm charts we may get stuck with some strange errors. `CreateContainerConfigError` and `CreateContainerError` are two among them. 

They occur when Kubernetes tries to create a container in a pod, but fails before the container enters the `Running` state.

You can identify these errors by running the `kubectl` get pods command – the pod status will show the error like this:
```
NAME        READY     STATUS                        RESTARTS    AGE
my-pod-1    0/1       CreateContainerConfigError    0           1m23s
my-pod-2    0/1       CreateContainerError          0           1m55s
```
Brave guys from Komodor [told us about](https://komodor.com/learn/how-to-fix-createcontainerconfigerror-and-createcontainer-errors/) the common causes of this error and how to resolve it. However, note there are many more causes of container startup errors, and many cases are difficult to diagnose and troubleshoot.

One of the obvious reasons of getting `CreateContainerConfigError` is that k8s is not capable to pull a docker image to create a pod from. Because of lack of required secrets in operative namespace. The secret is tended to be unique, it cannot be accessed from pods outside its namespace!

A workaround involves manual copying required secrets from one namespace where it exists, e.g. in production one, to another, e.g. development namespace. Here's an example how to implement copying (thanks Revsys team for [this tip](https://www.revsys.com/tidbits/copying-kubernetes-secrets-between-namespaces/)):
```
kubectl get secret gitlab-registry --namespace=revsys-com --export -o yaml | kubectl apply --namespace=devspectrum-dev -f -
```
How not to write Python comments
Tags: python, programming, beginners
Published: 2021-12-14 17:29:53


Writing comments in your Python code is not as trivial as one might think. In this article, **[How not to write Python comments](https://medium.com/pythonland/how-not-to-write-python-comments-62c613030ea8?sk=086df2711346c137b2a27d7e26fd1cdb)**, I explain how to write comments in Python. More importantly, I also share how not to use comments. These are good practices for any programming language, by the way!

I'd love to hear your comments ;)
How To Install Git And Push Codes To Github
Tags: git, github, beginners, howto
Published: 2021-12-14 17:22:32

This question explains how to set up a local Git repository and push it to Github.

## Git Installation

### Windows Installation

1. Go to [https://git-scm.com/downloads](https://git-scm.com/downloads) and click “Download For Windows”.
2. Select 32 bit or 64 bit according to your PC architecture.
3. Open the downloaded `exe` file.

The installation wizard will ask for basic information like the installation path, whether create desktop icons or not etc. You can leave them all in their default settings or make necessary changes and press “Next”. Ultimately, you will see the “Install” button at the end and it will begin the installation process.

### Linux Installation

Open a terminal window and enter the following command, it will update the local software repository.

```
sudo apt-get update
```

Then install Git using the following command.

```
sudo apt-get install git
```

### Mac Installation

1. Install `Homebrew` if not already installed ```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
2. Install Git ```
brew install git
```

Visit [https://git-scm.com/downloads](https://git-scm.com/downloads) and click “Download for Mac” for more information and alternative installation methods.

### Check The Installation

Run the following command, it should display the installed Git version.

```
git --version
```

## Create Your First Git Repository

First, create a new directory.

```
mkdir hello-git
```

Go into that directory.

```
cd hello-git
```

Initialize a new local Git repository

```
git init
```

Create a file called `hello-git.html` or otherwise, you can add your code files.

```
touch hello-git.html
```

Add some content into `hello-git.html` file and check the status of the repository. It will display the changed files.

```
git status
```

Add `hello-git.html` to the repository.

```
git add hello-git.html
```

If you have multiple files, you can add them all by using `-A` flag.

```
git add -A
```

Commit changes with a short and meaningful message like what you did in the commit.

```
git commit -m "hello-git.txt added"
```

## Push To Github

Set the Github username. Your username is the part after the 3rd forward-slash (`/`) of your profile URL. For example, in `https://github.com/bitcoin`, `bitcoin` is the username.

```
git config --global user.username your_github_username
```

Create a new repository in Github by visiting [https://github.com/new](https://github.com/new).

Link the Github remote repository to the local repository.

```
git remote add origin https://github.com/your_github_username/hello-git.git
```

Push local repository to Github repository.

```
git push origin master
```

Feel free to visit [devtonight.com](https://devtonight.com?utm_source=dev&utm_medium=questions&utm_campaign=how-to-install-git-and-push-codes-to-github) for more related content.
How to create Responsive Shopping cart for eCommerce website HTML CSS JS
Tags: css, tutorial, webdev, beginners
Published: 2021-12-14 17:01:51



{% youtube -gEV3znqu8E %}

How to make responsive shopping cart for eCommerce website html css javascript.
create a shopping cart page using javascript functionalities.

📹 Recommended Videos
-----------------------------
[How to use ionicon](https://youtu.be/TTrYjLOJeKs)

---

🔗 Essential links
-----------------------------
[All Images](https://drive.google.com/file/d/10cLnh0ECCAoxifoFGObLFQVNxSdHdNm7/view?usp=sharing)
[Font - Source Sans 3](https://fonts.google.com/specimen/Source+Sans+3)
[Ionicon](https://ionic.io/ionicons)
[Source Code](https://www.patreon.com/posts/source-code-cart-59909583?utm_medium=clipboard_copy&utm_source=copy_to_clipboard&utm_campaign=postshare)

---

👤 Like - Follow & Subscribe Me
-----------------------------
Twitter : https://twitter.com/codewithsadee
Github : https://github.com/codewithsadee
YouTube : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
Patreon : https://www.patreon.com/codewithsadee

---

[![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kn6vwn4mulhsx6o69is.png)](https://www.buymeacoffee.com/codewithsadee)
Various Types of Angular Component Selectors
Tags: angular, typescript, component, beginners
Published: 2021-12-14 16:59:06

Today we will be learning the various ways of using the component selector in Angular. 
If you are unaware of what is a component in Angular or what are the different parts of it I would recommend you to have a quick read on the following article - [Understanding-Components](https://dev.to/anubhab5/understanding-angular-component-2bpa).

There are mainly four different ways you can define a selector in Angular component.

i. **Tag Selector** 
When a component is created by default it is provided with a tag selector.
<u>app.component.ts</u> file
```
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MyFirstProject';
}
```
Lets use the selector in our index.html file in the following way-
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MyFirstProject</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width,
     initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <app-root></app-root>
  </body>
  </html>
```
---

ii. **Class Selector** 
The class selector syntax is similar to the CSS class .<selector-name>
```
import { Component } from '@angular/core';

@Component({
  selector: '.app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MyFirstProject';
}

```
In the index file we can use the selector in the below way
```
  <body>
    <div class="app-root"></div>
  </body>
```
---
iii. **ID Selector**
The id selector syntax also resemble like the CSS id selector.
#<app-root>
```
import { Component } from '@angular/core';

@Component({
  selector: '#app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MyFirstProject';
}
```
In the index.html file lets see how the selector has been used.
```
 <body>
    <div id="app-root"></div>
  </body>
```
---
iv. **Attribute Selector**
The attribute selector syntax in the component decorator selector metadata looks like [app-name]
```
import { Component } from '@angular/core';

@Component({
  selector: '[app-root]',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MyFirstProject';
}
```
In the index.html it will be used as any other attribute inside a html element. 
```
<div app-root></div>
```

So now we completed learning the different ways we can write and use the selectors in Angular. 

Hope you enjoyed the post, if you enjoyed it do like and comment.
Also if you want any specific topic please write it in the comment section.

Coming up next some more advanced features on Angular Component and more Angular topics. So stay tuned.

**Cheers**!!!
_Happy Coding_
How to create Routing with Lit Library
Tags: lit, javascript, components, nelsoncode
Published: 2021-12-14 16:58:05

In this example we will see how to add a router with vaadin router

### Vaadin router
A small, powerful and framework-agnostic client-side router for Web Components

```bash
npm i @vaadin/router
```

```javascript
import { html, LitElement } from "lit";

export class Home extends LitElement {
  constructor() {
    super();
  }

  render() {
    return html`<div>
      <h1>Home</h1>
    </div>`;
  }
}
customElements.define("my-home", Home);
```

main.js
```javascript
import { Router } from "@vaadin/router";

function initRouter() {
  const router = new Router(document.querySelector("#app"));

  router.setRoutes([
    {
      path: "/",
      component: "my-home",
      action: () => import("./pages/Home")
    },
    {
      path: "/about",
      component: "my-about",
      action: () => import("./pages/About"),
    },
  ]);
}

window.addEventListener("load", () => initRouter());
```

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Lit App</title>
    <script type="module" src="src/main.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
```
Python text to speech conversion

Tags: python, beginners, programming
Published: 2021-12-14 16:41:53

In order to convert a given text to speech, In python, we use `pyttsx3` module. pyttsx3 is a text-to-speech conversion library in Python. It works offline, and is compatible with both Python 2 and 3.

Use this command for installation:

** pip install pyttsx3
**

**Usage:
**First we need to import the module `pyttsx3` using import statement. Then we need to initialize it using `init()` function.

After initializing, we need the program to speak using `say()` function. This takes two arguments as below:

 say(text, name string)
 
 text : Any text you wish to hear.
 name : To set a name for this speech. (optional)
 
To run the speech we use runAndWait(). The say() function texts won’t be said unless the interpreter encounters runAndWait().

**Example Code #1:**

# importing the pyttsx library 
import pyttsx3 
  
# initialisation 
engine = pyttsx3.init() 
  
# testing 
engine.say("Hello world")
engine.say("My first code on text-to-speech")
engine.runAndWait() 



We can also change voice (Male or Female) and manage volume control, Also, we can increase or decrease voice rate.

**Example Code #2:**
Changing Voice, Volume and Voice rate:

import pyttsx3
engine = pyttsx3.init() # object creation

""" **RATE**"""
rate = engine.getProperty('rate')   # getting details of current speaking rate
print (rate)                                         # printing current voice rate
engine.setProperty('rate', 125)      # setting up new voice rate


"""**VOLUME**"""
volume = engine.getProperty('volume')   # getting to know current volume level (min=0 and max=1)
print (volume)                                               # printing current volume level
engine.setProperty('volume',1.0)      # setting up volume level  between 0 and 1


"""**VOICE**"""
voices = engine.getProperty('voices')           # getting details of current voice
#engine.setProperty('voice', voices[0].id)  # changing index, changes voices. o for male
engine.setProperty('voice', voices[1].id)     # changing index, changes voices. 1 for female

engine.say("Hello World!")
engine.say('My current speaking rate is ' + str(rate))
engine.say('The quick brown fox jumped over the lazy dog.')
engine.runAndWait()
engine.stop()
Python code to check which number is greater.
Tags: python, beginners, programming, tutorial
Published: 2021-12-14 16:37:23

# Python program to find the largest number among the three input numbers
# take three numbers from user
num1 = float(input("Enter first number: "))
num2 = float(input("Enter second number: "))
num3 = float(input("Enter third number: "))
 
if (num1 > num2) and (num1 > num3):
 largest = num1
elif (num2 > num1) and (num2 > num3):
 largest = num2
else:
 largest = num3
 
print("The largest number is",largest)


**Sample Output:
**
Enter first number: 100
Enter second number: 120
Enter third number: 10
The largest number is 120
useNavigate and useParams
Published: 2021-12-14 16:35:05

Hello,

I'm trying to route to new Posts upon selecting the dropdown Id. I'm passing that id in URL using useNavigate. But it is not making a call to particular post as the useParam is not fetching the correct ID. Can someone help me to resolve this? Please ignore the commented lines in below code.

News.js

import React, { useContext,useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { NewsContext } from "../NewsContext";
import NewsArticle from "./NewsArticle";

function News(props) {
  const {data}  = useContext(NewsContext);
  const navigate = useNavigate()
  const ID=useParams()
  
  const [id, setId] = useState(1)

  console.log("Inside Navigate ",ID)
  const handleChange =(e)=>{
    setId(e.target.value)
    navigate(`/${id}`)
  }

  return (
    <div>
      <h1 className="head__text">News App 👋</h1>
      <div className="all__news">
        {/* {data ? data.map((d)=><li>{d.ID}</li>):"Loding"} */}
         {/* {data
          ? data.map((news) => (
              <NewsArticle data={news} key={news.URL} />
            ))
          : "Loading"}  */}
          
          <select onChange={handleChange}>
          {data ?
          data.map(d=><option  key={d.id}>{d.id}</option>):
          "Loading"}
          </select>
      </div>
    </div>
  );
}

export default News;

NewsArticle.js
import axios from "axios";
import React,{useState,useEffect} from "react";

function NewsArticle(props ) 
{

const [data, setdata] = useState('')
useEffect(() => {
 // axios.get('https://s3-ap-southeast-1.amazonaws.com/he-public-data/newsf6e2440.json'+props.ID).
 axios.get(`https://jsonplaceholder.typicode.com/posts/${props.ID}`).
  then(data=>{
    console.log('Inside News Article ',data)
    setdata(data)
  })
}, [])



  return (
    <div className="news">
       <h1 className="news__title">{data.title}</h1>
       <p className="news__desc">{data.HOST}</p>
      <span className="news__author">{data.PUBLISHER}</span> <br />
      <a href={data.URL} className="news__published">{data.URL}</a>

     {/* <p className="news__desc">{data.description}</p>
      <span className="news__author">{data.author}</span> <br />
      <span className="news__published">{data.publishedAt}</span>
      <span className="news__source">{data.source.name}</span> */}
    </div>
  );
}

export default NewsArticle;

App.js
import React, { createContext, useEffect, useState } from "react";
import axios from "axios";
import { NewsContextProvider } from "./NewsContext";
import News from "./components/News";
import "./app.css";
import { BrowserRouter, Route, Routes, useParams } from "react-router-dom";
import NewsArticle from "./components/NewsArticle";

function App() {

  const id= useParams()
  console.log("Inside App id is ",id)
  return (
    <BrowserRouter>
      <NewsContextProvider>
      <News />
      <Routes>
      <Route path='/:id' element={<NewsArticle ID={id}/>}/>
      </Routes>
          
      
    </NewsContextProvider>
    </BrowserRouter>
  );
}

export default App;
Stackoverflow won't help me with this
Published: 2021-12-14 16:28:09

I asked a simple question on stackoverflow but some moderator closed it because "We don’t allow questions **seeking recommendations** for books, tools, software libraries, and more. Edit the question **so it can be answered with facts** and citations"

![stackoverflow screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yymr1llssadrlergikp3.png)
 
How is this asking for recommendations? :angry:

It seems to me that it can be answer **with facts**- is there something at all or not. And if not then maybe "why"?

From now on I think I'll only use stackoverflow in readonly mode.

Did I really broke the guidelines with this?