teleren/devto huggingface dataset:
Get Ready for Thought -Provoking Insights and Engaging Tech Content: Announcing My New Substack Newsletter
Tags: beginners, programming, devops, discuss
Published: 2022-12-17 06:43:14

Heyyy Everyoneee!! I am super duper excited to announce that I have finally started my own Substack newsletter! For those who are not familiar, Substack is a platform that allows writers and creators to share their content with their audience through email newsletters.

I have been wanting to start my own Substack for a while now, and I am thrilled to finally be able to share my thoughts, ideas, learning resources, tech articles, basic tech hacks, and awesome creations with all of you. My newsletter will cover a wide range of topics, including web development, programming, learning resources, DevOps, productivity, tech hacks—and a whole lot moreee!!!

If you are interested in following along with my journey, please consider subscribing to my [substack](https://pramitmarattha.substack.com/). I will be sending out updates on a regular basis(its my promise), and I can't wait to connect with all of you through this platform. (Well, of course, I will be fully active on the [Dev.to](https://dev.to/pramit_marattha) platform as well!!)

Cheeeersss!!! Thank you for your support, and I look forward to sharing my work with you!

👉 [pramitmarattha.substack.com](https://pramitmarattha.substack.com/)

Subscribe here 👉 [pramitmarattha.substack.com/subscribe](https://pramitmarattha.substack.com/subscribe)
Solved Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead.
Tags: react, webdev
Published: 2022-12-17 06:11:36


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

We get this warning as React 18 introduces a new root API
for managing roots.

For instance, this is the code instance in your project which has ReactDOM.render specified.

```
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";

ReactDOM.render(<App />, document.getElementById("root"));

```
To remove this warning, simply follow this:

```
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import "./index.css";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

```
【Laravel Sanctum】How to fix an error "BadMethodCallException: Method Illuminate\Auth\RequestGuard::logout does not exist. "
Tags: laravel, laravelsanctum
Published: 2022-12-17 06:04:30

Version...
Laravel Framework 8.83.26
Laravel Sanctum 2.11

An error message below showed up when logging out.

> BadMethodCallException: Method Illuminate\Auth\RequestGuard::logout does not exist. 

It says "logout does not exist." Looks like the code "Auth::logout();" has a problem.

##Solution##
Change "Auth::logout();" to
```
Auth::guard('web')->logout();
```
If you are using API tokens, try code below. (I have not tried this yet!)
```
Auth::guard('sanctum')->user()->tokens()->delete();
```
Vendure - Setting up facets
Tags: webdev, javascript, beginners
Published: 2022-12-17 05:20:15

As mentioned in my very [first article about Vendure](https://daily-dev-tips.com/posts/vendure-headless-commerce-part1/), one of the most important things for me was the concept of facets.

In my use case, I needed custom elements for each product that the end users could filter.

For example, the beer shop I'm working on needs to have quite a lot of global fields:

- Brewery
- Type of brew
- Alcohol percentage
- And so on

Luckily for us, Vendure supported this out of the box, and in this article, I'll show you how to set it up.

> Note: This involves more graphical interaction over development.

## Manually creating facets

You can spool up your Vendure server and visit the admin UI at [http://localhost:3000/admin/](http://localhost:3000/admin/).

Move to Facets in the left sidebar menu; if you opt for the demo products, you'll see some already created facets.

![Facets in Vendure](https://cdn.hashnode.com/res/hashnode/image/upload/v1671168095489/HULP_exVU.png)

In the top right, you'll have the option to create new facets containing a name and optional code.
Once you've chosen a name, you'll be able to add facet values. These are all the unique values for that facet.

I've created a Test facet with `foo` and `bar` values in the example below.

![New facet](https://cdn.hashnode.com/res/hashnode/image/upload/v1671168263067/AgAK26snY.png)

This is all great and well, but it doesn't do much. So we must move to one of our products to leverage these facets.

When you open a product, you should see on the right side there is a button to add facets.
The important part to note here is that it searches based on the values, not the name.

I'm trying to add the `Foo` value in this case.

![New facet to product](https://cdn.hashnode.com/res/hashnode/image/upload/v1671168402723/-GXXiDyi8.png)

## Importing facets

As mentioned in the [Vendure import article](https://daily-dev-tips.com/posts/vendure-importing-data/), we can use an import to manage many products.

It's good to note that this also supports the import of facets!

How it works is that you define `variantFacets` as a column, and inside, you can column deliminate all the values like so:

```text
test:Foo|test:Bar
```

This would add both the `Foo` and the `Bar` value.
The `test` part is the code of the facet that we created.

This is super helpful in creating an excellent structured database with all my products organized with custom facets.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
What is Usability Testing? Explained with Example | Usability Testing Tutorial
Tags: webdev, beginners, programming, tutorial
Published: 2022-12-17 04:42:19

As per Wikipedia, Usability Testing  is a technique used in user centered interaction design to evaluate a product by testing it on users. 

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

This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system. 

Reference article - https://www.guru99.com/usability-test...


✅ API Testing - 
https://www.learnapitesting.com


✅ Cypress Tutorial with LIVE Projects -
http://cypresstutorial.com


✅ 30 Days of API Testing Challenge - https://apitesting.co/30days

✅ 30 Days of Automation Testing Challenge - https://go.scrolltest.com/automation

✅ 30 Days of Rest Assured(with Framework) - https://go.scrolltest.com/30days-rest...
First and (Maybe) Last Post of 2022...
Tags: beginners, webdev, programming, tutorial
Published: 2022-12-17 03:45:01

Definitely more posts to come in 2023, but first, a little about me...

## **About Me**
Hello! My name is Jenn and I'm a software developer at a creative agency in Los Angeles. Before becoming a developer, I worked in the entertainment industry (showbiz, baby 🎥). Although it was a fun career choice for a while (Ok, I did meet Tom Cruise, twice), I knew it wasn't what I wanted to do long term. I always had an interest in tech and software development (especially when I read [this](https://www.theverge.com/2020/10/22/21529477/mcdonalds-mcbroken-bot-ice-cream-machines-app-engineering)) so I took a leap of faith and enrolled in a coding bootcamp, which brings me to where I am today! A dev with a little bit of imposter syndrome. 

## **Why I'm starting this blog**
I think many career switchers and bootcamp grads feel overwhelmed by the amount you have to learn, like _REALLY FAST_. 

<img width="100%" style="width:100%" src="https://media.giphy.com/media/3oFzmn3wtyBWUKO52w/giphy.gif"> ...What's that thing people say about learning development? It's like drinking out of a firehouse? Yeah, that's it...

There are concepts and technologies that I _still_ don't fully have a grasp on (kubernetes anyone??). Although I don't think the internet needs another explanation on how REST APIs work, I've decided to start this blog anyway as a way to teach myself, and hopefully you, concepts by writing about them. I would appreciate any feedback from anyone who reads my posts, especially if there's an error or gap in my explanations. 

That's all for now folks. 👋
How to make a responsive Navbar with CSS
Tags: webdev, css, beginners, tutorial
Published: 2022-12-17 03:43:05

#Making the Nav menu
First, we'll make the nav menu, we won't use an unordered list because it takes more CSS, so we'll just make a `nav` element with the selections of the menu as the children including a button. For the CSS we'll make the nav a flex row to align the children horizontally and then center all of the children. Finally, we'll give it font and a gap to space each menu selection.

```html
<!--HTML Snippet-->
 <nav>
  <p>Home</p>
  <p>about</p>
  <p>Products</p>
  <p>Blog</p>
  <button>Sign up</button>
</nav>
```
```css
nav {
  display: flex;
  gap: 10%;
  justify-content: center;
  align-items: center;
  font-family: 'poppins', sans-serif;
  background-color: white;
}

nav > button {
/* Sign up button */
  background-color: transparent;
  border: solid 1px green;
  color: green;
  border-radius: 3px;
  height:  45px;
  transition: 0.3s;
}

nav > p {
  cursor: pointer;
}

  nav > button:hover {
/* Hover animation for the sign-up button*/
  background-color: green;
  color: white;
  border: none;
}
```


#Making the Nav menu responsive 
To make the Nav menu responsive we'll need a media query. We'll make the rule a `max-width` of `500px` meaning when the website is less than 500 pixels wide the change will happen. In the media query, we'll make it so the nav bar turns into a column, instead of using an absolute position or a translation we'll use the `inset` property to put the nav to the right. Inset basically is a property used to show how much an element covers the parent element, so `inset: 0 0 0 77%` means it doesn't cover 77% of the left side. We put the position to fixed so it stays to the right of the screen no matter how much you scroll, even though this wouldn't matter in this website when you make something like a landing page this is super important when making a website like this. Lastly, we'll put the width to `100%` and give the menu selections a padding-left to center them.

```css
@media (max-width: 500px) {
  nav {
    flex-direction: column;
    inset: 0 0 0 77%;
    height: 100%; 
    position: fixed;
    z-index: 5;
    font-size: 15px;
  }
 nav > button {
/* Styling the button*/
   width: 90px;
   padding: 0;
   color: white;
   background-color: green;
   position: relative;
   width: 4rem;
 }
/* To center the text*/
 nav > p {
  padding-left: 40%;
 }

```
<hr>
This is just the nav part of my example, so here's the full example of the responsive nav at this codepen. If you minimize it some more it'll change, but if you expand it you'll see it goes back to being horizontal. 

![Image of responsive nav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swcza5dowz683dycjyif.png)
{% codepen https://codepen.io/lensco825/pen/BaPBZXV %}

<hr>
That's all I have to share for today! There are other ways to do this of course but I just wanted to show my way.  I'll make a landing page this weekend, so follow me to quickly see that!
Updating a Form
Published: 2022-12-17 03:42:09

I'm a beginner in PHP, I have an academic project working on a clinic app. **I want to create a web form to update the records of the `tblmedicalhistory` without going into PHP Myadmin.**

The DB structure
-- Table structure for table `tblpatient`
--

CREATE TABLE `tblpatient` (
  `ID` int(10) NOT NULL,
  `Docid` int(10) DEFAULT NULL,
  `PatientName` varchar(200) DEFAULT NULL,
  `PatientContno` bigint(10) DEFAULT NULL,
  `PatientEmail` varchar(200) DEFAULT NULL,
  `PatientGender` varchar(50) DEFAULT NULL,
  `PatientAdd` mediumtext DEFAULT NULL,
  `PatientAge` int(10) DEFAULT NULL,
  `PatientMedhis` mediumtext DEFAULT NULL,
  `CreationDate` timestamp NULL DEFAULT current_timestamp(),
  `UpdationDate` timestamp NULL DEFAULT NULL ON UPDATE current_timestamp(),
  `CardNo` bigint(12) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tblpatient`
(7, 3, 'ojugo Nnam', 33432, 'ojugo@ojugo', 'Male', '43, Shipe str', 46, 'very fine', '2022-09-30 19:03:39', '2022-10-16 14:00:17', 0),


-- Table structure for table `tblmedicalhistory`
CREATE TABLE `tblmedicalhistory` (
  `ID` int(10) NOT NULL,
  `PatientID` int(10) DEFAULT NULL,
  `VitalSigns` mediumtext DEFAULT NULL,
  `PC` mediumtext NOT NULL,
  `Investigation` mediumtext DEFAULT NULL,
  `Diagnosis` mediumtext NOT NULL,
  `MedicalPres` mediumtext DEFAULT NULL,
  `CreationDate` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
  `MedProcedure` mediumtext DEFAULT NULL,
  `LabReport` mediumtext DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tblmedicalhistory`
--

INSERT INTO `tblmedicalhistory` (`ID`, `PatientID`, `VitalSigns`, `PC`, `Investigation`, `Diagnosis`, `MedicalPres`, `CreationDate`, `MedProcedure`,'LabReport' ) VALUES

(2, 7, 'OjuVT', 'oju PC', 'Oju Inv', 'Oju Diag', 'Oju Prec', '2022-12-14 21:23:56', 'Oju Med Pro', 'Oju Lab'),
DOM Parser, parse de string para elementos DOM
Published: 2022-12-17 01:31:52

> _Faça conversão de código XML ou HTML a partir de texto (string) para um documento DOM_


## Como funciona
A execução pode ser feita para XML ou HTML, de acordo com o tipo e retornará como resultado um documento (`Document`). O tipo é informado como parâmetro e são aceitas as opções  `"text/html"` , que por sua vez, invocará o parser HTML ou então `"text/xml"`,  `"application/xml"`,  `"application/xhtml+xml"` e `"image/svg+xml"`, qualquer uma das anteriores invocará o parser XML.

Para o parser XML, caso a string não possa ser processada, o documento retornado deverá conter elementos descrevendo do erro retornado.

> 💬 **Note**
> Scripts não são executados durante o processamento e o resultado sempre será no formado **UTF-8**.

Caso seja informado um tipo diferente dos mencionados acima, uma exceção `TypeError` será retornada.


### Interface
```ts
type DOMParserSupportedType =
	| "application/xhtml+xml"
	| "application/xml"
	| "image/svg+xml"
	| "text/html"
	| "text/xml";

interface DOMParser {
	parseFromString(string: string, type: DOMParserSupportedType): Document;
}
```


## Exemplos

### Texto para elementos HTML
```ts
export function parseToHTML(value: string) {
	const parser = new DOMParser()
	return parser.parseFromString(value, 'text/html')
}
```

### Texto para elementos SVG
```ts
export function parseToSVG(value: string) {
	const parser = new DOMParser()
	return parser.parseFromString(value, 'image/svg+xml')
}
```

## Casos de uso
Vamos supor que eu esteja usando [Vite](https://vitejs.dev) em um projeto e quero criar componentes da web nativos e, os templates ficarão em arquivos separados, algo como isso:

```sh
src/elements
├── form
│   ├── control.html
│   ├── control.ts
│   ├── error.html
│   ├── error.ts
│   ├── label.html
│   └── label.ts
```

Fazendo `import` de arquivos HTML, ele é recebido como `string`

```ts
import textTemplate from './error.html?raw'

console.log(typeof textTemplate);
// string
```

Meu arquivo HTML usa o elemento `template`, então, antes de inserir ao `shadowRoot`, eu quero encontrar o template usando `querySelector` e depois clonar o elemento. Para que a busca funcione, precisamos que sejam elementos **DOM**, correto?

Desta forma eu poderia fazer:

```ts
const shadow = this.attachShadow({ mode })
const docTemplate = parseToHTML(textTemplate)
const template = docTemplate.querySelector('template')
shadow.appendChild(template.content.cloneNode(true))
```

Espero ter ajudado, valeu!
[]s
Entendendo e aplicando estruturas de dados com Typescript
Tags: typescript, beginners, tutorial, datastructures
Published: 2022-12-16 23:13:12

# Estrutura do que?

Algoritmos e estrutura de dados são dois termos que a gente escuta bastante ao longo da carreira como desenvolvedor, geralmente a maioria dos desenvolvedores sabem que esses dois pontos são bem importantes, porém devido ao nível de abstração que as linguagens de programação já se encontram, dificilmente o programador vai precisar implementar alguma estrutura de dados a partir do zero e com certeza já vai ter uma função já da linguagem ou até mesmo uma biblioteca que faça o serviço necessário. Mas parando para pensar, se estruturas de dados e algoritmos são usados por detrás dos panos já pra deixar tudo mais eficiente e rápido, por que não aprender sobre pra deixar o nosso código mais eficiente por exemplo?

Mas afinal, o que são estruturas de dados? Resumindo, a gente pode pensar que é uma maneira específica de organizar os dados na memória do computador de uma forma que certas operações fiquem mais fáceis e mais eficientes. Você já convive com estruturas de dados diariamente no seu código, variáveis comuns já são estruturas de dados primitivas, ou seja, quando você digita aquele:

```ts
const variável = 10;
```

Você acabou de definir uma estrutura de dados, ela está organizando os bits na memória do computador de forma que contenha o valor 10. Mas o que vamos falar é sobre estruturas de dados mais complexas.

## Quais estruturas vamos aprender?

> Atenção! Os artigos escritos tendem a focar na galera que está começando a aprender sobre as estruturas de dados, nenhum ou pouco código complexo será utilizado (caso tenha tentarei deixar o mais explicado possível).

> Outro ponto é de que o conteúdo pode ser dinâmico, qualquer sugestão ou correção sintam-se a vontade para comentar!

Ao longo do tempo estarei escrevendo os artigos específicos para cada uma das estruturas abaixo, tentei manter de uma maneira em que o nível de complexidade seja crescente e que possamos utilizar conceitos reaproveitados de uma nas outras. 

1. [Pilhas (Stacks)](https://dev.to/pmba/entendendo-e-aplicando-pilhas-stacks-com-typescript-moa)
2. [Filas (Queues)](https://dev.to/pmba/entendendo-e-aplicando-filas-queues-com-typescript-32n2)
3. [Hash Maps](https://dev.to/pmba/estruturas-de-dados-entendendo-e-implementando-hash-maps-e-hash-sets-no-typescript-5fi6)
4. (Em Andamento) Hash Sets
5. (Em Andamento) Listas Encadeadas
6. (Em Andamento) Hash Tables
7. (Em Andamento) Árvores
8. (Em Andamento) Grafos
Desenho de implementação de pipeline
Tags: veracode, security, devops
Published: 2022-12-16 23:06:25

Qual é a melhor estratégia para implementar as soluções Veracode em um Pipeline? 

Acredito que como qualquer resposta dentro de TI, a resposta é um grande "depende". Mas nesse artigo vou compartilhar o design que normalmente proponho e que utilizo nos meus projetos. 

Inicialmente, vamos pensar no fluxo: 
- Início 
- Processo de build 
- [Empacotamento conforme o guia](https://help.veracode.com/r/c_comp_quickref) 
- Análise do código 
- Resultado da análise 
- Encerramento (com a quebra do pipeline ou não)

Para que esse processo de certo, é muito importante que o empacotamento seja feito da forma correta, por isso a recomendação de SEMPRE se atentar a esse processo. 

Na etapa da análise, é que começamos a fazer nossas escolhas. 
Aqui vamos pensar apenas nesse processo dentro de um pipeline e não exatamente no conceito de "shift left". 

A organização mais interessante, quando pensamos em performance é a combinação entre o Pipeline Scan e o Uploud and Scan (seja por Wrapper ou Plug-In). Com ela, conseguimos ter todas as vantagens do uso do U&S e com a velocidade do Pipeline Scan. 

Basicamente, o desenho que fazemos nesse caso é configurar o U&S para fazer apenas a etapa de Uploud e não aguardar, colocando em sequência a análise via Pipeline Scan e utilizar essa como definidor da estratégia de quebra. Mas qual o sentido disso? 

Por questões de design, o Pipeline Scan abre mão de algumas coisas para ter uma velocidade maior, por mais que a capacidade de análise seja a mesma. Então ao utilizarmos esse combo, vamos ter toda a capacidade do U&S, como criar Dashboards e integrações com BugTrackings, enquanto ganhamos velocidade e temos um retorno no terminal, com a análise completa.
How to use React with Perl/Mojolicious web frame work
Tags: perl, mojolicious, react, javascript
Published: 2022-12-16 23:05:00

How to use React with <a href="https://mojolicious.org/">Mojolicious</a> web frame work.

Let's added the following code into a template file `foo.html.ep` of Mojolicious after downloading React.

## HTML Body

```
<div id="like_button_container"></div>
```

## HTML Header

```
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

  <script src="like_button.js"></script>
```

## JavaScript

```
const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));
```

## See also

I use the codes of the following site.

https://ja.reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute

## For Beginners

Mojolicious is a Perl web frame work that support async I/O like node.js.
Python zip() function
Tags: python, zip, iterator
Published: 2022-12-16 22:57:37


Python zip function takes in iterables as arguments and creates an iterator.
A simple working example.

### list of columns
columns = ["id","name","age","city","country"]

### list of values
values = [111,"Mary John",35,"New York","USA"]

### create an iterator with the zip function that takes in columns, values as the input parameters
zipped = zip(columns, values)

type(zipped) returns the value as zip

### display the values
list(zipped)


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

### Empty zip declaration
zipped = zip()

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