teleren/devto huggingface dataset:
Does AI make coding obsolete?
Tags: webdev, ai, gpt3, decodingcoding
Published: 2021-10-11 23:41:54

---
title: Does AI make coding obsolete?
published: true
description: In a future where you can type words to build a website, do you still need to learn how to code?
tags: webdev, AI, GPT3, decodingcoding
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4ubvm2tewcmyl17u2um.jpg
---

The internet had been ablaze with demos of what [GPT-3](https://www.wired.co.uk/article/gpt-3-openai-examples) can do. GPT-3 by [OpenAI](https://openai.com/) is a natural language machine learning system trained from 45TB of text data, which allows it to generate sorts of content, all based on just a few input words.

### Typing words to build a website

In one particular demo, a GPT-3 integrated into Figma as a plugin can take a URL and a description as inputs, and mock up a website immediately. In the demo, the developer just typed in: “a website like stripe.com that is about a chat app”, and out came a website mockup on Figma looking like Stripe.com, but with a smartphone image showing a chat app, with relevant accompanying text. 

In another demo, I saw GPT-3 spitting out React code just based on vague descriptions of what the website that the developer wanted. The amazing thing is that it can interpret a relatively vague description and output something that more or less matches what you are asking.

**Just words to website.** 🤯

### No need to learn coding no more?

The possibilities are mind-blowing! Imagine, just typing out a few words, and voila, your website is up. A few more sentences, and boom! Your SaaS product is live. Even nocode tools can’t match up to this level of speed to launch. Of course, because it’s trained using books, articles, and other texts that humans wrote, it contains all our human biases too. But while that gets sorted out, I can’t help but feel that the reasons to learn to code to make your own products is getting more distant by the day. 

Sure, you still need programmers to make tools like GPT-3, but I’m not interested in making these world-changing things. My ambitions are smaller and simpler, and if GPT-3 can make them, so be it. I’m not beholden to coding as a craftsman who enjoys his craft would. My objective is only to make stuff that I’m interested in.

So... to learn to code, or not to code, that is the question.

And maybe in the future where there's a GPT-10, that becomes a non-question for most people...

---

Follow my daily writings on [Lifelog](https://golifelog.com/goals/30), where I write about learning to code, goals, productivity, indie hacking and tech for good.
Como a engenharia de software contribui para o desenvolvimento profissional de software?
Tags: algorithms, braziliandevs, software
Published: 2021-10-11 23:24:30

<p> A engenharia de software está presente em todas as etapas da criação de um software. Ela está presente em projetos de longa escala, não é necessário ser usada no desenvolvimento de projetos por hobbies. <b>A engenharia de software traz técnicas que que proporcionam bons atributos para o software desenvolvido, desde funcionalidades, desempenho, manutenções, documentação e etc</b>. Então, a engenharia de software deve auxiliar a ter uma boa qualidade não apenas no software em si, mas também no projeto como um todo. </p>
Hi, my name is TC.
Tags: devjournal, webdev, codenewbie
Published: 2021-10-11 23:05:25

#Introduction

I graduated from DevMountain coding bootcamp.

You can find me on Twitter as @codebrother_1 

I live in Dallas, Texas.

My skills are mostly in HTML, CSS, JavaScript, and React.

I am currently learning how to incorporate JavaScript with Shopify and WordPress.

Nice to meet you!
Sync and Async Made Simple!
Tags: javascript
Published: 2021-10-11 23:01:43


Let's say you go to a restaurant. Waiter comes in and takes your order. As he goes to the kitchen, he waits till your order is ready. Then he brings your food & goes to another table ( meanwhile other tables are waiting to the order). That's call #synchronous.

Waiter takes your order to tje kitchen but doesn’t wait till It's ready. He come back to take other customers order. And Once your food is complete.  He goes back & brings you the food. That's call #Asynchronous. 

#How does it works in programing?  

Simply put, If a task is fast like loading a UI. It will be execute #synchronously. 

And if it takes time, like downloading an image. It will be execute #asynchronously.
Vue3 + Quasar 2.1 + TypeScript Sample CRUD Application Project
Tags: discuss, vue, quasar, typescript
Published: 2021-10-11 22:34:07

Hi all,
I've been working on a Vue3 + Quasar 2.1 + TypeScript CRUD application.
I'm using [AWS SSM Parameters API](https://docs.aws.amazon.com/systems-manager/latest/APIReference/Welcome.html) to test the application and it is being served with [localstack](https://github.com/localstack/localstack) so I can test the application locally. In case it's not clear, AWS SSM Parameters (served by localstack) is my local "backend server".

To run the application and test it immediately, you need to have [Docker](https://docs.docker.com/get-docker/) and [Docker-Compose](https://docs.docker.com/compose/install/) installed - that's it.

Project link @ GitHub - https://github.com/unfor19/aws-webui

Sidenote- I'm not a frontend developer, so it was quite tough, but eventually, it was a great experience.

Feel free to ask any questions
Respond Faster with Saved Replies
Tags: github, opensource, hacktoberfest, programming
Published: 2021-10-11 22:31:50

Responding to issues and pull requests can feel as tedious and as time consuming as responding to emails, especially when your responsibilities include code reviews. 

To all my maintainers, this Hacktober, instead of debating which notifications you want to respond to, leverage saved replies. Saved replies allow you to create a reusable response to issues and pull requests. Because saved replies are connected to your account, you can utilize them in different repositories and organizations. 

### Watch this 30-second video tutorial below  ⬇️:
{% youtube U7EhKfAERN4 %}

### Create a Saved Reply

1. Navigate to a pull request or issue of your choice
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1m47q4j1mc4ing3tidf.png)
 
2. Scroll to the comment box and click the arrow to the far right
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74cimnkmmipc79ag22xv.png)

3. Press "Create a new saved reply"
![Screen Shot 2021-10-11 at 6.15.56 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gb75e6d9se63xtmr1o1u.png)
 
4. Fill in the title and "add saved reply" text fields
![Screen Shot 2021-10-11 at 6.18.11 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h0t4fpnnhodtjl10gzl.png)
 
5. Save your reply!
![Save reply button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74uhciduwv02b6e9ekgu.png)
 

### Use a Saved Reply

1. After creating a saved reply, navigate to an issue or pull request
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7egpe3m0ewhy77mhhc8t.png)
 
