teleren/devto huggingface dataset:
Weekly Challenge #1 - Calc-You-Later
Tags: codenewbie, weeklychallenge, cnweekly
Published: 2023-03-02 21:06:08

---
title: Weekly Challenge #1 - Calc-You-Later
series: Weekly Challenge
published: true
description: CodeNewbie's Weekly Challenge series hosted by Brian
tags: CodeNewbie, weeklychallenge, CNweekly
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-28 16:28 +0000
---
###Daily Challenge Redux
Hey everyone! We're excited to announce a reimagining of our past Daily Challenge series. 
{% embed https://dev.to/thepracticaldev/daily-challenge-1-string-peeler-4nep %}

Our previous series focused more on shorter coding challenges that had a few decent solutions, depending on your language. Instead, we'll now focus on projects you can fully customize and make your own over the course of the week. Sharing your solutions will be less about finding the "right" answer and more about showing the community how creative you can be.

Each Thursday, we will post a new coding challenge on DEV Community under the Code Newbie Team organization. These challenges are designed to help developers practice their skills and build confidence in a low-pressure, supportive environment. Experts often say the best way to learn to code is by building projects, so that's exactly what we'll do. The challenges will be fairly open-ended, so you can choose your level of difficulty and how much time you want to spend. Developers at all skill levels are encouraged to participate. Feel free to use any language that allows you to meet the requirements. 

After posting each challenge, I'll be in the comments to share some feedback and cheer you all on!


###Challenge #1: A Calculator
For the first challenge, we'll keep it relatively simple. This week, the challenge is to make a working calculator with a customized user interface. 

The first part of the challenge is simply to make a functional calculator, but the second part is to make it your own! Use your signature colors, change the background, give the buttons funny sound effects.

Feel free to make the calculator in any language you'd like. You can use CodePen to share if you'd like to design it in JS. You can also go the Python route and build it with Tkinter or PyQt.

We hope these challenges will motivate you to code more often and allow us to build connections as a community. Please let us know if you have any feedback or suggestions for future challenges. We look forward to coding with you!
Dynamically watermark images using Amazon S3 Object Lambda as they are retrieved
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-03-02 21:03:17

[61/100] #100DaysOfCloud Today, I created a Lambda function and used Amazon S3 Object Lambda to dynamically watermark images as they are retrieved.

Amazon S3 Access Points, a feature of S3, simplify data access for any AWS service or customer application that stores data in S3. With S3 Access Points, customers can create unique access control policies for each access point to easily control access to shared datasets. Customers with shared datasets including data lakes, media archives, and user-generated content can easily scale access for hundreds of applications by creating individualized access points with names and permissions customized for each application. Any access point can be restricted to a Virtual Private Cloud (VPC) to firewall S3 data access within customers’ private networks, and AWS Service Control Policies can be used to ensure all access points are VPC restricted. S3 Access Points are available in all regions at no additional cost.

With S3 Object Lambda, you can add your own code to S3 GET, HEAD, and LIST requests to modify and process data as it is returned to an application. You can use custom code to modify the data returned by S3 GET requests to filter rows, dynamically resize images, redact confidential data, and much more. You can also use S3 Object Lambda to modify the output of S3 LIST requests to create a custom view of objects in a bucket and S3 HEAD requests to modify object metadata like object name and size. 

You can try do it by yourself by following the steps from the link below: [GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/061/Readme.md)
Opportunities/Resources of the Week
Tags: beginners, codenewbie
Published: 2023-03-02 20:43:00

_It can be super intimidating to learn new things and to challenge yourself when you first begin coding, because it can be hard to know where to start. We are 100% with you. If you needed it, here is your sign to do something for yourself that helps progress your journey today!_

**Here we go, here are some top picks of helpful resources or opportunities to learn that we found this week.**

1. {% embed https://dev.to/javinpaul/my-favorite-courses-to-learn-coding-and-programming-in-2023-4ngo %}

2. {% embed https://dev.to/avinashvagh/ultimate-roadmap-to-become-full-stack-developer-in-2023-4139 %}

3. {% embed https://dev.to/techworld_with_nana/a-guide-of-how-to-get-started-in-it-in-2023-top-it-career-paths-3gip %}


_We hope that you all are having a great week so far!_ 

**Happy coding!** 💜
Amazing fact about learning things..
Tags: learning, beginners, knowledge
Published: 2023-03-02 20:38:12

We Learn 10% of what we READ.

We Learn 20% of what we HEAR.

We Learn 30% of what we SEE.

We Learn 50% of what we SEE & HEAR.

We Learn 70% of what we DISCUSS.

We Learn 80% of what we EXPERIENCE.

We Learn 95% of what we TEACH to others.
How to Develop Cloud Native Applications Locally on Kubernetes Using DevSpace
Tags: kubernetes, docker, cloud
Published: 2023-03-02 20:35:52

---
title: How to Develop Cloud Native Applications Locally on Kubernetes Using DevSpace
published: true
description: 
tags: kubernetes, docker, cloud
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyd5d2bwlwbo0rct169s.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-02 20:32 +0000
---

In this video, you will learn how to use DevSpace, an open-source tool that simplifies and accelerates the development process on Kubernetes. You will see how to:

•  Install DevSpace and connect it to your local Kubernetes cluster

•  Create Dockerfiles and Kubernetes manifests for your client and server applications

•  Configure DevSpace to build your images, deploy your manifests, stream your logs, forward your ports, sync your files, and open your browser

•  Start developing your applications with hot reloading and interactive debugging

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

You will need a monorepo with a client and a server application. The monorepo is available on GitHub and there is a separate video for how to create it, check out this article: [JavaScript/TypeScript monorepo setup with PNPM Workspaces, Vite, VueJS and TailwindCSS!](https://dev.to/mihailtd/javascripttypescript-monorepo-setup-with-pnpm-workspaces-vite-vuejs-and-tailwindcss-nki). You will also need Docker Desktop or Minikube installed on your machine.
Streamline MQTT Broker Connections and Callback Management for Vue.js and TypeScript
Tags: vue, mqtt, typescript, webdev
Published: 2023-03-02 20:11:40

Hey everyone! I wanted to share my new TypeScript library with you all - [mqtt-vue-hook](https://www.npmjs.com/package/mqtt-vue-hook)!

This library provides a simple and efficient way for developers to connect to an MQTT broker and manage callback functions for various topics. **While the library is primarily designed for use with Vue.js, it can be used in any TypeScript project.**

Here's an example tutorial on how to use it in three simple steps:

#### Step 1: Connect to MQTT Broker

```ts
// protocol = 'wss', 'ws', 'mqtt', ...
// host = ip or domain
// port = 8083, 1883, ...
import { useMQTT } from 'mqtt-vue-hook'
const mqttHook = useMQTT()

mqttHook.connect(`${protocol}://${host}:${port}`, {
    clean: false,
    keepalive: 60,
    clientId: `mqtt_client_${Math.random().toString(16).substring(2, 10)}`,
    connectTimeout: 4000,
})
```

#### Step 2: Subscribe to Topic

```ts
import { useMQTT } from 'mqtt-vue-hook'

const mqttHook = useMQTT()
// mqttHook.subscribe([...topic], qos, opts?, callback?)
// mqttHook.unSubscribe(topic, opts?, callback?)
// '+' == /.+/
// '#' == /[A-Za-z0-9/]/
mqttHook.subscribe(
    ['+/root/#'],
    1,
    {
        properties: {
            userProperties: {...}
        },
    },
    () => {
        console.log('subscribed!')
    }
)
```

#### Step 3: Register Callback Function

```ts
import { useMQTT } from 'mqtt-vue-hook'

const mqttHook = useMQTT()

onMounted(() => {
    // mqttHook.registerEvent(topic, callback function, vm = string)
    // mqttHook.unRegisterEvent(topic, vm)
    mqttHook.registerEvent(
        '+/root/#',
        (topic: string, message: string) => {
            Notification({
                title: topic,
                message: message.toString(),
                type: 'info',
            })
        },
        'string_key',
    )
    mqttHook.registerEvent(
        'on-connect', // mqtt status: on-connect, on-reconnect, on-disconnect, on-connect-fail
        (topic: string, message: string) => {
            console.log('mqtt connected')
        },
        'string_key',
    )
})

onUnmounted(() => {
    // mqttHook.unRegisterEvent(topic, vm)
    mqttHook.unRegisterEvent('+/root/#', 'string_key')
    mqttHook.unRegisterEvent('on-connect', 'string_key')
})
```

If you're working on an IoT application or another project that uses MQTT, then this library can help streamline your development process. With [mqtt-vue-hook](https://www.npmjs.com/package/mqtt-vue-hook), you can manage MQTT-related logic more efficiently, and reduce the complexity of the development process.

I've already received some great feedback from early users, and I'm excited to continue developing this library to meet the changing needs of the developer community. If you're interested in checking it out, head over to npm to download it for free!

Let me know if you have any questions or comments. Looking forward to hearing your thoughts!

[GitHub Repo](https://github.com/tommy44458/mqtt-vue-hook)
CodeSnap: Take Code Screenshots In VS Code
Tags: vscode, productivity, screenshot, code
Published: 2023-03-02 19:32:27

There are a number of reasons why you might want to make code screenshots: it could be for the purpose of learning, reviewing code, sharing your knowledge or documentation. Whatever your specific use case may be, this VS Code extension allows you to create screenshots of code in the IDE.

## CodeSnap In VS Code

[CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap) is a extension thath allows you to take screenshots of your in VS Code. You can install it by from the marketplace.


### Features

-   Save screenshots of your code
-   Copy screenshots to your clipboard
-   Show line numbers
-   Shots with or without the container
-   Shutter action to save or copy to clipboard
-   Change the background color and many more

### Take a Shot in 3 Steps

1.  Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on Mac) and search for `CodeSnap`.
2.  Select the code you'd like to screenshot.
3.  Click the shutter button to save the screenshot to your disk.

![Taking a Shot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgvqh9ntbbkmr8mjdd2h.gif)

### Sample Shot


![Sample Shot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahdkosx5po8qu0rh0qqs.png)

## Final Thoughts

I usually generate my code screenshots from a web application but being able to do it directly in VS Code increased my productivity: I don't have to copy and paste code, and switch windows.  

I hope this article is helpful and you learned something from it. Being a technical writer and content creator I am passionate about sharing my knowledge (including tips and advice) and helping other people achieve their goals, especially those just starting out in tech. You can connect with me on my social media profiles and blogs [here](https://linktr.ee/johnademoye).
The Revenge Official Clothing Brand
Tags: javascript, react, tutorial, beginners
Published: 2023-03-02 19:27:50

There Is Not So Much Inside Information About, The [Revenge Official Clothing](https://revengeofficialclothing.com/) Brand. And We Know It First Appeared On Instagram On May, 27 Th, 2016 . And A Picture Of A Man With His Face Covered, And Wearing A T- Shirt With «REVENGE» Text . The Revenge Clothing Brand Is Based In Los Angeles . Though There Is No Brick And Mortar Store You Can Walk In . A Everything Is Sale Online And Through Pop-Ups . And The Revenge Clothing Brand Owner Is GARETTE . A Very Secretive Man In His Early 20s ,And Who Never Shows His Face , And From Time To Time . There Are Live Streams On The Revenge Brand’s Instagram To Announce Up Coming New Drops.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56egsbquqrluviyfm7r5.jpg)
Primeiros passos com Git
Tags: git, github, beginners, tutorial
Published: 2023-03-02 19:10:04

Atualmente quase todos os projetos de desenvolvimento usam o Git para publicar e versionar códigos. Nesse artigo irei abordar o que é Git e quais os comandos básicos para publicar os seus códigos.

---

## O que é Git?
O Git é sistema de controle de versão mais usado no mundo hoje em dia. Ele é um projeto de código aberto desenvolvido em 2005 por Linus Torvalds, o criador do kernel do sistema operacional Linux. Um grande número de projetos depende do Git para controle de versão, incluindo projetos comerciais e de código-fonte aberto.

Os repositórios são armazenados num servidor remoto, mas também são salvos de maneira local no computador dos desenvolvedores.

O Git pode ser acessado e gerenciado usando ferramentas de linha de comando e essa é forma que ensinarei a seguir.

---

## Subindo códigos para o Github
Chegou a hora de colocarmos a mão na massa. Primeiramente você precisará ter uma conta no [Github](https://github.com/), e então vamos criar um novo repositório.


![Captura de tela da página de criação de repositório no github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h404ngeq0uby0n7qkyk4.png)

Após isso você terá um repositório vazio, então agora chegou a hora de subir os seus códigos para esse repositório.

Usando o terminal de sua preferência navegue até a pasta onde se encontra o código que você deseja colocar no seu repositório.

1. Execute o comando abaixo para inicializar um repositório vazio na sua pasta:

    `git init`

2. Em seguida execute o comando para adicionar todos os arquivos para o commit:

    `git add .`

3. Agora chegou a hora de fazer o commit, nesse comando você definirá a mensagem que aparecerá no seu repositório. Ela é importante para que você saiba o que foi modificado naquela subida:

    `git commit -m "Primeiro commit"`

4. Lembra que lá no início eu mencionei que esse repositório está vazio? Então o seu código nesse ponto “não sabe para onde ir”, precisamos então fazer a ligação entre o nosso repositório local e o que criamos no Github. Para isso usamos o seguinte comando:

     `git remote origin https://github.com/acamilass/tutorial-git.git`

5. Agora chegou o momento final, no próximo comando vamos de fato mandar todo o nosso código para o repositório no Github:

    `git push -u origin master`

No primeiro push precisamos especificar que é necessário criar uma nova branch no nosso repositório, afinal de contas ele está vazio. Então após o push nós informamos o `-u origin nome-da-branch`, essa é uma abreviação do comando `— set-upstream origin nome-da-branch`. Após o push é só atualizar a página no Github e lá estará todo o código que há poucos minutos estava somente no seu computador.


![Captura de tela da página do repositório do github agora com os arquivos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubm2bryul52j5yzta7n9.png)

---
Assim encerro o tutorial de Git básico. Fácil, né? Usar Git, assim como qualquer outra coisa, é questão de prática. No início parece difícil mas com o tempo se torna um processo natural.

Espero ter ajudado :)
Implement Highcharts library in a React application
Published: 2023-03-02 18:54:17

Highcharts is a popular JavaScript library for creating interactive charts and graphs. Here's how you can use it in a React application:

- Installing the Highcharts React Wrapper:

The first step is to install the Highcharts React wrapper, which allows you to use Highcharts in a React component. You can install it using npm by running the following command:

```
npm install highcharts-react-official

```

- Importing Highcharts and the Wrapper in Your Component:

Once you have installed the wrapper, you can import Highcharts and the Highcharts React wrapper in your component like this:

```
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

```

- Creating a Simple Bar Chart:

Here's an example of how to create a simple bar chart in React using Highcharts:

```
import React, { useState } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

function App() {
  const [options, setOptions] = useState({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Fruit Consumption'
    },
    xAxis: {
      categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    series: [
      {
        name: 'Jane',
        data: [1, 0, 4]
      },
      {
        name: 'John',
        data: [5, 7, 3]
      }
    ]
  });

  return (
    <div>
      <HighchartsReact highcharts={Highcharts} options={options} />
    </div>
  );
}

export default App;
```

You can also read more charts using High Charts

[Implementing Highcharts library in a React application](https://www.lucentinnovation.com/blogs/posts/implement-highcharts-library-in-a-react-application)


I hope this will help you understand High Charts Library
Pipe a file stream from AWS S3 to OpenAI Whisper in Node.js
Tags: node, javascript, aws, openai
Published: 2023-03-02 18:45:52

Current (2023-03-01) OpenAI Whisper API expects a file uploaded as part of `multipart/form-data` in POST request. I initially struggled to use this API inside Node.js with an audio file stored in an AWS S3 bucket, so thought I'd share a working snippet:

The API usage example from [the OpenAI docs](https://platform.openai.com/docs/guides/speech-to-text/quickstart) in the following:

```
curl --request POST \
  --url https://api.openai.com/v1/audio/transcriptions \
  --header 'Authorization: Bearer TOKEN' \
  --header 'Content-Type: multipart/form-data' \
  --form file=@/path/to/file/openai.mp3 \
  --form model=whisper-1
```

The Node.js + AWS S3 snippet that seemed to work for looks like this: 

```js
import fetch from "node-fetch";
import AWS from "aws-sdk";
import fs from "fs";
import FormData from "form-data";

// Set the region and access keys for your AWS account
AWS.config.update({
    region: 'eu-central-1',
    accessKeyId: '***',
    secretAccessKey: '***'
});

// Create an S3 client
const s3 = new AWS.S3();

// Set the bucket and file key
const bucketName = 'openai-sample';
const fileKey = 'path/to/file/openai.mp3';

// Set the parameters for the S3 getObject operation
const params = {
    Bucket: bucketName,
    Key: fileKey
};

// Get audio metadata to retrieve size and type
s3.headObject(params, function(err, data) {
    if (err) throw err;
    
    // Get read object stream
    const s3Stream = s3.getObject(params)
      .createReadStream();

    // create form data to be send to whisper api
    const formData = new FormData();
    // append stream with a file
    formData.append('file', s3Stream, {
        contentType: data.ContentType,
        knownLength: data.ContentLength,
        filename: fileKey
    });
    formData.append('model', 'whisper-1');


    fetch('https://api.openai.com/v1/audio/transcriptions', {
        method: 'POST',
        body: formData,
        headers: {
            'Authorization': 'Bearer TOKEN',
            ...formData.getHeaders()
        }
    }).then(res => res.json()).then(json => console.log(json.text));
});
```
Data storytelling with Plotteus
Tags: javascript, typescript, opensource, datascience
Published: 2023-03-02 18:37:53

Hey!

Over the last few months I've been working on a JavaScript library designed to make it easier to create compelling and engaging data stories on the web.

The result of this endeavor - Plotteus - was released a few days ago. If you'd like to see it in action, check out these resources: [official website](https://plotteus.dev), [Observable notebook](https://observablehq.com/@bartok32/hello-plotteus) or [GitHub repository](https://github.com/bprusinowski/plotteus).

Happy plotting! 📊
Why Django? - MVT Model
Tags: django, python, beginners, webdev
Published: 2023-03-02 18:34:02

> Django is a framework easy to adopt with the frontend where python settling the backend of a fullstack website. Easy designs add ups with the help of HTML, CSS, JS. Django is easy to integrate at both the frontends and backends..

```
Other than the basics, Django follows the MVT Model at its core:
```

## Models: 

Defined as an entities to work with while crating the website. Basically call it a entities of the flow we create of a software.
Blueprints are declared before hand withe the help of Django Models.

> _Eg:_ Created a user based website where employees interacted with the website. Roles were of a Employee and a Employer. Models were defined before hand and for the ease of further development some day.

## Views:

Defined as the work which will be done with certain entities. Views can be called as functions in layman's language. Certain sections are associated with these views and provides the user full functionality with much more ease. Views are triggered upon interaction with the users.

> _Eg:_ Employee Log-in Log-out will count as a view. Certain groups of UI will trigger such functionalities which is declared in the views itself.

## Templates:

Defined as the different page styles or basic html pages in layman's language. Templates comprises of the html formatted tags with the add of jquery based functionalities triggering and the css styling. Certain Views trigger the separate templates defined within this frame.

> _Eg:_ Separate Log-in page for employee and employer for separate user experience and separate functionalities defined before hand with the models defined.