teleren/devto huggingface dataset:
Safe to interact with Kubernetes CLI
Tags: kubernetes, bash, unix, shell
Published: 2022-04-20 16:28:10

When you interacting with Kubernetes CLI like `kubectl` or any related commands. It normally interact with current context of `kubeconfig` file with Project, Cluster, Namespace.
 
It will mess you up when interacting with **multiple** projects, clusters, namespaces. Since you cannot sure what is context that you will pull a trigger. And quite error-prone when interact with that.

---

## Current Context Prompt
> Ensure on your current context of kubectl by showing current context prompt on your screen when typing related Kubernetes commands.

![Context Prompt in your zsh shell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehs3kzkkgqe3tjrbssuq.png)

### Prerequisites 

- [Kubernetes CLI](https://kubernetes.io/docs/tasks/tools/)
- [Shell: zsh](https://ohmyz.sh)
- [Theme: romkatv/powerlevel10k](https://github.com/romkatv/powerlevel10k)

When you using [zsh](https://ohmyz.sh) with [romkatv/powerlevel10k](https://github.com/romkatv/powerlevel10k) theme. It feature "Show in Command" which support `kubecontext` which can show current context at right hand side of each prompt and always show when you run related Kubernetes commands.

---

Here is a sample guide to customize on [romkatv/powerlevel10k](https://github.com/romkatv/powerlevel10k) configuration file `~/.p10k.zsh` which you can open on any text editor, then edit and reload your shell session.

### Show on Command
This will specific a list of command that will trigger to show current context while you typing-in, feel free to adding more if you have more related Kubernetes tools.

```shell
typeset -g POWERLEVEL9K_KUBECONTEXT_SHOW_ON_COMMAND='kubectl|helm|kubens|kubectx|oc|istioctl|kogito|k9s|helmfile|fluxctl|stern|ytt'
```

### Customize context detail
You can specific on what Kubernetes context information to show on the prompt when you typing-in any related Kubernetes commands

Many options are available and already commented on `~./p10k.zsh` file, but here is my recommended pattern that quite clear when you working with multiple contexts.

> `CLOUD_PROVIDER/PROJECT_NAME/CLUSTER_NAME/NAMESPACE`
> Same as above sample images

```shell
typeset -g POWERLEVEL9K_KUBECONTEXT_DEFAULT_CONTENT_EXPANSION='${${P9K_KUBECONTEXT_CLOUD_NAME:+/$P9K_KUBECONTEXT_CLOUD_NAME/$P9K_KUBECONTEXT_CLOUD_ACCOUNT/$P9K_KUBECONTEXT_CLOUD_CLUSTER}:-$P9K_KUBECONTEXT_NAME}${${:-/$P9K_KUBECONTEXT_NAMESPACE}:#/default'
```
Conditional rendering in React
Tags: react, javascript, beginners
Published: 2022-04-20 16:08:37

Here are a few ways to conditionally render your React components:

1. For multiple components, use a useState hook to decide which component will render and put the setState logic where the user would be making that decision, like clicking a button on a navigation header or choosing an option from a scrolldown.

2. If you're trying to decide whether or not to render just one component, you can use the in line && syntax. For example, true/false && <Component /> will render the component if the truthy expression evaluates to true, and will not render if it's false. It's good for toggling displays and making sure the component shows only if it has data.

3. There is also the inline ? : operator that works as a shorthand for an if-else statement. It first evaluates a truthy expression before the ? and then will run the code after the ? for true, or the code after the : for false. This allows for a quick and easy way to conditionally render two different components that are mutually exclusive.
Your first message: learn the message structure and how to send it
Tags: opensource, embedded, microservices, luos
Published: 2022-04-20 15:58:50

Luos engine aims to exchange information between services by sending messages. In this tutorial, you will learn messages' structure and how to send one to another service.
⏩ https://docs.luos.io/tutorials/your-first-message/

In the first part, you will learn more about receiving your first message with Luos engine and a second to learning how to send a message.
Ruby on Rails
Tags: webdev, beginners, programming, ruby
Published: 2022-04-20 15:58:19

I've been using Ruby on Rails for the past couple of weeks now and have found myself loving it. I've gotten attached to using generators because of the amount of time I've been saving! All from the command line you can auto create almost a fully functional application using rails g scaffold. More to come as I learn more about the language!
Let's go headless
Tags: webscraping, puppeteer, scraper
Published: 2022-04-15 09:23:47

Are you trying to scrape dynamic data, nested in Javascript elements or Ajax pages, which is not accessible from the raw HTML response that the server delivers?

Consider integrating a headless browser with the scraping logic...headless? Wait, What? but why?

Let me explain...

Websites have moved on from static HTML and CSS barebone structures to interactive and responsive Javascript structures that are rendered by browsers to dynamically inject HTML and CSS into websites when demanded.

Regular HTML scrapers do not include functionality to render the page full of Ajax and Javascript elements like a real user in an automated web scraping. Introducing Headless Browser...

A headless browser is a browser with no Graphical User Interface(GUI). Headless browsers exhibit human-like behavior in an automated task to scrape the required data embedded in javascript elements without the additional overhead of loading and processing visual elements of a website. They are controlled programmatically using command-line tools.

There are many web scraping tools that can be used for headless browsing. The most popular ones are Puppeteer, Selenium, and Playwright. Let's talk about Puppeteer...

Puppeteer is a Node.js library that supports controlling headless Chrome and Firefox. It allows downloading data, using proxies, and more. The library is maintained by the Chrome DevTools team with an active open-source community which is why Puppeteer has become one of the most popular options. For this reason, @zytedata has been working on the Zyte SmartProxy Puppeteer library to work in conjunction with the Smart Proxy Manager to crawl javascript-heavy websites with ease.

Zyte SmartProxy Puppeteer library is a client library built on top of Puppeteer – a high-level API to control headless chrome, written to work seamlessly with Smart Proxy Manager.

With Zyte SmartProxy Puppeteer library, there is

- No need to manage an additional headless-proxy tool running in the background.
- No need to run a separate piece of software to connect Puppeteer with Smart Proxy Manager

Resources:

The Zyte SmartProxy Puppeteer library is open-source and available [here:](https://github.com/zytedata/zyte-smartproxy-puppeteer)

To use Smart Proxy Manager, Sign up for a 14-day [free trial.](https://www.zyte.com/smart-proxy-manager/)

and follow this [hands-on tutorial](https://docs.zyte.com/smart-proxy-manager/integrations/puppeteer.html) to integrate Smart proxy Manager with puppeteer
Conditional Rendering
Tags: react, javascript, webdev, programming
Published: 2022-04-20 15:52:48

Conditional Rendering In React:

What is conditional rendering?

Conditional rendering is how we create dedicated components that fulfill specific tasks by implementing the ability to render or not render components based on their state and user input. Fortunately, we don’t have to worry about learning new functionality regarding conditional rendering in React, as it functions in the same way as vanilla Javascript. An example of conditional rendering could be…

Ex Use Case:
Imagine a big red button. Every time we click the button, we want to know if the button has been clicked an even or odd amount of times. If the button click is even, we want the button to turn blue. If the return is odd, we want the button to turn yellow.

Here is an example of using conditional rendering in-line. One of the cool things about conditional rendering is if you create a statement using an && logical operator, a falsey result will return the first part of the statement while ignoring everything after the &&. This method is relatively unique and clever, in my opinion. Below is an illustration of this method from React Documentation.

React Docs Ex 1.

```
render() {
  const count = 0;
  return (
    <div>
      {count && <h1>Messages: {count}</h1>}
    </div>
  );
}
```

Another interesting use case for in-line conditional rendering is the if/else ternary statement; this may be the most useful conditional statement in React. As we can imagine, we have a condition to evaluate. The conditional is found to be true, return true, and if false, return false. Again, the amount of code used and the resulting functionality is a high ratio of usefulness to lines of code.

React Docs Ex 2.

```
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}
```


Condition ? True : false

We can do a whole lot with this little statement.
Paracetamol.js💊| #104: Explica este código JavaScript
Tags: javascript, webdev, spanish, beginners
Published: 2022-04-20 15:43:10

## **<center>Explica este código JavaScript</center>**
### ¿Cuál de las siguientes desestrucuraciones regresa la salida por consola del ejemplo?
#### <center>**Dificultad:** <mark>Avanzado</mark></center>

```js
const metadata = {
  title: 'Scratchpad',
  translations: [
    {
      locale: 'de',
      localization_tags: [],
      last_edit: '2020-08-29T08:43:37',
      url: '/de/docs/Tools/Scratchpad',
      title: 'JavaScript-Umgebung'
    }
  ],
  url: '/es/docs/Tools/Scratchpad'
};

console.log(titulo1, titulo_anidado); //Scratchpad JavaScript-Umgebung
```

A.
```js
const {
  title:titulo1,
  translations:[
    {
      title:titulo_anidado
    }
  ]
} = metadata;
```
B.
```js
const {
  title: titulo1,
  translations: 
      title: titulo_anidado
} = metadata;
```
C.
```js
const {
  title: titulo1,
  translations:
      {{title: titulo_anidado}}
} = metadata;
```
D. 
```js
const {
  title: titulo1,
  translations:
      [title: titulo_anidado]
} = metadata;
```

Respuesta en el primer comentario.

---
Dev x Appwrite Hackathon: #1 Introduction
Tags: appwritehack, react, tailwindcss
Published: 2022-04-20 15:35:45

### Overview of My Submission
Hi there! After a week-long deliberation, I'm entering the **appwrite x dev hackathon**.😁

#### What I'm building
I call the app DevSpace Forum. **What's it about?**

> DevSpace Forum is an online community where you can get your tech-related questions answered via video conferencing _(or sessions)_. You can also talk about the latest technology you're using in live video sessions.

Questions on DevSpace can be in the form of "how to's", "getting started", "introduction", "onboarding experience", etc.

I know what you're thinking. There's youtube! _(and many others)_

**What's the difference?**

On DevSpace, you can ask coding-related questions like on StackOverflow only that another user gets to provide an answer to your question in a live session.

That way, you get to ask follow-up questions during the live sessions.

DevSpace is about asking, sharing, networking, and learning.

You can also raise a question or tutorial too and let users in the community join your live sessions.

_Finding loopholes in the idea already (or possibly have a contribution) do share._

Thanks 😁

#### How I will build it
I'll be using the opportunity to learn Tailwind CSS. I've always wanted to use it.

I'll be sharpening my React skills as well.

#### The inspiration
I've almost completed my React Course on [Scrimba](https://scrimba.com/learn/frontend) and ever since, I keep getting this urge to share my knowledge.

I could create a youtube channel for it but how about an app (a forum or community) that is specifically for learning and sharing (I thought to myself)

Fun fact: You can combine your youtube channel with DevSpace.

During every video session, the tutor (the person answering or sharing ideas) records the session and can upload it on his youtube channel.

S/he will also share the link to the record session so that members of the community could watch it at a later time.


### Submission Category: 

This submission is under the **Web2 Wizards Category**


### Link to Code

Find the GitHub repository {% details here %} https://github.com/Mr-Georgie/Dev-Space-Forum {% enddetails %}

{% github Mr-Georgie/Dev-Space-Forum %}

### Additional Resources / Info
This is a series so the next post will be about setting up the user interface

#### Links
- https://appwrite.io/
- https://tailwindcss.com/
- https://reactjs.org/docs/getting-started.html

See ya' in the next post 👋
The Chatbot : Another Foray into the Vast World of Machine Learning
Tags: webdev, tensorflow, beginners, machinelearning
Published: 2022-04-20 15:29:48


**Confession :** This is me trying to dig myself out of tutorial hell. I've lost count of the number of times I've wanted to try something - then start watching a tutorial - lose the plot halfway there - only to blindly follow along and type out commands wanting to look at a final product and feel like I've accomplished something. And that is rarely ever the case. Sound familiar? It's a pretty common problem I hear.

So what am I doing here? Well right now I find myself wanting to be able to apply TensorFlow in my future projects. In order to achieve this hefty goal, I will be building a fully end-to-end Chatbot application that responds to user input. You can check out the progress I make here:

{% github JDPrabasha/chatbot %}

This is not the first time I will be using TensorFlow. Nor is it the first time I will be building a Web Application. Will I be following tutorials? Absolutely. 

The catch - this time I will be documenting all of my thought processes, problems faced, lessons learned and all those other things in-between. Essentially, if all goes to plan, this series of articles should allow anyone to speedrun their way through to achieving a similar goal. Why do it this way you ask? Well, if I can explain that entire process, that should mean all those things must have stuck with me yeah? Fingers crossed 🤞

Here's the current plan :

1. Follow along with this tutorial :
{% youtube 1lwddP0KUEg %}
and build the model for the application.
2. Connect the model to a Flask backend
3. Connect the Flask application to a React frontend
4. Add styling
 

And well that's all I can think of so far I'm afraid. I'll be wrapping up things here for now. Wish me luck!
Do you have a goto for basic graphics / icons when you're not a designer?
Tags: design, webdev, beginners, help
Published: 2022-04-20 15:22:33

Hi DEV community!

This is my first post on here, so we'll see how it goes!

I am mainly the developer type that dabbles in design as needed. To take my work/content to the next level, I would like to spice it up with images/artwork/icons.

Anyone else in the same boat that has a goto process for getting this done besides just knowing/hiring a graphics person?
On top of that, it would nice if there was something that, given time, would be an aquired skill the longer we used it (versus go here, click and download).
For example, I use https://excalidraw.com/ for mockups and I get faster each time I do one but also more creative...
descendant elements
Published: 2022-04-20 15:16:04

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vttaj92vnaxakpgy7tvf.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pkmw3ehtnzkfax21or8.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpfiy5t0y04jom98c8po.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k86svrwid34himg8p5e2.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7nqsyudhznd8ln0u14y.png)

##priority 
4- universal (*) 
3- type (p)
2- class (.example)
1- id (#example)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1g225exv1p7quy1xyrs.png)
 
`https://specificity.keegan.st/`
website for calculate specificity
Which git commands do you struggle with?
Tags: discuss, git, github
Published: 2022-04-20 15:10:50

Which git commands and concepts do you have a hard time wrapping your head around and using regularly?

And with the commands you struggle with: Do you use them despite your difficulties or do you generally avoid them?

[Source of the cover image](https://twitter.com/henryhoffman/status/694184106440200192). 😄
I created a list of ways to say something professionally!
Published: 2022-04-20 15:02:52

I compiled a list of ways to say something professionally, if you don't know how to say something like "You are overcomplicating this." then this is the **Right** resource for you!

https://github.com/Ademrobert/How-do-you-professionally-say/blob/main/How_to_say_do_you_professionally_say.md
การใช้ join() ใน JavaScript
Tags: javascript, beginners, react
Published: 2022-04-20 14:59:38

สำหรับ join() จะเกี่ยวข้องกับการแสดงผลของ array บน JS 


มาดูตัวอย่างกัน 
```javascript
const data = [11,22,33,44];
console.log(data.join());
```

ผลลัพท์จะได้เป็น 
`11,22,33,44`

จะสังเกตว่าไม่มีการแสดงเครื่องหมาย [] ปรากฏอยู่ 

สำหรับตัวอย่าง หากเราจะเปลี่ยนเครื่องหมาย จาก "," ไปเป็นอย่างอื่น เช่น "*" 

สามารถเขียน code ได้เป็น 
```javascript
const data = [11,22,33,44];
console.log(data.join("*"));
```

ผลลัพท์จะได้เป็น 
`11*22*33*44`

หรืออีกตัวอย่าง 
```javascript
const data = [11,22,33,44];
console.log(data.join("-"));
```

ผลลัพท์จะได้เป็น 
`11-22-33-44`


มาดูตัวอย่างอื่น ๆ 

```javascript 
let sumNum = (...numArr) => {
    let total = 0
    total = numArr.map((num) => total += num)
    return total
  }

console.log(sumNum(10,10).join())

```

ผลลัพท์
`10,20`
Create An Online Food Store Website Using Angular, NodeJS, Express, And MongoDB
Tags: angular, node, mongodb, webdev
Published: 2022-04-20 14:54:20


## Lesson 6 is published
[Check out the video](https://youtu.be/uTOsLjZsIpc) if you love to build an e-commerce website using Angular, NodeJS, Express, And Mongo DB

{% embed https://youtu.be/uTOsLjZsIpc %}

##Start from [here](https://dev.to/nasirjd/create-an-online-food-store-website-using-angular-nodejs-express-and-mongodb-52gd) if you didn't:

## You Are Going To:
   1. Add Search method to the Food service
   2. Add search route
   3. Show search result in Home component
   4. Generate search component
      1. Add to home component
      2. Add ts
      3. Add html
      4. Add css

**The only requirement** for this course is the basic knowledge of Web Development.

Feel free to join our youtube community for having a productive relationship.

Happy Coding...
The ultimate place for all your wallpapers !!
Tags: appwritehack, javascript, webdev, appwrite
Published: 2022-04-20 14:35:49

[Instructions]: # (To submit to the Appwrite Hackathon on DEV, please fill out all sections.)


## Overview of My Submission

Hello everyone out there. 
It's my first time building with Appwrite and here's what I've built - [WallHub](https://github.com/IAmTamal/appwrite-docker-wallHub)

<br/>

### So what exactly is WallHub ? 

<br/>


**WallHub** is a webapp made with ReactJs , styled with Bootstrap 5.0, CSS and also using Appwrite, Docker as the backend. This webapp can be used to get acess to all the best quality UHD wallpapers for all your screens !!

After reading the docs, asking around in discord, watching tutorials, stack-overflow building this project of mine was a fun experience. This is my first time using AppWrite, Docker to build something and i really liked the way it came out. Excited to learn more and build some amazing stuffs.

The inspiration behind WallHub was pretty simple, i wanted to cover all the basics like Databases, Authentications, Buckets, Image upload, Image preview and so on my first time. So here it goes.

<br/>

---

## Submission Category

<br/>
<br/>

**Web2 Wizards**

---


## Link to Code

Here's the link to the code, check it out !!

{% embed https://github.com/IAmTamal/appwrite-docker-wallHub %}

<br/>

---

## Additional Resources / Info

**Architecture of the App ⚙**

![login1 img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnzsz0biozjo6isn6e30.png)

---

**A sneak peek into the Homepage 👀**
![home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emfthrvajwh0u91x7k0u.png)


---

**Working demo 🎥**

{% embed https://youtu.be/Znya-jCPgvc %}

---

## Thankyou
It was an awesome experience learning so much and i am really excited to go much further with all these. Hope you liked the mini project for the Hackathon !! 
Have a good day.
Automating Azure APIM configuration based on Logic App (standard) workflows' callback URLs
Tags: azure, bicep, logicapps, apim
Published: 2022-04-20 14:33:31

Continuing from my research to [retrieve Logic App (standard) workflow callback URL](https://dev.to/leonards/retrieve-logic-app-standard-single-tenant-workflow-callback-url-using-azure-bicep-5c9j), my next step was to automatically configure the Azure API Management in bicep.

My plan is to retrieve list of workflows for a particular Logic App (standard), and then iteratively configure APIM to add the backend endpoints. I had thought that it's an easy case, but it's not.

The resulting json from listcallbackUrl() is as follows (sample from Microsoft website):

```json
{
  "value": "https://prod-03.westus.logic.azure.com/workflows/d4690301f3b340de9330256bb2e83974/triggers/requestTrigger/paths/invoke?api-version=2016-06-01&se=2018-04-19T16%3A00%3A00.0000000Z&sp=%2Ftriggers%2FrequestTrigger%2Frun&sv=1.0&sig=JXbHjs3qzLPDyk-IM_VzsN-WL_mNql3v_uWbBbKgtVk",
  "method": "POST",
  "basePath": "https://prod-03.westus.logic.azure.com/workflows/d4690301f3b340de9330256bb2e83974",
  "queries": {
    "api-version": "2016-06-01",
    "se": "2018-04-19T16:00:00.0000000Z",
    "sp": "//*",
    "sv": "1.0",
    "sig": "JXbHjs3qzLPDyk-IM_VzsN-WL_mNql3v_uWbBbKgtVk"
  }
}
```
My requirements need me to populate APIM's set-backend-service and rewrite-uri. With the above json, a user-defined function is required. And alas, as of now it's [not possible in bicep](https://github.com/Azure/bicep/issues/2) :(

After further research and testing, in the end this is what I came up with:

1. Call a new module from the main bicep file by passing an array of logic app

```
module cbUrl 'module_cburl.bicep' = [for (item, i) in apiOperations: {
  name: 'url${i}'
  params: {
    logicAppId: resourceId(logicAppName)
    workflows: item
  }
}]
```

2. Create the module that just call listCallbackUrl() and provide the output with my custom format

```
param logicAppId string
param workflows string

var url = listCallbackURL('${logicAppId}/hostruntime/runtime/webhooks/workflow/api/management/workflows/${workflows}/triggers/manual', '2022-03-01')
var apiVersion = url.queries['api-version']

output url object = {
  basePath: url.basePath
  queries: '?api-version=${uriComponent(apiVersion)}&amp;sv=${uriComponent(url.queries.sv)}&amp;sp=${uriComponent(url.queries.sp)}&amp;sig=${uriComponent(url.queries.sig)}'
}

```

3. Use the array of result into API Management policy, iterating it with the same apiOperations variable.

```
resource apiPolicies 'Microsoft.ApiManagement/service/apis/operations/policies@2021-08-01' = [for (item, i) in apiOperations: {
  name: '${apimSvcRef.name}/${apiName}/${item}/policy'
  properties: {
    value: '<policies>\r\n  <inbound>\r\n    <base />\r\n    <set-backend-service base-url="${cbUrl[i].outputs.url.basePath}" />\r\n    <rewrite-uri template="${cbUrl[i].outputs.url.queries}" />\r\n  </inbound>\r\n  <backend>\r\n    <base />\r\n  </backend>\r\n  <outbound>\r\n    <base />\r\n  </outbound>\r\n  <on-error>\r\n    <base />\r\n  </on-error>\r\n</policies>'
    format: 'xml'
  }
}]
```