2. Scroll to the comment box and click the arrow to the far right
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74cimnkmmipc79ag22xv.png)

3. In the dropdown, you will see a list of your saved replies
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7avcxx97t8hnerb8x9s.png)
 
4. Select the saved reply you want to use; the reply will autofill in the comment box.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oli40hoecc233otsc0uk.png)

_Now, you've successful created and used a saved reply!_
Interactive Rust Tutorial: Why your first FizzBuzz implementation may not work
Tags: rust, tutorial, interactive
Published: 2021-10-11 22:01:26

https://codeamigo.dev/lessons/91

This interactive tutorial is an adaptation of Chris Morgan's blog post titled: Why your first FizzBuzz implementation may not work: an exploration into some initially surprising but great parts of Rust (though you still may not like them)
env-literal [node.js]
Published: 2021-10-11 21:45:46

This package iterates the variables of the process.env object, and parses them as if it were a literal javascript string, and injects them back into the same object

For example:

```shell
BASE_URL=http://localhost:3000
API=${BASE_URL}/api
```

In this case, the API variable will have the value http://localhost:3000/api

Unlike dotenv or dotenv-expand, variables are read directly from the system environment and not from an .env file

### Usage: as soon as possible, run the function:


```javascript
const envLiteral = require("@jarraga/env-literal");

if (process.env.NODE_ENV === "production") {
  envLiteral(); // call envLiteral(true) for debugging
}
```

[Link to NPM](https://www.npmjs.com/package/@jarraga/env-literal)
Run SQL Server in Docker container
Tags: docker, sql
Published: 2021-10-11 21:45:37

#SQL server
 - Sql Server is one of most populare relation database technologie devloped by Microsoft.
Its use to store and retrive, it used by applications that support transactional and analytical workloads.

# create image for Sql server :

First you must have Docker install in your machine if not check this link :[docker] (https://www.docker.com/get-started)

to run sql server create a file named *docker-compose.yml* in folder of your project 
```
version: "3.3"

services :
  sqldata:
    image: mcr.microsoft.com/mssql/server
    environment:
      - SA_PASSWORD=Pass@word
      - ACCEPT_EULA=Y
    ports:
      - "1433:1433"
```

To lunch our db, we can run commande from commande line :
`$ docker-compose up -d`
After docker pullin the image and service run you can check if the information about the image by this commande :
`$ docker ps`
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z18d1yfnmlqknbl32ige.png)

We can now acces to our container by passing to mode bash of our image :

`$ docker exec -it 'name_of_image' 'bash'`

After execute the image in mode bash you can connecte to database using sqlcmd :

`/opt/mssql-tools/bin/sqlcmd -U SA -P Pass@word `
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xdgu229gcl4sphfhly9.png)
5 Quick tips to make your HTML links more accessible
Tags: a11y, webaccessibility, beginners
Published: 2021-10-11 21:35:25

