teleren/devto huggingface dataset:
Complex DataTypes in JS
Tags: javascript, beginners
Published: 2023-08-18 04:26:48

### Collections

Objects and arrays are ‘complex’ data-types in JavaScript. Objects and arrays are mutable meaning that they can be accessed and changed after being created. JavaScript collections can be of indeterminant size.


## What's the Difference?

Objects are collections of data made of unordered properties. These properties are made of a `value` assigned to a `key`. A `key` need to be a `string`, however a `value` can be any data-type.

{% embed https://gist.github.com/gfish94/09a6d00aaf327edf62d7fd07d7c737af %}

Arrays are collections of data made of values assigned to a numerical index starting at zero. Arrays, unlike objects, are specifically ordered. Array values can also be any data-type.

{% embed https://gist.github.com/gfish94/0573adad2cb71404b098781a3aad1acb %}


## Accessing Object Properties

Dot notation is used to access an objects properties when the **_LITERAL_** name of a key is known.

{% embed https://gist.github.com/gfish94/2fac069b7192b88bf53198edcbb486dd %}


Bracket notation can be use a variable assigned to a key can be passed in the place of a key’s literal name. Bracket notation can also be used when a key has a ‘special’ character.

{% embed https://gist.github.com/gfish94/bf033b7b209c32fa0b9cfd72406ff7df %}


## Accessing Array Elements

Array elements are accessed using bracket notation passing the index number of the value trying to be accessed.

{% embed https://gist.github.com/gfish94/8ee1189c0d6ae893508228a6989b6fce %}


## Property Deletion 

Object properties can be deleted using the `delete` keyword.

{% embed https://gist.github.com/gfish94/a5a801a201fa1e39c9a887137be6d3db %}


## Removing Elements from an Array

There are various ways to remove elements from arrays.

The array method `splice` takes in two arguments: the index of the first element to remove and the number of elements to remove. The `splice` method can be used to return an array of the removed elements or if no arguments are passed then it can create an unaltered copy of the array. 

The array method `shift` can be used to remove the first element from an array. The `shift` method can be used to return the element that was removed.

The array method `pop` can be used to remove the last element from an array. The `pop` method can also be used to return the element that was removed.

{% embed https://gist.github.com/gfish94/fcdaed82fae4a171fcfdfd2709c5225f %}
Pogo Billing Helpline Number +1-909-766-6694
Tags: webdev, beginners, javascript
Published: 2023-08-18 04:18:55

Experiencing Pogo billing queries? Connect with us through the **[Pogo Billing Helpline Number](https://www.pogohelp.us/pogo-billing-help-phone-number.php)** for swift resolutions. Our knowledgeable team is committed to guiding you through payment-related concerns, ensuring uninterrupted gameplay. Count on Pogo Help assistance to navigate billing intricacies, allowing you to fully enjoy your Pogo gaming experience. Call Toll Free No. +1-909-766-6694
Vectown Store Free Svg File
Tags: design, freesvgfile, svgdesigninspiration, designresources
Published: 2023-08-18 04:06:05

Discover Vectown SVG, your one-stop hub for a wide array of top-notch SVG vector files. Elevate your creative projects with our user-friendly platform, offering customizable resources that range from icons to illustrations, empowering you to effortlessly transform your ideas into captivating visuals.
[https://vectown.com/](https://vectown.com/)
email: support@vectown.com
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppl115dkuhpsatpf62ot.png)
[https://www.youtube.com/@vectownstore](https://www.youtube.com/@vectownstore)
[https://www.pinterest.com/vectownstore/](https://www.pinterest.com/vectownstore/)
[https://www.linkedin.com/in/vectownstore/](https://www.linkedin.com/in/vectownstore/)
[https://twitter.com/vectown_store](https://twitter.com/vectown_store)
[https://www.instagram.com/vectown_store/](https://www.instagram.com/vectown_store/)
[vectownsvg.wordpress.com](vectownsvg.wordpress.com)
[https://en.gravatar.com/vectownstore](https://en.gravatar.com/vectownstore)
Dia 6 - #100DaysOfSwift
Tags: ios, swift
Published: 2023-08-18 03:27:11

#Closures
Closures são funções passadas por parâmetro em outras funções. 

O motivo mais comum pro uso de closures é pra fazer algo que você quer que o código faça, mas não exatamente naquele momento, por exemplo fazer algo após um delay, o fim de uma animação, o término de um download ou após o usuário selecionar alguma opção.

Closures nos permitem agrupar várias funcionalidades em uma única variável e em seguida armazenar em algum lugar, também é possível retornar de uma função e armazenar a closure em outro lugar.

Também é possível colocar parâmetros nas closures, a diferença entre uma closure e uma função padrão na chamada é que a função tem labels pros parâmetros e closures não.

Pra retornar um valor numa closure que não recebe parâmetros é preciso colocar parênteses vazio, a seta e o tipo que será retornado:

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

---

## Trailing Closure
Quando o último parâmetro de uma função é uma closure, o swift nos deixa usar _trailing closure_, que nada mais é do que passar a closure diretamente depois da chamada da função; E em casos em que a closure é o único parâmetro os parênteses podem ser eliminados.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6b2xxyemlhdl1tcgm6y.png)
<figcaption>Função com closure</figcaption>


![Mesma função mas usando trailing closure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhd1un9xovch97w2de7z.png)
<figcaption>Mesma função, mas usando trailing closure</figcaption>
Inserting test data into DynamoDB local
Tags: aws, dynamodb, python, docker
Published: 2023-08-18 03:18:49

DynamoDB is a fully managed NoSQL database service that offers high performance, scalability, and durability. It is a popular choice for storing large amounts of data that need to be accessed quickly.

One way to insert data into DynamoDB is to use a CSV file. This can be a convenient way to load data into DynamoDB, especially if you have a large amount of data to load.

In this blog post, we will show you how to insert test data into DynamoDB local using Python and CSV.

Prerequisites

Before you begin, you will need the following:

    A Python development environment
    The boto3 library
    A CSV file with your test data

## Step 1: Create a DynamoDB Local instance

To start, you need to create a DynamoDB Local instance. This can be done by following the instructions in the DynamoDB Local documentation: https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/DynamoDBLocal.html.

## Step 2: Create a DynamoDB table

Once you have created a DynamoDB Local instance, you need to create a DynamoDB table. This can be done by using the DynamoDb Admin (https://www.npmjs.com/package/dynamodb-admin) or NoSQL Workbench (https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/workbench.html)

## Step 3: Generate Data using Excel.

You can easily regenerate requisite data from excel or Google Sheets and download as CSV files and then import into your DynamoDB

![Creating dummy data using excel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exjnseg83i539ppsuebi.png)

## Step 4: Load the CSV file into DynamoDB

Now that you have created a DynamoDB table, you can load the CSV file into DynamoDB. The following code loads the CSV file test_data.csv into the test_table table:

```
import boto3
import csv

# Create a DynamoDB client
dynamodb = boto3.resource('dynamodb', endpoint_url='http://localhost:8000')

# Open the CSV file
with open('./csv/user.csv', 'r') as csvfile:

    # Create a reader object
    reader = csv.reader(csvfile, delimiter=',')

    # Get the header
    header = next(reader, None)

    # Iterate over the rows in the CSV file
    for row in reader:

        # Create a dictionary to represent the item
        item = {}
        for i, column in enumerate(header):
            item[column] = row[i]
            print(column, row[i])

        # Put the item in the DynamoDB table
        dynamodb.Table('test_table').put_item(Item=item)
```

## Step 5: Verify the data in DynamoDB

Once you have loaded the CSV file into DynamoDB, you can verify the data by querying the test_table table using the tools mentioned in the step 2.


![Viewing from DynamoDB Admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz9qrt6e5g32j8mwumna.png)

## Conclusion

In this blog post, we showed you how to insert test data into DynamoDB local using Python and CSV. We hope this helps you get started with DynamoDB.

For more information on DynamoDB, please visit the DynamoDB documentation: https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/.
Fintech Jobs Without Experience
Tags: workplace, fintech, database, developer
Published: 2023-08-18 03:03:42

The world of finance and technology, commonly known as Fintech, has witnessed remarkable growth in recent years. This innovative industry combines financial services with cutting-edge technology to revolutionize the way we handle money, make transactions, and manage investments. As Fintech continues to disrupt traditional financial systems, it opens up a wealth of job opportunities for individuals looking to break into this exciting field. In this article, we will explore how to land Fintech jobs with no prior experience, providing valuable insights and guidance for those seeking entry-level positions in this rapidly expanding industry.

 

1. Introduction to Fintech and its Growing Job Market
 

Understanding the Fintech Industry
Fintech, short for Financial Technology, refers to the innovative use of technology in the financial services industry. From mobile payment apps to robo-advisors, Fintech has revolutionized how we manage our money. It combines finance and technology to create solutions that are convenient, efficient, and accessible to everyone.

The Rise of FinTech Job Opportunities
With the increasing reliance on technology in the financial sector, the demand for professionals in the FinTech industry has skyrocketed. This rapid growth has created numerous job opportunities for individuals looking to start their careers in this exciting field. Whether it’s software development, data analysis, or customer service, there’s a wide range of roles available for those interested in FinTe..........[Read More](http://www.striminfo.org.ng/fintech-jobs-without-experience/)of entry-level positions that can serve as a stepping stone to your dream career. These may include roles
Postman API 101
Tags: postmanapi, api, postmanstudent
Published: 2023-08-18 00:20:37

**My learning Experience with Postman API 101 Workshop**
Recently i attended an API virtual event hosted by a postman student expert in Futminna. 
The event was superb and detailed, from the very beginning, it was clear that APIs are more than just lines of code; they're the architects of modern connectivity, enabling apps to talk to each other effortlessly.

🔬 Unraveling API Fundamentals:
In the world of APIs, understanding the basics is like mastering the alphabet. The event sessions illuminated the core concepts, from HTTP requests and responses to endpoints and authentication. These fundamentals are the building blocks of every API-driven solution.

🌡️API Testing:
One of the most exhilarating revelations came with the exploration of Postman. This platform isn't just about making requests; it's a powerful toolkit for testing, automating, and ensuring the reliability of APIs. I realized that robust testing isn't just a checkbox; it's a critical component of delivering quality digital experiences.

🎨 Designing APIs for Humans:
APIs might be a technological marvel, but they're used by humans. This event underlined the importance of crafting APIs that are intuitive, well-documented, and aligned with best practices. It's not just about functionality; it's about creating delightful and user-friendly experiences.

🤝 The Spirit of Collaboration:
While APIs can feel like a solitary endeavor, the event emphasized the power of collaboration which has been made possible with less effort by Postman. The insights on version control, documentation, and working in teams highlighted that successful API development is a collective effort, where each piece plays a vital role in the puzzle.

🚀 Elevating My Development Journey:
As I reflect on the lessons learned at the #PostmanStudent event, I can't help but feel a surge of excitement. Armed with a deeper understanding of APIs, and uaung Postman I'm ready to embark on the next phase of my development journey.
How to do QR code API integration
Tags: qrcodes, qrcodeapi, api, qrcodegenerator
Published: 2023-08-18 01:59:35

Here's how businesses looking to create personalized QR codes and landing pages can use a **QR code generator API**. Follow these six steps:

1. Choose a reliable [QR code generator with an API](https://www.qrcode-tiger.com/api-documentation).
2. Log in or sign up for an account on the generator platform.
3. Access the API tab and open the API documentation.
4. Fill in required data, including the API key.
5. Follow the provided API documentation steps for tasks such as generating custom QR codes and tracking data.
6. Contact customer support if needed, or scan the generator's own QR code for assistance.

The benefits of using a QR code generator API include **white labeling services, comprehensive QR code design control, automated data processing, flexible data migration, and bridging offline-to-online business transactions**.

Make the most out of your QR code generator API integration with these tips:

1. Choose the right content to white label for branding purposes.
2. Ensure proper API documentation for accurate functionality.
3. Utilize the QR code API to customize visual QR codes effectively.
4. Safeguard the API Key for future integration.
5. Seek customer service assistance from the QR code generator platform if needed.
CSS Specificity
Tags: css, javascript, developer, frontend
Published: 2023-08-18 01:11:34

In CSS, the level of importance of styles applied to an element is governed by specificity. it determines which CSS rule set takes precedence when multiple rules are applied to the same element.

Here are some examples where it applies:


Inline Styles: These have the highest specificity and therefore have the highest priority. They are applied directly to an element within its style attribute.

ID Selectors: These have a higher specificity than class and element selectors. But if using an ID to style multiple elements, it's important to remember that it's good practice to keep unique IDs throughout the page.

Selectors class: They are less specific than IDs but more specific than element selectors. You can apply the same class to multiple elements and apply similar styles to all of them.

Element Selectors: They are the least specific. These affect all elements of the same type (eg all paragraphs, all headings (p, h1), etc.) and can easily be affected by more specific rules.

When multiple styles are applied to the same element and there are conflicts, the rule with the highest specificity will prevail. If two or more rules have the same specificity, the last rule found in the code will be applied.

It is important to understand these hierarchies of specificity so that you can control and predict how styles will be applied on your web page.

Veamos codigo

```
<style>
#id-selector {
  color: blue;
}
.selector-class {
  color: green;
}
</style>

<div id="id-selector" class="selector-class">This div has an ID and a class
</div>

```
What color do you think is painted in the div? Well, blue since the id-selector has greater specificity.

If an inline style was put in the code, it would take that value that we put in it and ignore the others.
A small one-page app to show the user’s IP address, built using React
Tags: apps
Published: 2023-08-18 07:45:45

---
title: A small one-page app to show the user’s IP address, built using React
published: true
date: 2023-08-18 00:54:00 UTC
tags: Apps
canonical_url: https://reactjsexample.com/a-small-one-page-app-to-show-the-users-ip-address-built-using-react/
---

# What’s my IP?
 ![A small one-page app to show the user’s IP address, built using React](https://reactjsexample.com/content/images/2023/08/code_2023-16-20-47-06.jpg)

A small one-page app to show the user’s IP address, along with their location on a map and some extra infos about their country.

Built as a collaboration during the WBS Coding School bootcamp, practicing agile project management and API usage in React.

## Features ✨

- Geolocation and countries API
- Map powered by Leaflet
- Custom map marker
- Fully responsive

## Demo

[https://whats-my-ip-nine.vercel.app/](https://whats-my-ip-nine.vercel.app/)

## Screenshots

![A small one-page app to show the user’s IP address, built using React](https://camo.githubusercontent.com/89e224f042976efd8349428d8c86b127e7bb730634bf6b15d18d39d656b9370c/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f6467756d31657536652f696d6167652f75706c6f61642f76313639313639323039372f506f7274666f6c696f2f73637265656e73686f745f49505f717768746c642e706e67)

## GitHub

[View Github](https://github.com/AnnaHittaller/whats-my-ip?ref=reactjsexample.com)
A beautiful Gauge React component to indicate a status
Tags: gauge
Published: 2023-08-18 07:45:49

---
title: A beautiful Gauge React component to indicate a status
published: true
date: 2023-08-18 00:50:00 UTC
tags: Gauge
canonical_url: https://reactjsexample.com/a-beautiful-gauge-react-component-to-indicate-a-status/
---

# vercel/gauge
 ![A beautiful Gauge React component to indicate a status](https://reactjsexample.com/content/images/2023/08/code_2023-16-20-44-43.jpg)

This is the open-source Tailwindcss version of Vercel’s beautiful Gauge React component to indicate a status.

![A beautiful Gauge React component to indicate a status](https://github.com/mfts/gauge-demo/raw/main/.github/img/demo.png)

## Demo

View the demo here: [https://gauge-demo.vercel.app](https://gauge-demo.vercel.app)

View the original Vercel design system here: [Gauge](https://vercel.com/design/gauge)

## Installation

### Requirements

- `tailwindcss`
- `tailwindcss-animate`

It’s pretty easy to install. I made it a standalone component that you can copy in your codebase.

1. Copy the `gauge` component

2. Add keyframes and animation to your `tailwind.config.ts`

3. Import into your page

## API

The `Gauge` component takes three props: `value`, `size`, `showValue`.

- `value`: a **number** from `0` to `100`
- `size`: a **string** (“small”, “medium”, “large”). Defaults to: `"small"`
- `showValue`: a **boolean** to show the number inside the gauge or not. Defaults to: `true`

## Inspiration

- Thanks to the [@vercel](https://x.com/vercel) design team for the awesome component.
- Thanks to [@shadcn](https://x.com/shadcn) who gave me a new joy for UI design.

## GitHub

[View Github](https://github.com/mfts/gauge-demo?ref=reactjsexample.com)
A text editor built with Tiptap and TailwindCSS for React
Tags: editor, tailwindcss
Published: 2023-08-18 07:45:54

---
title: A text editor built with Tiptap and TailwindCSS for React
published: true
date: 2023-08-18 00:45:00 UTC
tags: Editor,TailwindCSS
canonical_url: https://reactjsexample.com/a-text-editor-built-with-tiptap-and-tailwindcss-for-react/
---

# Tiptap Text Editor
 ![A text editor built with Tiptap and TailwindCSS for React](https://reactjsexample.com/content/images/2023/08/code_2023-16-20-40-19.jpg)

A text editor built with [Tiptap](https://tiptap.dev/) and [TailwindCSS](https://tailwindcss.com/) for React.

![A text editor built with Tiptap and TailwindCSS for React](https://github.com/ZanyuanYang/Text-Editor-Tiptap/raw/master/src/assets/img.png)

## 🚀 Installation

Open a terminal and run:

```
npm install
npm run dev
```

Visit [http://localhost:5173/](http://localhost:5173/) in your browser.

## GitHub

[View Github](https://github.com/ZanyuanYang/Text-Editor-Tiptap?ref=reactjsexample.com)
A nicely labelled canvas grid that adapts to a transform automatically
Tags: grid, canvas
Published: 2023-08-18 07:46:03

---
title: A nicely labelled canvas grid that adapts to a transform automatically
published: true
date: 2023-08-18 00:44:00 UTC
tags: Grid,Canvas
canonical_url: https://reactjsexample.com/a-nicely-labelled-canvas-grid-that-adapts-to-a-transform-automatically/
---

# react-supergrid
 ![A nicely labelled canvas grid that adapts to a transform automatically](https://reactjsexample.com/content/images/2023/08/code_2023-16-20-38-59.jpg)

Easily create a grid with infinitely nesting subgrid cells.

[![A nicely labelled canvas grid that adapts to a transform automatically](https://user-images.githubusercontent.com/1910070/260363547-3bacbace-d6cc-42e3-b1f4-62ab173f218b.gif)](https://user-images.githubusercontent.com/1910070/260363547-3bacbace-d6cc-42e3-b1f4-62ab173f218b.gif)

```
import React from "react"
import { SuperGrid } from "react-supergrid"
import { useMouseMatrixTransform } from "use-mouse-matrix-transform"

export const MyApp = () => {
  const { transform, ref } = useMouseMatrixTransform()

  return (
    <div ref={ref}>
      <SuperGrid width={1000} height={1000} transform={transform} />
    </div>
  )
}
```

## GitHub

[View Github](https://github.com/tscircuit/supergrid?ref=reactjsexample.com)
A file upload sample with NextJs
Tags: upload, nextjs
Published: 2023-08-18 07:46:08

---
title: A file upload sample with NextJs
published: true
date: 2023-08-18 00:40:00 UTC
tags: Upload,Nextjs
canonical_url: https://reactjsexample.com/a-file-upload-sample-with-nextjs/
---

# File Upload sample
 ![A file upload sample with NextJs](https://reactjsexample.com/content/images/2023/08/code_2023-16-20-34-52.jpg)

![A file upload sample with NextJs](https://github.com/femi-Zedev/file_upload/raw/main/public/fileUploadGif.gif)

Ce projet est un sample d’Upload de fichier avec [Next.js](https://nextjs.org/) et Firebase

**[Voir la Demo](https://file-upload-sample.netlify.app/)**

## 📐 La Stack (voir package.json)

- 🔥 **NextJS** – version 13.4.12 avec 📁src/ comme dossier racine
- 🏂 **Framer-motion** pour des animations fluides
- 🍞 **MantineUI** – pour les components du UI
- 🔫 **React Recoil** – pour la gestion des states global à l’application
- 💅 **Tailwind CSS** – pour donner un joli look à l’app
- 🌱 **Firebase storage** – pour l’upload des fichiers
- 📁 **React File** – pour le drag-drop et la sélection des fichiers

## GitHub

[View Github](https://github.com/femi-Zedev/file_upload?ref=reactjsexample.com)