teleren/devto huggingface dataset:
Introducing Serverless DNA - A New Site dedicated to Serverless!
Tags: serverless, aws, architecture, webdev
Published: 2023-01-29 01:13:29

One thing I have learned over the past year while writing blog articles on Serverless to help people learn is that it is not straightforward, and the skills you need are more than just writing software or deploying infrastructure.  You need to understand a broad range of topics to design and build solutions with Serverless successfully.  This makes blog articles that go deep really long and difficult to read and understand because there is so much to cover!

To be successful with Serverless, you need to have some understanding of the following:

- Infrastructure as Code
- Security
- Event Driven Architectures
- Available Managed Services
- Code Frameworks
- Software Engineering
- and the List goes on ... !

So I have created a new blog site for all my future writing based around smaller, focused articles that are interlinked and weave together to create a complete picture of each topic.  The articles are organised into focused groups and will be linked so people can browse through each topic and learn information in smaller doses which will be easier to read, understand and share.

## What is Serverless DNA?

The "DNA" stands for "Digital Native Architecture", which is how I see Serverless  fitting into the broad world of cloud technology. 

![Serverless Digital Native Architecture (DNA) Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9517se1x8dedce5fni4q.png)

Serverless DNA takes the form of Small Blog articles, "Mini-blogs" to create knowledge about a specific Strand of Serverless Technology.  Each Strand of knowledge may be linked to one or more other Strands which are related and should also be looked at to help expand and grow your knowledge of Serverless.