While the content of a web page remains the same, different users access it differently. The content should therefore be displayed and organized in such a way that there is not a lot of difference in how different users consume it.

I have been learning about web accessibility and here are some of the ways you can make your links more accessible.

## 1. Make them Focusable
By default, HTML links are focusable. This is especially useful for people who only use a keyboard to interact with a web page. It is important to know which item is currently in focus. The default focus style for Chrome is a faint blue border while for Mozilla is a dashed border. Developers have the liberty of changing these colors provided they are easily noticeable.

## 2. Add non-color indicators
Typically, we use a different color to define a link. However, when we consider colorblind users, this might not be the best distinguishing method to use. Instead, other indicators like underlined links can be used.
Non-color indicators mostly apply to links surrounded by blocks of text. Links in menus are more obvious due to their positioning and layout.


## 3. Use Relevant Link Texts
Consider this statement:
>Click [here](https://hashnode.com/@remigathoni) to get 10% OFF.

A screen reader user who doesn't want to read all the contents of your page and instead retrieves all the links will only have a link with the text 'here'. That doesn't mean anything.
It is important to provide proper link texts so as to preserve the meaning of those links when they are taken out of context
The above statement could be rewritten as:
>[Get 10% OFF](https://hashnode.com/@remigathoni).

Click here is unnecessary.
According to WebAIM, some other link phrases to avoid are:
- here
- more
- read more
- link to [some link destination]
- info

## 4. Use Optimal Link Sizes
While it is hard to determine the best link sizes, links especially those presented within their own block should not be too small or too large. Small links may make it difficult for users with motor skills disabilities to activate them while very large links may be activated by mistake.

## 5. Group adjacent links into one single link
Ever come across those images that are links with a title and a read more text that are also links? This is unnecessary if these links lead to the same destination. Instead, wrap the image and the text with one anchor tag to create a single large clickable area.

These 5 tips are just an overview of how you can make links more accessible.  

[Learn more at WebAIM's Links and Hypertext page](https://webaim.org/techniques/hypertext/link_text) 

I hope you learned something new today. Feel free to add more tips down in the comments.

Happy Coding :)
Create audio play with reactjs
Tags: node, react
Published: 2021-10-11 21:29:02


hello devs, i'm new to the community and i can't speak english. I hope the translation can be understood, I have a problem. I have an API on node and on the front end I'm using Reactjs. my api returns a static audio file, i want to know how i create an audio play from this file that the API gives me using reactjs. thank you if you want parts of the code and just ask. XD
A better way to website design
Tags: javascript, beginners, programming, tutorial
Published: 2021-10-11 21:27:26

# Design 

Use a design toool like Figma to actually know what the website will look like. Just by doing this , you'll know what to do even before creating the website. 

# Homepage

The thing on which you should spend the most time is the honepage. It's the core of your website and it's what makes clients stay on your webiste.


# Keep it simple

Be straightforward , Especially when it comes to a service, always try to be straightforward and tell what you do in the most concise way.

# Forms 

If we can buy stuff on your website, please don't make it complicated. Don't ask for useless questions if you do not need it. No one wants to buy something with complicatd forms.


# Picture 

Picture really ca be an excellent way to show your service and add some visual elements to your website to make your website look 
"alive"
Empleos en Data y Analytics LATAM — Oct. 2021 - II
Published: 2021-10-11 21:22:11

Te compartimos las ofertas laborales del mes para áreas de Data, Analytics y Cloud 👨‍💻👩‍💻.
✅[Data Scientist - PedidosYa (Argentina)]
(https://ar.indeed.com/Empleos-de-data-scientist?vjk=64749f074ee4a748)
✅[Data Scientist - IBM (Mexico)]
(https://mx.indeed.com/jobs?q=data%20scientist&l&vjk=1e72556ac74269b6)
✅[Data Analyst - Modern Talent Hub ES (Perú)]
(https://pe.indeed.com/jobs?q=data%20analyst&l&vjk=6cf0d8fb5adcaccf)
✅[Machine Learning Analyst - Genius Sports (Colombia)](https://co.indeed.com/jobs?q=machine%20learning&l&vjk=9fdeede78dbacd33)
✅[Data Engineer- Morris&Opazo (Chile)](https://cl.indeed.com/jobs?q=data%20engineer&l&vjk=2fd0da34700e99b0)

Aprende, aplica y crece en proyectos de Data y Analytics en Cloud.

Visita nuestra página:
👉🌐 datahack.la
What I love about being a Software Engineer?
Tags: programming, devlive, motivation, career
Published: 2021-10-11 21:13:32

I have been working as a software engineer for some time and I love this job. Here is a list of few things what I love about being a Software Engineer.

#Knowledge sharing
Nowhere else have I found a community where everyone is willing to help. In this industry, nobody loses from sharing knowledge with other people, but only gains. It is beautiful that wherever you turn to a forum or at work for help, there will be plenty of people to answer your questions and dispel any doubts. I also love sharing my knowledge and experience with others.

#The opportunity to learn about different areas of life
Working as a Software Engineer, you have contact with various areas of life. You will have the opportunity to work for a variety of industries. In my case, working as a developer, I was able to learn behind of scene of the insurance and automotive industries, as well as how the services responsible for public safety work.

#A lot of knowledge available for free
All programming knowledge is on the Internet. You don't have to buy books to learn to program. Many people share their experiences by writing articles for blogs, making videos for YouTube. Yes, there are paid sources of knowledge, but at the beginning of your adventure with programming you can find everything you are interested in for free, and dispel your doubts on various forums.

#Continuous development, a large selection of development paths
Being a Software Engineer, there is no such thing as ending learning. Every now and then there are new paths that need to be explored. And that's great! There is never boredom, there is a lot of development opportunities and there is a lot of demand everywhere. No one is able to grasp all the knowledge in all areas, so you need to choose your main goal and become an expert in it.

#Create "something out of nothing"
The last point for which I love being a Software Engineer is the feeling of being a "creator". With the editor open and empty files in front of you, after a while you fill them with code that creates a program which is used by users. It's amazing that with some text you are able to create a working application to help someone in life.


These were my thoughts, so what do you love about being Software Engineers?
Boilerplate Web Components Comparisons
Tags: webcomponents, boilerplate, javascript
Published: 2021-10-11 20:22:29

## Types of Web Component Frameworks
* Angular
* React
* StencilJS
* VueJS

## Similarities Between Each
Angular, React, StencilJS, and VueJS all have similar developmental tools which set the users up with similar directories. Additionally, they all include a index.html or file which does relatively the same thing. Another function which each has is that it provides the user with testing support / ability. Lastly, each provides a DOM [virtual or browser based] which will be specified below.

## Differences
As stated in the similarities, yes each has a DOM but Angular uses a browser's DOM rather than a virtual one. Another difference which relates to StencilJS is the fact that it utilizes TypeScript files. StencilJS is more of a toolchain rather than a framework since it helps a user to set things up. 

## Preference
Personally, I enjoy using React as it offers both the ability for testing and is also simple to use for beginners. Since this is the first time I have been exposed to boilerplates, I have found this one easiest to use. Another plus of using it is the fact that there is a team of developers who work on React so you can find more information about it.
Recommendations: Docking station for my triple monitor setup
Published: 2021-10-11 19:48:52

I have the following triple monitor setup:
Ultrawide:
https://www.amazon.in/LG-34-inch-86-7-Calibrated-Adjustable/dp/B097RVPVPM/ref=psdc_1375425031_t2_B08LLCPBQN

2 FHD:
https://www.amazon.in/Samsung-23-5-inch-Curved-Monitor/dp/B01GFPGHSM/ref=sr_1_3?dchild=1&keywords=samsung+curved&qid=1633980197&s=computers&sr=1-3

I want to be able to run all the three monitors in the max resolution possible, can someone suggest a good docking station for my setup?
I will be using this setup with my personal laptop: Lenovo Legion Y530 and my work laptop: Dell Latitude 5401 both of them have type-c ports.
ES7: JavaScript moderno
Tags: javascript, webdev, frontend, spanish
Published: 2021-10-11 19:43:42

#**Introducción**
Este blog ya cuenta con una [guía bastante completa de JavaScript con su estándar ES6](https://dev.to/duxtech/series/7498) y si bien esta mega actualización es la más famosa y utilizada por la comunidad no se debe olvidar que cada año se liberan nuevas características de nuestro lenguaje favorito; en este caso veremos ES7.

Esta especificación es la más breve de todas puesto que solo incluye 2 características nuevas que las veremos a detalle a continuación:

## **Nuevo array method: `includes()`**
Hasta antes de ES7, el método `includes` está disponible para ser usado solo con strings. Ahora podemos usarlo también en arreglos sin ningún problema.

El nombre del método es bastante descriptivo, básicamente sirve para verificar si un elemento pertenece a dicho arreglo o no.

* Este método es sensible a mayúsculas y minúsculas.
* Regresa siempre un booleano.

Por ejemplo:

```js
const nombres= ["carlos", "juan","pedro"];
const salida = nombres.includes("Carlos");
console.log(salida); // false
```
> Regresa `false` por que "Carlos" es diferente que "carlos".

```js
const numeros= [25,96,20,78,10,0];
const salida = numeros.includes(78);
console.log(salida); // true
```
> Regresa `true` porqué 78 si está incluido en el arreglo.

`includes` también puede ser usado para hacer una condición:

```js

let x= "b";
if(x==="a" || x==="b" || x==="c" || ) { // pasa la condición si x=a, o x=b o x=c
  console.log("x es: a, b o c");
}
//salida: "x es: a, b o c"

//Manera resumida:
if(["a","b","c"].includes(x)){
  console.log("x es: a, b o c | Use includes");
}
//salida:"x es: a, b o c | Use includes"

```
Para un poco mas de info de dejo un post mio donde se habla más a fondo de `includes`

{% link https://dev.to/duxtech/las-bondades-del-metodo-includes-en-javascript-o1i %}

## **Nueva sintaxis para Potenciación de números**
Antes la forma tradicional de elevar una base a una potencia era la siguiente:

```js
const base = 10;
const exponente = 3;
const salida = Math.pow(base, exponente);
console.log(salida) // 1000
```

Ahora, ES7 no brinda la siguiente sintaxis del doble asterisco muy conocida en Python

```js
const base = 10;
const exponente = 3;
const salida = base ** exponente
console.log(salida) // 1000
```

## **Referencias**
* https://fullstackseries.com/es7-novedades/


## **Conclusión**
* ES7 solo tiene estas 2 nuevas funcionalidades
* Usa `includes` en tus arreglos cuando lo necesites
* Usa la sintaxis `**` para potenciación de números.
Just sent the first issue (daily challenge) of my newsletter to 50 subscribers!
Tags: growth, marketing, challenge, discuss
Published: 2021-10-11 19:05:47

Hey guys, I just sent the first issue of my newsletter, indiegrow. It went out to 50 subscribers who are trying to grow and stay active on Twitter. What my newsletter does is sending them conversations folks in startup space can comment on to stay active on Twitter. If you want to check out the newsletter, it is [here](https://indiegrow.substack.com/). This newsletter is daily, and I really enjoy finding good conversations for folks, so I am pretty stoked : )

I launched this newsletter a little more than a week ago and it's the second newsletter project I am starting. The first one grew a lot slower at the beginning, so I am pretty happy with the growth right now for indiegrow! I hope I can keep this up.
Collapsable content in Markdown with <details>
Tags: markdown, webdev
Published: 2021-10-11 19:35:19

**Pro Tip**: The HTML disclosure summary element (`<details>`) works with markdown so you can create collapsable sections in your READMEs like so:

```markdown
<!-- README.md -->
<details>
  <summary><b>See 7 Available Translations</b></summary>
  <p>
  
  - [🇩🇪 Deutsch](./de-DE/README.md)
  - [🇪🇸 Español](./es-ES/README-ES.md)
  - [🇫🇷 Français](./fr-FR/README_fr-FR.md)
  - [🇮🇩 Indonesia](./id-ID/README.md)
  - [🇳🇱 Nederlands](./nl-NL/README.md)
  - [🇧🇷 Português Brasil](./pt-BR/README_pt_BR.md)
  - [🇹🇷 Türkçe](./tr-TR/README-tr_TR.md)
  </p>
</details>
```

**Rendered output**:
<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1633930714/JS%20Bits/markdown_details_lfpp5j.gif">

If your documentation includes huge blocks of code or has many sections, using `<details>` can be a great way to preserve readability! 📖

----------
<b>Yo!</b> I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on [TikTok](https://www.tiktok.com/@js_bits), [Twitter](https://twitter.com/JS_Bits_Bill) and I have a new [debugging course](https://jsbits-yo.com/bug-bash/) dropping soon!