teleren/devto huggingface dataset:
PostgreSQL to DuckDB - There and Quack Again
Tags: postgres, duckdb, dataengineering, analytics
Published: 2022-10-23 14:12:14

Edit - 
I'm using this platform to primarily talk about things related to my day job, but this particular post isn't as closely tied to it as the other posts I've made, so I moved it to a new substack:
https://affordabledata.substack.com/p/postgresql-to-duckdb
An AI powered plugin that renames Figma layers.
Tags: javascript, typescript, ai, design
Published: 2022-10-23 13:55:28


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

Hi there!

New experiment done last week: A little Figma [plugin](https://www.autoname.org/) that renames layers automatically thanks to artificial intelligence.

The plugin itself was built on top of Svelte for the UI & Teachable Machine for the classification part.

You can contribute to the [code](https://github.com/Hugo-Dz/figma_autoname_client_app) as it's an Open Source project :)

Sponsor the project [here](https://github.com/sponsors/Hugo-Dz) and get your name in the source code :)

Feel free to drop me a line: duprez.hugo@gmail.com
In One Minute : Amazon S3
Tags: aws, beginners, programming, oneminute
Published: 2022-10-23 13:48:45

Amazon Simple Storage Service is a service offered by Amazon Web Services that provides object storage through a web service interface.
{% embed https://youtu.be/aS_R0OHxHkY %}
Amazon S3 uses the same scalable storage infrastructure that Amazon.com uses to run its e-commerce network.
Amazon S3 can store any type of object, which allows uses like storage for Internet applications, backups, disaster recovery, data archives, data lakes for analytics, and hybrid cloud storage.

AWS launched Amazon S3 in the United States on March 14, 2006, then in Europe in November 2007.

The basic storage units of Amazon S3 are objects which are organized into buckets. 
Each object is identified by a unique, user-assigned key.
Buckets can be managed using the console provided by Amazon S3, programmatically with the AWS SDK, or the REST application programming interface.

An object in S3 can be between 1 byte and 5TB. If an object is larger than 5TB, it must be divided into chunks prior to uploading.
When uploading, Amazon S3 allows a maximum of 5GB in a single upload operation; hence, objects larger than 5GB must be uploaded via the S3 multipart upload API.

Official website :- http://aws.amazon.com/s3/
How to ask for software development help on the internet
Published: 2022-10-23 13:48:24

All too often, I see that there are tons of people who post comments like this:

![Example question on Reddit r/reactnative](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0l18mc43kixex0i5m80.png)

## What is wrong with this?

I mean no offense to this wonderful user, but there is nothing here that I can start helping out with. It is important to have a list of the steps you have taken to get to the point of this error in a detailed way. Often in software development, the order that commands are run can have a great impact on how the end result turns out. I don't know anything about the environment they are using other than they are using windows 11. There are so many softwares you can install that can mess up your local environment, that it is almost impossible to guess past just "windows 11"

For example:

```console
$ run command abc
$ run command xyz

# Exit code 0 - success!
```

vs.

```console
$ run command xyz
$ run command abc

# ERROR when running commands!
```

the two examples have a very different output. Let's look at the theoretical documentation for this set of commands:

```console
# run command abc
Enables you to set up your workspace.

# run command xyz
Starts the application in your workspace. Depends on abc
```

What do you notice?

### 1. A better understanding of the commands by the developer could have avoided this problem

Developers need documentation to understand how to use the tools they posses. No one writes any public software without at least making a small attempt at conveying how to use it! If no one can understand your software, it will not be used.

Many software packages like [React Native](https://reactnative.dev/docs/getting-started) have excellent guides to getting started. Double and triple checking

### 2. This error could have been found with a google search

In big enough softwares, you are usually not the first person to come up with an issue. Searching the error message on google can usually be a great way to get started. Our friend here had this error:

### 3. Read the error message first

```console
error Failed to install the app. Make sure you have the Android development environment set up:
https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug-PreactNativeDevServerPort=8081
```

First of all, React Native (and most softwares) knows what they need to run. It cannot run without certain parts of the environment set up. The error even *gives a direct link to what you need to do to fix this issue*.

## Final thoughts

I believe the vast majority of people are only asking questions and not answering any questions. I challenge you to try and answer a question on any GitHub repo or subreddit you like! Answering questions can give you a better perspective and help teach you how to write your own questions!

Check out my [website](https://www.robertjcolley.com)! Talk to me on social media!
Como consutar um especialista!
Published: 2022-10-23 13:39:48

Em muitos momento a gente precisa conversar com alguém que é especialista num determinado assunto. 

Na maioria das vezes a gente ainda não sabe exatamente o que perguntar então vou deixar meus 2 centavos aqui:

1. Tente ser o mais específico possível na sua questão.

2. Você está pedindo um favor, não quer dizer que o outro tenha alguma obrigação em te atender, então seja educado e o mais polido que puder.

3. Antes de enviar a pergunta, leia atentamente e veja se já não consegue a resposta, acredite já aconteceu que após eu enviar uma pergunta logo depois eu já sabia a resposta, é um sentimento chato.

4. Eu prefiro perguntar privadamente pois assim o constrangimento pode ser apenas meu e não da pessoa, normalmente respeito a não resposta. Pense muito antes de perguntar publicamente.

5. Agradeça qualquer resposta, ajudando ou não no seu desafio, pois o esperado é que a pessoa tenha se dedicado para atender ao seu pedido, então seja educado.
02.08 React State - font color from input (functional components)
Tags: javascript, react, tutorial, webdev
Published: 2022-10-23 13:02:18

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwdhs9wen8fv8wxc0fvl.gif)

Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mz9cy3vxilrlftvi84y.png)



<hr/>

```react
import React, { useState } from "react";
import "./App.css"

function App(){
  const [color, setColor] = useState('darkBlue');

  return (
    <div className="app" style={{color: color}}>
      <h1>Hello World!</h1>
      <input 
        type="input" 
        onChange={ (event) => {
          console.log(event.target.value)
          setColor(event.target.value);
        }} 
      />
    </div>
  );
}

export default App;
```
<hr/>
```css
.app{
    background-color: lightskyblue;
    padding: 20px 10px;
}
```
02.07 React State - font color from input (class components)
Tags: javascript, react, tutorial, webdev
Published: 2022-10-23 13:01:43

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pztf0rcopqwbavintmkt.gif)


Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k156h7qedbr58v62yai0.png)


<hr/>

```react
import React from "react";
import "./App.css"

class App extends React.Component{
  state = {
    color: 'darkBlue'
  };

  handleColorChange(event){
    console.log(event.target.value);
    this.setState({color: event.target.value})
  }

  render() {
    return (
      <div className="app" style={{color: this.state.color}}>
        <h1>Hello World!</h1>
        <input type="input" onChange={(event)=>this.handleColorChange(event)}></input>
      </div>
    )
  }
}

export default App;
```
<hr/>
```css
.app{
    background-color: lightskyblue;
    padding: 20px 10px;
}
```
API and Web services
Tags: web
Published: 2022-10-23 12:58:28

In this article we will talk about 

- API and web services 
- HTTP 
- SOAP and REST

# API 
  - API (application program interface) So what is that mean ? 
  - In a very sample words an API exist when you (as a user) tell 
     a program (that you don't own) to run

# Web Services 
  - web means the internet and services means API SO webservices 
     is An API that use the internet

`So all webservice is an API but not all APIs is a webservices
there are some APIs that doesn't use the internet`

## Each API or Web Services consist of 
   - Request 
   - A program to run 
   - Response 

# HTTP
 - HTTP (Hypertext transfer protocol) 
 - HTTP is a protocol (a set of rules) that the web services use 
    to send the request or get the response 
 
## HTTP consist of 4 parts 
  1- Start Line 
  2- Header Lines 
  3- Blank Line 
  4- Body 

### start Line 

- For the request it contains 
       (HTTP version, methods, parameters, ...)

- For the response it contains 
       (HTTP version, Status code )

### Header Lines 
  

- For the request it contain a Lot of things you can check them 
      from [here] 
      (https://en.wikipedia.org/wiki/List_of_HTTP_header_fields)
      such as the hostname or tokens
- For the response it contains cookies 

### Blank Line     
    
- It contains nothing for requests and response it's just 
     separate the header lines from the body 

### Body 

- For the request the body depend on what method you're using if  
      you use GET method you don't add body you just get 
      information but if you use method like POST you add the data 
      you want to add 

- For the body you will get what you request either it is a HTML 
      web page or something else
    
# SOAP and REST 

- Let's agree that SOAP and REST are just a way to format the 
     HTTP request and HTTP response 
    SO what is the difference between both of them ?

## SOAP 
- SOAP (simple object access control)
    In a very simple words it's a way to form http request / 
    reponse by following rules in XML
    it uses the rules of WSDL

- The methods in SOAP is always POST .. it doesn't mean that the 
    request is always adding data but because the method is not 
    used it's just a placeholder

## REST 

- REST (Representational state transfer)

- NO rule like SOAP

- The difference between rest and soap is the rest use the 
   methods in the start line
   and with REST you can use any different kind of data either 
   (JSON, XML, images, ...) but with SOAP you can only use XML
Difference between State & Props
Tags: javascript, programming, tutorial, react
Published: 2022-10-23 12:20:59

_Have you ever wondered how we can use the data of one component in other components in React JS?_ To use the data of the parent component in its child component we use props and to store data we use state in the parent component.

In this article, we will learn the difference between state and props with some examples.

&nbsp;
## State

React State is used to store data in your top-level component i.e. parent component. It is a local data storage that is local to the component only. The State is mutable which means it can be modified and Each component can have its state. The state is both read and write.

The State can not be accessed and modified outside of the component. You can think of state as local variables in a function that are not accessed outside the function block. For example,

```react
import React from "react";

class Colors extends React.Component {
 state = {
   code: "#323232"
 };

 render() {
   return <h2>Color Code: {this.state.code}</h2>;
 }
}
export default Colors;

// Output: Color Code: #323232 
```

&nbsp;
## Props

React Props also known as properties, are used to pass data down to the child components from top level components (parent components). Props are immutable which means that it cannot be modified and are read-only.

Child components receive data from their parent components in the form of props. You can think of props as function parameters. For example

```react
import React from "react";

// creating Colors functional component
const Colors = (props) => {
 return <h2>Color Code: {props.code}</h2>;
};

class App extends React.Component {
 state = {
   code: "#323232"
 };
 render() {
   // passing state as a prop to Colors component
   return <Colors code={this.state.code} />;
 }
}
export default App;

// Output: Color Code: #323232
```

&nbsp;
## Wrapping up!

- State is a local storage for the component which cannot be accessed outside of the component.
-  Props are used to pass data down to the child components from parent components.

That's all for this article, thanks for reading. Catch you later.

💻 Happy Coding

---

{% user moazamdev %}
Holy Grail Flexbox Layout 🎃
Tags: css, design, webdev
Published: 2022-10-23 12:07:19

[The Holy Grail Layout](https://en.wikipedia.org/wiki/Holy_grail_(web_design)) is a well-known CSS issue that has had a number of remedies throughout time. If you're not aware of the background of the Holy Grail layout, this [A List Apart article](http://alistapart.com/article/holygrail/) provides a decent overview and links to some of the most well-known alternatives.


![The Holy Grail Layout Gif Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/921r9w1gpih1r2i7ru7q.gif)



Exactly like in the image above, a page with a header, footer, and three columns makes up the Holy Grail Layout's basic structure. The left and right columns have supplementary material, such as navigation or adverts, while the center column is home to the primary text.



Unfortunately, none of the traditional remedies to this issue have ever been able to completely achieve all of these aims due to the nature of these objectives and the original CSS constraints.

Finally, a comprehensive solution is feasible with Flexbox.


HTML Code: 

![Holy Grail Flexbox Layout Html code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/radnvqik6xvzgmc3breh.png)


CSS Code: 

![Holy Grail Flexbox Layout Css code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgl8xbag0hver9uok92p.png)


You can access the code from [here](https://codepen.io/Akr-am/pen/ZEBYWyX)
Avengers: The Test Of Brain
Tags: javascript, webdev, node, react
Published: 2022-10-23 11:52:05

## Description:
A quiz game based on the Hollywood series "The Avengers".
Game launched out!
¡Happy Gaming!

### Note
Supported on browsers that supports JavaScript.
Best visual experience on a PC/Laptop.

[Click To Play The Game](https://avengers-onedaygame.vercel.app/register)
[Source Code - GitHub](https://github.com/theutpal01/avengers/)
Suggestions are appreciated!

Instagram: [theutpal](https://Instagram.com/_theutpal_)

![Image 01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndh6c5bmgip9mm1bx3v6.png)
![Image 02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9w31gkfvpi1z1o7rwug.png)
![Image 03](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iuirn04lizls1qldilfa.png)
![Image 04](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyuqphbhb5px0d291d9n.png)

Thank you,
@theutpal01
Dead Letter Queue
Tags: messagequeue, systemdesign, aws, rabbitmq
Published: 2022-10-23 11:50:55

> This is going to be a very short introduction to dead letter queues. 

###What is a dead letter queue??

- Dead letter queues are messages queues specifically deployed to holding messages that could not be delivered to their intended queues.

- Messages sometimes fail to get delivered to their intended queues as they might be unavailable or the queue is full.


- Popular message queue tools that support or do not support DLQ:

    - AWS SQS (Simple Queue Service) supports DLQ.
    - RabbitMQ (free and open source) also supports DLQ.
    - Redis does not support DLQ.

______________________________________________________________


Thanks for reading :)
DLQ is a very important component of a scalable and resilient software architecture. This article only provides an introduction to the concept and helps readers with useful links.

Following are some of the useful resources that give more indepth information.


1. https://aws.amazon.com/about-aws/whats-new/2021/12/amazon-sqs-dead-letter-queue-management-experience-queues/

2. https://github.com/antirez/disque#dead-letter-queue

3. https://stackoverflow.com/questions/13824879/how-to-resend-from-dead-letter-queue-using-redis-mq


I request the readers of this post to kindly add more helpful URLs in the comment section, or add your experiences using a DLQ in a real world project. I believe that would help beginners get even better idea about how to use this in their projects.


Thank You
Aniketh Deshpande
CSS Attribute Selectors Cheat Sheet
Tags: css, selectors, webdev, html
Published: 2022-10-23 11:36:18

## CSS [attribute] Selector

Simplest of all the selectors and requires just the attribute name in the parameters. All the elements in the web page that contains this attribute name will be selected to apply the styling.

The following code performs CSS styling on the “p” elements that have the “lang” attribute:

```
<style>
  p[lang]{
      color: red;
      font-size: 20px;
  }
</style>
<p lang = “en”>Your Text</p>
<p>Your Text</p>
```

## CSS [Attribute ~= “value”] Selector

CSS [Attribute ~= “value”] can select the element if it includes the word “value” in the attribute specified. For example, the following code looks for the value “shirt” in the attribute “title”.

```
<style>
    p[title ~= "shirt"]{
      color: red;
      font-size: 20px;
    }
</style>

<p title="blue shirt">Your Text</p>
<p title="red shirt">Your Text</p>
<p title="hoodie">Your Text</p>
```

The above code selects the first two paragraphs since they have a shirt in their title, which is the target attribute.


## CSS [attribute |= “value”] Selector

CSS[attribute |= “value”] selector selects all those attribute values that start with the word “value”.

**Note:** CSS[attribute |= “value”] selector works only when the value is either a single word in the attribute such as only “shirt” or is hyphenated as “shirt-blue”. White space in between will not be selected by the CSS for styling. 

The shortcoming of CSS[attribute |= “value”] is fulfilled by the CSS[attribute ^= “value”] selector.

## CSS[attribute ^= “value”] Selector

```

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Web Template</title>
      <style>
      p[title ^= "shirt"]{
        color: red;
        font-size: 20px;
      }
      </style>
  </head>
  <body>
    <br><br>
        <br><br>
    <p title="shirt-blue">Your Text.</p>
    <p title = "shirt red">Your Text.</p>
    <p title = "hoodie">Your Text.</p>
  </body>
</html>

```

## CSS [attribute *= “value”] Selector

This selector works like the regular expression checker which selects every element with the target attribute having value composed of “value”. The value need not be a whole word. The selector works even if the “value” is a part of the attribute value.

I hope this CSS selectors cheat sheet helps you ahead in your professional career and if there are any suggestions, feel free to comment them down to help us refine the post for good.

Thank you for reading!💃🏻

[https://adarshgoyal.com/](https://adarshgoyal.com/)
[twitter](https://twitter.com/_Adarsh_Goyal_)
[linkedin](https://www.linkedin.com/in/adarshg1/)

The cover image of this article is generated using DALL-E.
02.06 React State - font color switch (functional components)
Tags: javascript, react, tutorial, webdev
Published: 2022-10-23 11:35:20

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggrjlrzx1uw6uoszdpam.gif)


Project files:
An image of project file structure


<hr/>
src/App.js
```react
import React, { useState } from "react";
import "./App.css"

function App(){
  const [color, setColor] = useState('red');

  return (
    <div className="app" style={{color: color}} >
      <h1>Text color is {color}.</h1>
      <button onClick={() => setColor("blue")} >Blue</button>
      <button onClick={() => setColor("red")}>Red</button>
    </div>
  );
}

export default App;
```
<hr/>
src/App.css
```css
.app{
    background-color: lightskyblue;
    padding: 20px 10px;
}
```
Beginner Road Map Of Flutter Developer
Tags: flutter, mobile, android, ios
Published: 2022-10-23 11:08:41


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

1. **Week 1**
Setup dev environment and learn Dart programming language

- Set dev environment
- Learn Dart programming Language
(You can use dart's website or other social media for this)

2. **Week 2**

- Create your first Flutter Project and understand project structure 

- Understand widgets

- Ui widgets

- Layouts

- Take a walk through everything important in Flutter (ex : Navigation and more..)

- Build a good application using the knowledge you have gained so far

3. **Week 3**

- Use External packages 

- Networking
     Crud(Create, Read, Update, Delete) Operations.

- Try making a clone of an app you like

4. **Week 4**

- Firebase (Auth, FireStore, Storage, Push Notification, Cloud functions)

- Develope Complete Grocery App with Firebase Backend.


**In the following weeks**

Now is to improve your skill. Try to learn many advanced things along with it

Happy Coding 💞😗
02.05 React State - font color switch (class components)
Tags: javascript, react, webdev, tutorial
Published: 2022-10-23 11:32:57

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qg4u9w5bwaafm7n5i6wd.gif)


Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x50xfd9gj0c7tzlu25tg.png)


<hr/>
src/App.js:
```react
import React from "react";
import "./App.css"

class App extends React.Component{
  state = {
    color: 'blue',
  };

  turnFontRed(){
    this.setState({ color: 'red'});
  }

  turnFontBlue(){
    this.setState({ color: 'blue'});
  }

  render(){
    return(
      <div className="app" style={{color: this.state.color}}>
        <h1>Text color is {this.state.color}.</h1>
        <button onClick={()=>{this.turnFontRed()}}>Turn font red</button>
        <button onClick={()=>{this.turnFontBlue()}}>Turn font blue</button>
      </div>
    )
  }
}

export default App;
```
<hr/>
src/App.css
```css
.app{
    background-color: lightskyblue;
    padding: 20px 10px;
}
```
02.04 React State - basic counter with page title change (functional components)
Tags: javascript, react, tutorial, programming
Published: 2022-10-23 11:19:58

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zkase93vt8ourki9of0.gif)



Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jr8cdqg4xk2kud87zvn4.png)



<hr/>
src/App.js
```react
import Counter from "./Counter"
import "./App.css"

function App() {
  return (
    <div className="app">
      <Counter/>
    </div>
  );
}

export default App;
```
<hr/>
src/App.css
```css
.app{
    background-color: lightskyblue;
    padding: 20px 10px;
}
```
<hr/>
<hr/>
src/Counter.jsx
```react
import React, { useState, useEffect} from "react";

function Counter(){
    const [counter, handleClick] = useState(0);

    useEffect(() => {
      document.title = `You clicked ${counter} times`;
    });

    return (
        <div>
          <button onClick={() => ( handleClick(counter + 1)) }>Increment counter</button>
          {/* <button onClick={this.handleClick}>Increment counter</button> */}
          <div>Counter value is {counter}</div>
        </div>
      );

}

export default Counter
```