This first release on serverlessdna.com is the MVP of the DNA concept for Serverless knowledge - I want to grow this into more than just my blog site but also enable it as a community resource linking in content from around the globe from other contributors to help categories, link and collate the body of Serverless knowledge out there today.  Find out more by browsing the [About Strand](https://serverlessdna.com/strands/about) - which is where I will be sharing the public roadmap for future development.

I hope you find this new site useful and I really look forward to your thoughts and comments on this new beginning for my writing in 2023.
nVidia 525 + Cuda 11.8 + Python 3.10 + pyTorch GPU Docker image
Tags: ai, python, cuda, nvidia
Published: 2023-01-29 00:30:10

It is a base environment for `torch` with GPU support (including 3090Ti!) that can be used for working with AI models. This image requires `nvidia-driver-525` and `nvidia-docker2` installed on host. It needs 30GB on disk!

## Dockerfile

```Dockerfile
FROM nvidia/cuda:11.8.0-devel-ubuntu22.04

ENV PYTHONUNBUFFERED=1 

# SYSTEM
RUN apt-get update --yes --quiet && DEBIAN_FRONTEND=noninteractive apt-get install --yes --quiet --no-install-recommends \
    software-properties-common \
    build-essential apt-utils \
    wget curl vim git ca-certificates kmod \
    nvidia-driver-525 \
 && rm -rf /var/lib/apt/lists/*

# PYTHON 3.10
RUN add-apt-repository --yes ppa:deadsnakes/ppa && apt-get update --yes --quiet
RUN DEBIAN_FRONTEND=noninteractive apt-get install --yes --quiet --no-install-recommends \
    python3.10 \
    python3.10-dev \
    python3.10-distutils \
    python3.10-lib2to3 \
    python3.10-gdbm \
    python3.10-tk \
    pip

RUN update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.10 999 \
    && update-alternatives --config python3 && ln -s /usr/bin/python3 /usr/bin/python

RUN pip install --upgrade pip

# ANACONDA
RUN wget -O /tmp/anaconda.sh https://repo.anaconda.com/archive/Anaconda3-2022.10-Linux-x86_64.sh \
    && bash /tmp/anaconda.sh -b -p /anaconda \
    && eval "$(/anaconda/bin/conda shell.bash hook)" \
    && conda init \
    && conda update -n base -c defaults conda \
    && conda create --name env \
    && conda activate env \
    && conda install -y pytorch torchvision torchaudio pytorch-cuda=11.8 -c pytorch-nightly -c nvidia
```
## Build
```bash
$ docker build -t nvidia-cuda .
```
## Run
```bash
$ docker run --gpus all -it nvidia-cuda
```
## Test
Run inside container:
```bash
$ conda activate env
$ python
```
```python
>>> include torch
>>> torch.cuda.is_available() 
```
React useState explored
Published: 2023-01-28 23:40:03

Programming can be a challenging and isolating experience, especially for beginners who are just starting out or struggling to improve. It's easy to fall into a self-doubt mode and question whether you are cut out for this field. But, just like anything worth doing, it takes time, effort, and patience.

One way to combat these struggles is by connecting with others in the programming community. Online communities like [DEV](https://dev.to/) provide a space for programmers to share their work, ask for feedback and support, and gain the encouragement they need to stay motivated and continue learning.

Speaking of learning, let's take a look at an example of a function component in React that renders a list of names using the `useState` hook. It has an `array` of initial names called `list` and a `state` variable `name` that is used to add new names to the list. The component also has an `input` field and a `button` that when clicked, calls the `addName` function which adds the `name` in the input field to the list and clears the input field. The names are rendered in an unordered list and each item in the list has a unique `key`. This took me a long time to understand it and reproduce without references.

Remember, everyone starts somewhere and the journey to becoming a better programmer is not a straight path. It's full of ups and downs, but it's through these struggles that we grow and learn. So, don't give up, keep pushing through the hard times, and know that you are not alone. There's a community out there that understands your struggles and is here to support you every step of the way.

{% embed https://codesandbox.io/embed/todo-list-with-plain-javascript-lxywxu?fontsize=14&hidenavigation=1&theme=dark %}
From Pumping Iron to Punching Keys: My Hilarious Journey as a Junior Web Developer and New Dad
Tags: beginners, webdev, careerchange, nevertolate
Published: 2023-01-28 23:26:28

Hello, my name is Marco and I'm a Junior Web Developer. But let me tell you a little bit about my journey to get here.

It all started back when I was a fitness trainer. I had to give that up due to some health issues, but little did I know it was the best thing that could have happened to me. I stumbled upon the world of web development and I was hooked. I completed my training and in 2019, I decided to specialize in web development. I learned all about HTML, CSS, JavaScript and React.

Fast forward to 2020, I successfully completed my specialization and was excited to start my career as a Junior Developer. But then, the world was hit with a little thing called COVID-19 and finding a job as a Junior Developer was next to impossible. But after a year of searching, I finally landed my dream job and I've been here for a year now.

In my first year, I learned what it really means to be a web developer. I was part of a team and we analyzed the current trends in the framework market and found that Vue.js is one of the rising stars, and it turns out I'm pretty good at it, so I decided to learn Vue.js too.

Now, in 2023, I can confidently say that I have experience in HTML, CSS/SCSS, JavaScript, React, and Vue.js. I'm currently working on a project using stencil.js and I'm excited to add this to my list of frameworks that I have experience in.

Oh, and by the way, during my specialization, I also became a dad to a beautiful daughter and I'm already 36 years old. It's never too late to start something new if you really want it.

As a side note, I am also working as IT Consultant.

So, there you have it, my journey from fitness trainer to Junior Web Developer and IT Consultant. Who knows what the future holds, but I'm excited to see what's next. I hope you enjoy my blog posts, because let's be real, it's not every day you get to read about the adventures of a dad-developer.
Typescript + tailwind = typewind (first impressions)
Tags: tailwindcss, typescript, typewind
Published: 2023-01-28 23:05:43


{% twitter 1617880004846825474 %}

> This article is about my first impressions with the library, if you're looking to getting started typewind, read https://livecode247.com/typewind-the-magic-of-tailwind-combined-with-the-safety-of-typescript

I decided to try out this promising library by implementing it on their own website! I believe judging a tech without trying it can lead to huge misconceptions (just like everybody hated tailwind until they tried it). After finishing the refactoring I had some thoughts worth sharing it:

### Pros
- It embeds pretty much every tailwind positive point and at some important ones like productivity, it seems to come even better. The ability to just keep typing what utilities you want - dot after dot - seems ever smoother than tailwind classes.


- Multiple utilities for the same variants (this feels good). Tailwind doesn't support this for [very understandable reasons](https://github.com/tailwindlabs/tailwindcss/discussions/8337#discussioncomment-4036320), but with typewind this is completely functional. See a comparison below

```html
// tailwind
className="focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-100"

// typewind
className={tw.focus(tw.outline_none.ring_2.ring_slate_400.ring_offset_2.ring_offset_slate_100)}
```


- It actually will catch some mistakes that any tailwind plugin wouldn't be able to. By converting their website, I frequently got type errors because they were actually using nonexistent utilities (bg-black-500, offset-slate-50). This is important because it will ensure we're not messing up our styles. It's easy to not see a minor tweak like a light border not being applied. 


### Cons
- On the same way that it increases tailwind positive points, it also worsen the negative ones. Readability is even poorer than the inline utilities because there's no space between each utility. Prettier also seems to make it worse by not "inlining" them:

```html
<p
  className={
tw.text_xl.font_medium.text_gray_400.md(tw.text_xl).mx_auto.max_w_full.w_[
      "880px"
    ].text_center.px_4
  }
></p>;
```

- (At the time of writing) it lack of support for relevant features, like [color opacity](https://github.com/Mokshit06/typewind/issues/11) and the [important modifier](https://github.com/Mokshit06/typewind/issues/13)

- A little bit unfair to say, since the library didn't reach a major release, but is not tested, prone to bugs and very probable that lacks support for a lot of features (we didn't try yet to discover). 


### Conclusion

Typewind has a lot of potential and I believe it will be successful if they figure out how to keep the advantages of Tailwind while minimizing the limitations of their approach (which use objects and properties instead of strings).

The crucial positive point for using this library in the future will be type safety. As I said on the pros, it's actually more common than we think to have nonexistent utilities being applied.

What is your opinion about it? Thanks for reading and see you next time :)
Consultando ajuda para os comandos no terminal
Tags: linux, shellscript, bash
Published: 2023-01-28 20:51:26

Há um mito de que alguns usuários evitam adotar o **Linux** como sistema operacional padrão devido o medo de usar o terminal.

Obviamente o desconhecido causa medo, mas para que a exeriência de exploração e descoberta dos recursos do Linux seja positiva, é possível consultar manuais do que cada comando faz e qual a sintaxe correta com cada opção possível.

A ajuda pode ser obtida no próprio terminal através de uma dessas duas linhas de comando:

O comando man para exibir um manual

`$ man <comando>`

O atributo help ao fim da linha para ter mais inforomamções sobre o comando desejado

`$ <comando> --help`

Dependendo da distro possa ser que usando --help você encontre a ajuda totalmente traduzida em português, mas em geral os manuais estão em inglês.
Creating a window in opengl
Published: 2023-01-28 09:10:19

**step 1**
Install opengl on your device. I am using [ubuntu](ubuntu.com) but you can use any os. I installed opengl from [here.](https://medium.com/geekculture/a-beginners-guide-to-setup-opengl-in-linux-debian-2bfe02ccd1e)

**step 2**
Creating a window is the hardest thing i could find tutorials on. All of them were outdated or used a weird extra library that slowed your computer down.
however this is the working method:

```cpp
#include<GL/freeglut.h>

//Program to create an empty Widdow
void init(){
	glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);	//Line C
	glutInitWindowSize(640,480);
	glutInitWindowPosition(1000,200);
	glutCreateWindow("Simple Window");
}

void display()
{
	glClearColor(1.0,1.0,1.0,0.0);
	glClear(GL_COLOR_BUFFER_BIT);
	// gluOrtho2D(0.0,100.0,0,100.0);
	glFlush();
}

int main(int argc,char **argv)
{
	glutInit(&argc,argv);			//Line A
	init();					//Line B
	glutDisplayFunc(display);
	glutMainLoop();
	
	return 0;
}
```



**step 3**
compiling is weird for c++. You would just think it would include the library for you, but NO. You have to specify them.

here's what worked for me:

```bash
g++ main.cpp -o main -lGLU -lglut -lGL
```




**step 4**
enjoy and code until your heart is content.









made by dwarfŧ. :)
Javascript (JS) Pass by Reference and Pass by Value
Tags: chatgpt, javascript, webdev, programming
Published: 2023-01-28 20:28:35

## Terms
Passing: To assign a value to a variable or, pass it to function as a parameter.

## Pass by Value
Anytime a variable containing another value which is not an object or an array is passed along to let's say a function as a parameter, the variable being passed becomes a copy of the value it holds. As a result, the variable passed to the function will have its value unchanged despite whatever the function does with it, for example, reassign’s it or updates it.

```javascript
let x = 60 
console.log (x) // 60

function boo (y){
	y = 70 
	console.log (y) // 70
}

foo(x) 
console.log (x) // 60 : unchanged value of the x variable
```

## Pass by Reference
Anytime a variable containing another value which is an object or array is passed along to let say a function as a parameter, the variable is passed to the parameter as a ref to its object/array value. As a result, the variable passed to the function will have its value changed if for example it is updated with a new element of the key/value pair.

```javascript
let x = {
	name:"john",
	age:22
} 
console.log (x) // {name:"john",age:22} 

function boo (y){
	y.statue = true
	console.log (y) // {name:"john",age:22, status:true} 
}

foo(x)
console.log (x) // {name:"john",age:22, status:true} 
```
Fundamentos de TDD
Tags: tdd, javascript, typescript, beginners
Published: 2023-01-28 20:00:00

Testes automatizados são a única forma que temos de garantir que um código realmente funciona. Eles nos permitem adotar um processo de desenvolvimento sustentável que ao longo do tempo não venha se tornar caótico. Teste te dão a coragem de refatorar quando for necessário, na verdade, adicionar uma suite de testes significativas deve ser o primeiro passo de uma refatoração. Muitas vezes o design e a tecnologia escolhidas para o projeto dificultam a introdução de testes automatizados, por isso nem sempre é possível utilizá-los, ainda que esse seja o cenário ideal de desenvolvimento ágil de software.

## O que é um teste automatizado?

Um teste automatizado é nada além da execução automatizada de um trecho de código especifico que compara as entradas com a saida (retorno) e verifica se a mesma está de acordo com o que se era esperado.

> Dado um conjunto de entradas, quando algo acontecer a saida deve cumprir as expectativas.

Na natureza do TDD temos três fases distintas:

- given/arrange: Onde se definem todas as informações necessárias para executar o comportamento que será testado;
- when/act: execução do comportamento testado
- then/assert: verificação da execução, comparando os retornos com expectativas.

### Exemplo

Deve ser feito um pedido com três itens:

**Dado** um novo pedido com 3 itens associados, um livro de R$ 50, um CD de R$ 20, e um DVD de R$ 30.

**Quando** o pedido for realizado

**Então** deve ser retornado uma confirmação do pedido contendo o valor total do mesmo e status aguardando pagamento.

### Como funciona um TDD?

TDD não é um método de teste, mas sim uma metodologia de construção de um código fonte em pequenas etapas, onde os testes são escritos antes do código final. Dentro de um determinado ciclo.

![TDD Cycle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbhjxcrreztqvoy861tl.png)

### As três leis do TDD

1. Você não pode escrever nenhum código até ter escrito um teste que detecte uma possível falha.
2. Você não pode escrever mais testes do que o suficiente para detectar uma falha
3. Você não pode escrever mais testes o suficiente para atender os requisitos de sucesso

São basicamente esses três pontos que permitem você entender o TDD:

- Escreva código de testes antes do código de produção
- Escreva um código de produção para atender os requisitos do teste
- Escreva um código de teste que faz o cenário atual de código de produção falhar (triângulação)
Why Socket.io is better than Web Socket
Tags: node, webdev, javascript, websocket
Published: 2023-01-28 18:36:47

WebSocket is a** protocol** and Socket.IO is a** library** that uses the **WebSocket protocol** and provides additional functionality on top of it. So if you don't need any of the additional functionality provided by Socket.IO, it may be more appropriate to use plain WebSockets in your application.
well i will prefer to use socket.io  when i need to :

1. **Automatic reconnection**:
 Socket.IO automatically reconnect to the server if the connection is lost, which is very important  for maintaining a stable connection in unreliable network environments but with web socket you need to build this  mecanisme by yourself

2. **Rooms**: Socket.IO provides a way to organize connections into different  "rooms", which can be useful for building more complex, multi-user applications.

3. **Blockers**( Proxy ,firewall ,load balancer, antivirus): Socket.io connect automatically with the server even with blockers  but with web socket you need to write many line of code  to deal with  the firewall,the antivirus, the proxy and the load balancer 

4. **Binary support**: Socket.IO supports binary data in addition to text data but web socket can't handle binary data .

5. **Cross-domain support**: Socket.IO allows you to connect to a server from a different domain, which can be useful for building cross-domain applications but with web socket you need to use a reverse proxy , CORS headers

6. **Fallbacks for older browsers**: Socket.IO includes fallbacks for older browsers that do not support WebSockets, such as long polling and JSONP polling, which allows you to support a wider range of clients.
Json vs Object in JavaScript🤔
Tags: webdev, javascript, programming, react
Published: 2023-01-28 18:35:54

1. In object in JavaScript is a collection of key-value pairs, where the keys are strings and the values can be of any type. but In JSON keys must be strings and values can only be strings, numbers, booleans, null, arrays, or other JSON objects.

2. JSON and objects in JavaScript are similar in terms of the syntax and structure, but JSON is primarily used for data interchange, while objects are used as a data structure within JavaScript.

3. While objects and JSON are similar in syntax, JSON is often used for data interchange between different systems or programming languages, whereas objects are used as a data structure within JavaScript. JSON.stringify() function is used to convert a JavaScript object to a JSON string, and JSON.parse() function is used to convert a JSON string to a JavaScript object.
C++ dasturlash tili (1-dars)
Tags: cpp, beginners, programming, uzbek
Published: 2023-01-28 18:35:54


C++ dasturlash tili mashhur tillardan biri bo'lib,bu til har xil dasturlar,o'yinlar va boshqa tehnologiyalarda ishlatilinadi...
Bugun biz **replit.com** saytidan foydalangan holda _C++_ dasturlash tiliga oid bir necha malumotlarni ko'rib chiqamiz.
**My repls** qatoridan yangi **repls** _c++_ tilida yaratganimizdan so'ng bizda mana bunday oyna ochiladi.(Keyingi rasm)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61xzla2d6v11gd83oncm.jpeg)

Ko'rib turganingizdek ekranda mana shu oyna ochildi va bu oyna uch qismga bo'lingan.
Birinchi chap tarafdagi joy bu fayllar saqlash uchun.
Ikkinchi o'rta tarafdagi joy bu biz _code_ yozishimiz uchun maydon.
Uchinchi ohirgi tarafdaigisi **console** yani bu joy yozgan kodimizni natijasini ko'rsatib beradi.(Keyingi rasm)

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

[](url)# Biz bu yerda har xil so'zlarni va belgilarni uchratishimiz mumkin.Masalan:

`#include` - Bu buyruq  bilan biz kutubhonalar chaqirgan(kutubhonalardan foydalangan)holda ularni ishlata olamiz.
`<iostream>` - bu kutubhona turi.
`int main(){}`- bu funksiya yozayotgan dasturimizning o'zagi yani asosiy qismi hisoblanadi, bu funksiyasiz yozayotgan birorta kodimiz ishlamaydi
`std ::`- bu buyruq qaysi kutubhonaga tegishli ekanini bildirish uchun  _cout _buyrug'i oldidan yoziladi.
`cout <<`- bu yani  _console out_ to'liq yozilishi hisoblanib bu buyruq har qanday yozgan ko'dingizni _console_ da ko'rsatib beradi.