teleren/devto huggingface dataset:
How to fix CROSS Error in AWS S3 ( React JS )
Tags: aws, webdev, react, help
Published: 2022-11-02 07:31:59


Hello devs, I need your help!

Now I working in one project for my company!

here I face one issue ( cross error from aws s3 )

below you can see the images.

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

This application connects an image in AWS s3 to a user image using **html-to-image** npm.
This causes the common aws s3 cross error that occurs.
Do you have a solution for this?

## MY Bucket policy

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

## MY Cross-origin resource sharing (CORS)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awgt8foowowmb4hco1f1.png)
La fonction next() dans Express.js
Tags: webdev, express, programming
Published: 2022-11-02 07:07:10

Express.js est un framework web populaire basé sur Node.js qui facilite la création d'applications web robustes et flexibles. L'une des fonctionnalités clés d'Express.js est la fonction Next(), qui joue un rôle crucial dans le flux de contrôle des requêtes HTTP. Comprendre le fonctionnement de Next() est essentiel pour exploiter pleinement le potentiel d'Express.js et créer des applications web efficaces. Dans cet article, nous explorerons la fonction Next() et comment l'utiliser pour gérer les middleware et améliorer la gestion des routes dans vos applications Express.js.

Pour savoir plus sur le middleware; consulter [ici](https://medium.com/@valentinhonvj1/comment-utiliser-le-middleware-dans-express-js-44b1d1edb32f)

Il existe de nombreuses fonctions middleware dans Express.js comme la fonction Express.js app.use() , et bien d'autres. Le middleware app.use() est essentiellement utilisé pour définir le gestionnaire de la demande particulière faite par le client.

Syntaxe:

```
app.use(path,(req,res,next))
```
Il accepte les deux paramètres mentionnés ci-dessus.

1. path : il s'agit du chemin pour lequel la fonction middleware est appelée. Il peut s'agir d'une chaîne représentant un chemin ou un modèle de chemin ou un modèle d'expression régulière pour faire correspondre les chemins.

2. callback : il s'agit de la fonction de rappel qui contient l'objet de requête, l'objet de réponse et la fonction next() pour appeler la fonction middleware suivante si la réponse du middleware actuel n'est pas terminée. Dans le deuxième paramètre, nous pouvons également passer le nom de la fonction du middleware.

**Installation du module** 

Avant toute chose; on commence par installer le module express à l'aide de la commande suivante:

```
npm installer express
```

**Serveur sans fonction next() vs Serveur avec fonction next()**

Expliquons les deux cas avec des exemples:

**Exemple 1 : Serveur sans fonction next()**

```
// Importation du module express recemment installé
const express = require("express");
const app = express()

// création du premier Middleware
app.use("/", (req, res, next) => {
	console.log("Hello");
	// sans la fonction next()
})

// création du second middleware
app.get("/", (req, res, next) => {
	console.log("Bonjour requête")
})

// Execution du server
app.listen(3000, () => {
	console.log("Server is Running")
})

```
En Sortie : sans la fonction next(), nous remarquons que le middleware n'appelle pas le middleware suivant, même s'il demande un chemin identique.

**Exemple 2 : Serveur avec la fonction next()**

```
// Importation du module express récemment installé
const express = require("express");
const app = express()

// Création du premier Middleware
app.use("/", (req, res, next) => {
	console.log("Hello");
	// The next() function called
	next();
})

// création du second middleware
app.get("/", (req, res, next) => {
	console.log("Get Request")
})

// Execution the server
app.listen(3000, () => {
	console.log("Server is Running")
})

```
Keys to the object
Tags: javascript, beginners, programming, webdev
Published: 2022-11-02 06:54:17


**Object**

```
const obj = {key: value};
```

**Object nested inside of an object**

```
const obj = {
key : value;
key2 : {
innerKey : innerValue;
    },
};
```

Objects in javascript work just like arrays except you can easily access the values inside of an object by calling on the keys. They can also have nested arrays or nested objects inside of them. An example of things that could be an object are as such : 

```
const charEquip = {
   hat: "Hero's helmet",
   top: "Hero's Plate Armor",
   bottoms: "Hero's Plate Legs",
   shoes: "Hero's cleaves", 
   gloves: "Hero's gloves",
   weapon: {
      primary: "Holy sword", 
      secondary: "Holy shield",
   },
};  
```

Based on the comparison above, there may be a moment where you may want to know what the top-level keys are in an object. If you come across this situation, you can use **Object.keys()** to find out what the top level keys are : 

```
Object.keys(charEquip);
//=> ["hat", "top", "bottoms", "shoes", "gloves", "weapon"]
```
By passing the value of the object into object keys, we can ask Javascript to let us know the top-level keys. 

To access the inner keys nested inside of an object, you'd have to call on the innerKey as well as the outerKey. 

```
charEquip.weapon.secondary;
//=> "Holy shield"
```

```
charEquip[weapon][primary];
//=> "Holy sword"
```
Compared to arrays where you can call the values inside of an array by using square brackets to call on which part of the array you want to access, object values are called by using square bracket notation or dot notation.

**Dot Notation**

```
charEquip.gloves; 
//=> "Hero's gloves"
```

**Bracket Notation**

```
charEquip[top];
//=> "Hero's plate armor"
```

In some situations, you may need to use bracket notation to call on the value of an object as such : 

```
const rickRolled = {
"Never": "never",
"gonna": "gonna", 
"give": "let",
"you": "you",
"up": "down",
};
```

In this example if you were to try to use dot notation to try to access the value of "let", it would give you a syntax error.

```
rickRolled."give";
// ERROR: Uncaught SyntaxError: Unexpected string
```

So in this case you would have to use bracket notation.

```
rickRolled["give"];
//=> "let"
```

When assigning object keys you must also make sure the keys are specific, otherwise the processor will just log the last value that was logged to the specific key. 

```
const juicy = {
fruit: apple,
fruit: cantaloupe,
fruit: dragonfruit,
}

juicy;
//=> {fruit: dragonfruit}
```
Weekly web development resources #122
Tags: webdev, weekly, javascript, css
Published: 2022-11-02 06:27:17



______

*Sponsored*
##[CtrlAlt.CC's product of the week](https://ctrlalt.cc/product-of-the-week/)
[![CtrlAlt.CC's product of the week](https://wweb.dev/weekly/content/122/ctrlaltcc.jpg)](https://ctrlalt.cc/product-of-the-week/)
Discover a super useful startup tool + an inspirational maker story, directly from your inbox, every Friday.

______


##[gistlib](https://gistlib.com/)
[![gistlib](https://wweb.dev/weekly/content/122/gistlib.jpg)](https://gistlib.com/)
A collection of code snippets that help you find how to do things in code.

______


##[Bolt.css](https://boltcss.com/)
[![Bolt.css](https://wweb.dev/weekly/content/122/boltcss.jpg)](https://boltcss.com/)
Basic styles for HTML Elements by using set of styles without classes.

______


##[Turbo](https://turbo.build/)
[![Turbo](https://wweb.dev/weekly/content/122/turbo.jpg)](https://turbo.build/)
A bundler and build system optimized for JavaScript and TypeScript, written in Rust.

______


##[AnimatiSS](https://xsgames.co/animatiss/)
[![AnimatiSS](https://wweb.dev/weekly/content/122/animatiss.jpg)](https://xsgames.co/animatiss/)
A nice collection of CSS animations for your web projects.

______


##[uiverse](https://uiverse.io/)
[![uiverse](https://wweb.dev/weekly/content/122/uiverse.jpg)](https://uiverse.io/)
A collection of open-source UI elements, made with CSS and HTML.

______


##[Illustration.lol](https://www.illustration.lol/)
[![Illustration.lol](https://wweb.dev/weekly/content/122/illustrationlol.jpg)](https://www.illustration.lol/)
A curated collection of editorial illustrations and images.

______


##[The Component Gallery](https://component.gallery/)
[![The Component Gallery](https://wweb.dev/weekly/content/122/component-gallery.jpg)](https://component.gallery/)
A repository of interface components based on examples from the world of design systems.

______


##[Projectbook](https://projectbook.code.brettchalupa.com/)
[![Projectbook](https://wweb.dev/weekly/content/122/projectbook.jpg)](https://projectbook.code.brettchalupa.com/)
Project ideas for people looking to learn a given language.

______


##[UHU GRID](https://github.com/cipherlogs/uhugrid)
[![UHU GRID](https://wweb.dev/weekly/content/122/uhu-grid.jpg)](https://github.com/cipherlogs/uhugrid)
A reliable and fast alternative to the masonry and mosaic layout. 

______


##[Charts.css](http://chartscss.org/)
[![Charts.css](https://wweb.dev/weekly/content/122/chartscss.jpg)](http://chartscss.org/)
A modern CSS framework that uses CSS utility classes to style HTML elements as charts.

______


##[Cybertype](https://cybertype.app/)
[![Cybertype](https://wweb.dev/weekly/content/122/cybertype.jpg)](https://cybertype.app/)
A fast and minimal typing app to improve your typing speed.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Framer motion - Layout Animations
Tags: react, webdev, beginners, javascript
Published: 2022-11-02 06:26:39

I have been learning framer motion lately, and came across this concept of layout animations which is simple yet effective in a way that you can add subtle animations to make layout changes look elegant and smooth.

Before sharing some examples of how layout animations work, let me briefly describe what [framer motion](https://www.framer.com/motion/) is — quoting their landing page, it’s a “A production-ready motion library for React” which helps react developers create declarative animations.

---

## What are layout animations ?

Layout animations basically animate any layout changes which occur when a component is re-rendered.

For example, a change in the width or height of a div, flex items moving due to a change in justify-content property, re ordering of a list, etc.

In order to add layout animation to any element, we just need to add the **layout **prop.

**Let’s see some examples (these can also be found in the official docs).**

**Example 1**

This is a basic expanding div — where the width and height are changing when you click the div. A state variable tracks whether the div is expanded or not and based on the data attribute being true, the width and height are changed in the CSS. A caveat is, the layout prop is added even to the child div, when there’s no change in it’s layout, not adding it would cause it to distort during the animation, try removing it and clicking on the it. To overcome this, framer recommends to add layout prop to the child as well.

{% embed https://codesandbox.io/embed/layout-animation-1-kpzh7u?fontsize=14&hidenavigation=1&theme=dark %}

**Example 2**

This illustrates a change in layout caused due to a change in flexbox’s justify-content property. The value toggles between flex-start and flex-end based the state variable which toggles as you click on the div.

The layout animation duration can be set in the transition prop.

{% embed https://codesandbox.io/embed/layout-animation-2-1bmigz?fontsize=14&hidenavigation=1&theme=dark %}

Example 3

This one shows how to implement shared layout animations.

So the animation has 3 tabs, as you select any one of these the underline slides below the selected one.

The underline div which gets re rendered every time the selected tab state changes has a prop called layoutId. Adding a layoutId prop causes the old component to automatically animate out.

So when tomato is selected the underline below it the “current” component which has a layoutId value of “underline”, as you select lettuce, the UI is re-rendered, the underline below tomato becomes the old component as it is not rendered and is “animated out”, and it moves under lettuce.

{% embed https://codesandbox.io/embed/layout-animation-3-o38q6x?fontsize=14&hidenavigation=1&theme=dark %}

I will be writing more such posts, as I explore more of framer-motion.

You can find me on [twitter](https://twitter.com/siddharth0x)
Hero Header Tutorial
Tags: webdev, beginners, tutorial, javascript
Published: 2022-11-02 06:25:19

Designing a website header is not as easy as it may seem. This is because the header is one of the first things that people see when they visit your site. 

It should be well-designed and attractive so that it will catch the attention of your visitors. It is also the most prominent part of your site, so it should be something that reflects your brand.

This tutorial will help you design a website header with HTML and CSS. It's for practice purposes only, but if you want to use this design on your own site, you can do so by modifying the code to make it yours.

Watch tutorial [here](https://www.youtube.com/watch?v=qyV2RSJaHe8)
Dich Vu Do Cung Viet Binh Duong
Tags: webdev, beginners, react, programming
Published: 2022-11-02 06:11:46

Đồ Cúng Việt chuyên cung cấp dịch vụ mâm cúng trọn gói với tiêu chí UY TÍN, CHẤT LƯỢNG, PHỤC VỤ TẬN NƠI tại BÌNH DƯƠNG.
Website: [](https://dichvudocungbinhduong.com/)
[](https://www.facebook.com/dcvbinhduong)
[](https://www.pinterest.com/dichvudocungbinhduong/)
[](https://twitter.com/docung_BD)
[](https://vimeo.com/dichvudocungbinhduongt)
[](https://www.tumblr.com/dichvudocungbinhduong)
[](https://www.blogger.com/profile/07808395486968350551)
[](https://about.me/docungbinhduong/)
[](http://www.travelful.net/location/5016008/viet-nam/dich-vu-do-cung-binh-duong)
[](https://hubpages.com/@dichvudocungbinhduong)
[](https://community.atlassian.com/t5/user/viewprofilepage/user-id/5068723)
h[ttps://postheaven.net/me/c/dichvudocungbinhduong](url)
[](https://public.tableau.com/app/profile/dichvudocungbinhduong)
[](https://gifyu.com/docung_binhduong/)
[](https://osf.io/4zfmp/)
[[](https://www.bbuzzart.com/profile/460813)
https://timeswriter.com/members/dichvudocungbinhduong/profile/](url)
[](https://www.xosothantai.com/members/do-cung-binh-duong.507108/)

[](https://vi.gravatar.com/docungvietbinhduong)
[](https://telegra.ph/D%E1%BB%8Bch-V%E1%BB%A5-%C4%90%E1%BB%93-C%C3%BAng-Vi%E1%BB%87t-B%C3%ACnh-D%C6%B0%C6%A1ng-11-02)
[](https://www.linkedin.com/in/dichvudocungbinhduong/)

[](https://slides.com/dichvudocungbinhduong)
[](https://gab.com/dichvudocungbinhduong)
[](https://dev.to/dichvudocungbinhduong)
HTML Image Map
Tags: webdev, beginners, html, programming
Published: 2022-11-02 06:08:57

With HTML image maps, you can create clickable areas on an image.

The HTML **map** tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more **area** tags.

```
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.html">
</map>
```

To get the coordinates of the objects in the image you can visit the following websites:

- https://www.image-map.net/
- https://imagemap.org/

---
> You can also visit my website where image map is used {% embed https://reverent-yalow-4ee88e.netlify.app/accessories  %}

> And you can find the above website's code at https://github.com/harshilshah99/greenPaddle/blob/main/public/accessories.html 


![Image of HTML image mapper from above website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esdonxqo5kzyj9rugnuf.png)
Kubernetes 101 - Containers
Tags: kubernetes, beginners
Published: 2022-11-02 06:08:50

For this article we'll be looking a bit more in detail into containers. Containers are ready to run software packages, meaning they include everything:

- code
- runtime if required
- application
- system libraries

Once something is converted into a container the code cannot change, if you need to update any of the above mentioned elements you'll need to create a new image version.

The benefit of these images containing everything out of the box is that the can easily run on different OS environments and clouds.

## Container images

As for the container images it references a bundles application that you can run on a given pod.

So where do these images live?

By default Kubernetes will look in the Docker registry for your images based on it's name.
However it's possible to use other registries as well as private hosted ones.

We won't go into too much detail around this for now.

The main thing here is to know that at some point we'll have to convert our code into a image and push it somewhere.

## Container hooks

Hooks are not a new concept, but something worth mentioning.
Our containers come with some hooks exposed, there are two exposed ones:

- `PostStart`: Executed immediately after creation of the container.
- `PreStop`: Called before the container is terminated due to unhealthiness of controller decided to kill it off. It's important to note the container will always be killed, it won't wait for some calls to happen in this hook.

For our beginning exploration of Kubernetes we won't use these hooks just yet, so let's dive into them at a later stage again.

### 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)
APIs 101 with Postman
Tags: postmanstudent, postmanapi, api
Published: 2022-11-02 06:05:33

Here's a Blog on session : https://medium.com/@maitri.vv/apis-101-with-postman-1a1cfd7acdfe
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pepnbfe4jott6an13br.png)
Handling command line arguments in zx
Tags: zx, node
Published: 2022-10-31 09:24:39

---
title: Handling command line arguments in zx
published: true
description: 
tags:
- zx
- Node
---

Not only zx, but when you refer to a command line argument list in node

If you are not using a library to parse command line arguments, the list is taken from process.argv.

I thought I could simply use this for zx as well, but the order in which zx options are passed to process.argv changes, so if I try to use it as-is, the behavior changes, as a matter of course.

## minimist

In zx, minimist is included by default, and you can refer to the list of arguments parsed by minimist from the beginning (argv).

If you don't use other libraries, it seems to be a good idea to refer to argv from the beginning.

However, this alone is a little subtle and changes the contents of the command line argument list in the following two patterns


- No options, when you pass a set of key/value options
    - eg) --shell=/bin/bash
- when passing options that can be represented by (true/false)
    - eg) --quiet

- sample.mjs

```
#!/usr/bin/env zx

console.log(argv);
```

```
$ zx sample.mjs a b c
{ _: [ 'sample.mjs', 'a', 'b', 'c' ] }

$ zx --shell=/bin/bash sample.mjs a b c
{ _: [ 'sample.mjs', 'a', 'b', 'c' ], shell: '/bin/bash' }

$ zx --quiet sample.mjs a b c
{ _: [ 'a', 'b', 'c' ], quiet: 'sample.mjs' }
```

even if your file name is in the list of command line arguments, exclude it to prevent the command line argument list from being changed by options at runtime.

## path

zx also includes path by default, so it is not affected by the runtime options if you exclude your filename from the command line argument list.

- sample.mjs

```
#!/usr/bin/env zx

console.log(path.basename(__filename));
console.log(argv);
console.log(argv._.filter(a => a !== path.basename(__filename)));
```

```
$ zx sample.mjs a b
sample.mjs
{ _: [ 'sample.mjs', 'a', 'b' ] }
[ 'a', 'b' ]
```

```
$ zx --quite sample.mjs a b
sample.mjs
{ _: [ 'a', 'b' ], quite: 'sample.mjs' }
[ 'a', 'b' ]
```

This should no longer affect behavior due to options, etc.
How To Get Current Month Records In MySQL Query
Tags: laravel, php, mysql, database
Published: 2022-11-02 05:30:00

In this article, we will see how to get current month records in MySQL query. For data analysis and reporting, we need more data or records. So, we will learn how to get current month data in MySQL PHP. For getting data for the current month in MySQL we use the month() function. MySQL month() returns the month number for a given date. The return value is from 1 to 12.

So, let's see SQL query to get current month data and how to get current month data in PHP from MySQL Database.

> Get Current Month Data In MySQL Example:

In this example, we will see an SQL query to get data for the current month in MySQL.

id | order_date | amount | Orders
---+------------+--------+-------
 1 | 2022-02-01 | 150    | 2
 2 | 2022-02-02 | 200	 | 4
 3 | 2022-03-03 | 100	 | 1
 4 | 2022-03-04 | 300	 | 5
 5 | 2022-04-05 | 200 	 | 3
 7 | 2022-04-06 | 190	 | 7

In your table, the record needs to be like date and month.

```
select * from users
       where MONTH(order_date) = MONTH(now())
       and YEAR(order_date) = YEAR(now());
```

In the above query, we use the now() function to get the current date, and the month() function to get the current month number of date values. 
 
> How to Get New Users in the Current Month in MySQL

Using the below MySQL query you can get the new users in the current month with date and count.

```
select date(created_at), count(*) from users
       where MONTH(created_at) = MONTH(now())
       and YEAR(created_at) = YEAR(now())
       group by date(created_at);
```

Get the current month using the MONTH() function.

```
SELECT MONTH(CURDATE());
```

Output:

```
Current Month: 9
```
Typescript: Checking Type of a Value, (interface, type)
Tags: typescript, beginners, webdev
Published: 2022-11-02 05:28:14

> Typescript: Checking Type of Value, Interface and Type

Let's say there are animal types and instances of them.

```typescript
interface Cat {
  catId: number;
}

interface Dog {
  dogId: number;
}

type Bird = {
  birdId: number;
};

const cat: Cat = { catId: 1 };

const dog: Dog = { dogId: 1 };

const bird: Bird = { birdId: 1 };
```

Then, how do you check the type of the instances?

---

With `typeof`

```typescript
console.log(typeof cat);
```

Output
```
object
```

---

With `instanceof`

```typescript
console.log(cat instanceof Cat);
```

You would get an error like below.

```
'Cat' only refers to a type, but is being used as a value here.
```

---

In Typescript, for type checking, you can use `is` operator for type checking.

```typescript
const isCat = (cat: any): cat is Cat => (cat as Cat).catId !== undefined;
console.log(isCat(cat));
```

Output

```
true
```

As you see, it works well.

In my project, I had to do type checking frequently, so, I made a function using Generic Type to check the type of an instance.

```typescript
const instanceOf = <T>(value: any, fieldName: string): value is T =>
  fieldName in value;
```
And you can use the function like this.

```typescript
const animals = [cat, dog, bird, cat, dog, bird];
console.log(instanceOf<Cat>(cat, "catId"));

const cats = animals.filter((value) => instanceOf<Bird>(value, "birdId"));
console.log("cats", cats);
```

Output
```
true
cats [ { birdId: 1 }, { birdId: 1 } ]
```

---

I hope it'll be helpful for someone,

Happy Coding!