teleren/devto huggingface dataset:
Build NFTs on Stellar during 48-hour hackathon
Tags: javascript, opensource, challenge, nft
Published: 2022-02-25 15:03:08

Interested in exploring NFTs but don’t know how to code in Solidity and/or want to avoid high gas fees? Join us on March 11-13 and **build innovative and accessible NFT experiences** on [Stellar](https://stellar.org) using [all kinds of programming languages](https://developers.stellar.org/docs/software-and-sdks/) including JavaScript! Looking just to get started? Mint your art into an NFT for less than a dollar and compete against other artists for prizes.

As the main sponsor for this year’s [SXSW’s Finance 3.0 Summit](https://www.sxsw.com/conference/summits/#fintech), the [Stellar Development Foundation](https://stellar.org/foundation) is sponsoring a **[48-hour hybrid hackathon](https://stellarnft.devpost.com)** that challenges experienced and newcomers alike to build a project on Stellar that incorporates the use of NFTs.

$10,000 worth of [XLM](https://stellar.org/lumens) (Stellar's native currency) in prizes will be awarded to the best implementations of the challenges below! Additionally, all submitters will receive a one-of-a-kind NFT badge to prove your participation. Build something cool, try something new, get rewarded, and get your name out there!

> Register today at [stellarnft.devpost.com](https://stellarnft.devpost.com/) 

To initiate the hackathon and learn how to get started, register [here](https://www.eventbrite.com/e/create-innovative-nfts-on-stellar-with-javascript-tickets-265322937047) for this helpful workshop on how to code royalty payments into NFTs using JavaScript.
Cats and APIs
Tags: beginners, javascript, api, htmlcss
Published: 2022-02-25 14:56:59

I don't know why, but I feel so cool when I tell people that I used an API to build my project. Maybe because it sounds like AI, but also maybe because I get to explain to them that I am fetching data from another site in real time and using it on my website.

Combining APIs with DOM manipulation is a game changer! Your website goes from being a pretty page, to something that can actually be used in the real world. Not knocking pretty pages at all by the way, I love them all the same. 

This week at DigitalCrafts, we had four days to create our first front end API project. For my project I wanted to incorporate something with color and branding, so I decided to make a brand kit generator. 

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

The user can type in their main color, product, brand name, and choose their favorite font combination from the ones provided and a brand kit will be generated for them. The brand kit includes a color palette, their brand name in the color and font they chose, and images of the product they want to offer. Did I mention that as you're doing this a cat named "Brandy" will be cheering you along?! Which brings me to the name of the website, Brandy. 

**Check out my video walk through [here](https://youtu.be/mTRFO0Wi55k)!**

OR

Take a look at the images below to see how the process looks:

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

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

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

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

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

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

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

If you'd like to see my code, check out my [github repo](https://github.com/ciaracloud/apiProject_Brandy) (keep in mind that you will have to add your own api key for Unsplash Images API in order to test out the website).

P.S. I drew Brandy the cat on the digital illustration app Procreate. She was inspired by my own cat, Kiwi.
ES2022 brings at() method for array
Tags: javascript, react, webdev, programming
Published: 2022-02-25 14:54:59

**<u>What is ES2022?</u>**
&nbsp; For those who dont know, ES2022 OR EcmaScript 2022 is standard for scripting developed with the cooperation of **Netscape ** and **Microsoft **and mainly derived from Netscape's **JavaScript**, the widely-used scripting language that is used in Web pages to affect how they look or behave for the user.

Its abbreviated to ES1, ES2, ES3, ES5, and ES6. Since 2016 new versions are named by year (ECMAScript 2016 / 2017 / 2018). 

---

```
const fruits = ['apple','banana','mango','custard'];
```
Now, let say we want to access last element of `fruits` array, but what if **<u>you don't know length of array</u>**.

How will you do that?
Well, there are different approaches to achieve this:

1. **<u>Using length property of array:</u>**

```
let lastElement = fruits[fruits.length - 1]; console.log(lastElement );
```
---

2. Using the slice() method:

```
let lastElement = fruits.slice(-1);console.log(lastElement );
```

---
3. Using the pop() method:

```
let lastElement = fruits.pop();console.log(lastElement);

```

---
But if you look into this methods, this methods main objective is not to output the last element of array but we are **manipulating** in such a way that its gives last element of array. Also, somewere they have performance issue [see here](https://flexiple.com/get-last-array-element-javascript/)

---
So, ECMA2022 brings new method for us i.e., at(index). 
With at(index), you can get the element at the provided `index`.
See example below

```

 console.log(fruits.at(1));  // apple
 console.log(fruits.at(-1)); // custard
 console.log(fruits.at(2)); // mango
```
Working jsfiddle is [here](https://jsfiddle.net/imsabir/1dwtv5xq/8/) : 


Interestingly if you do `fruits.at(-0)` it gives you `apple`. So, merry go round.

Cheers! 
_Follow @msabir_ for more such contents.
Ways to increase images load time speed on webpages / sites
Tags: css, productivity, devops, algorithms
Published: 2022-02-25 14:54:23


1. When loading a background image in a section or div of a website, it is neccessary to add an image tag within the div or section with a style display of none to increase the priority for the load time of that background image.

```
<header class = "hero" style="background-image: url(hero.jpg);"
   <img src = "hero.jpg" alt = "" style = "display: none" />
   <!-- Content -->
</header>
```

> The reason is because the browser won’t request the background-image until it knows it needs it, when the Render Tree is built and the Render Tree is only as fast as your slowest stylesheet. The above code snippet helps to get around it, by making the request start much earlier by simply moving it to your markup. HTML is fast because its declarative nature means it can be preload-scanned.

Sourced from: [Harry Roberts' Tweet](https://twitter.com/csswizardry/status/1276854595382325248/photo/2)
English vocabulary part 1
Tags: english, beginners, giving, javascript
Published: 2022-02-25 14:48:11

**highway _(jaiway)_:** `carretera, autopista`
**trail _(trāl)_:** `sendero`
**narrow _(narrou)_:** `estrecho, angosto`
**hallway _(jalway)_:** `pasillo`
**post office _(poust ofess)_:** `oficina de correos`
**parking lot _(parkin lat)_:** `parqueadero`
**floor _(floor)_:** `planta, piso`
**bought _(bouth)_:** `compró`
**lamp _(lemp)_:** `lampara`
**leave _(lift)_:** `dejar`
**rug _(roog)_:** `tapete`
**leather _(leder)_:** `cuero`
**turn on _(tarn on)_:** `prender, encender`
**living room _(livin rum)_:** `sala`
**dining room _(dainin rum)_:** `comedor`
**wall _(wal)_:** `pared`
Share data between multiple spreadsheets automatically
Tags: spreadsheets, googlesheets, sharedata, automate
Published: 2022-02-25 14:42:46

---
title: Share data between multiple spreadsheets automatically
published: true
description: OceanSheet is a tool that shares data from one spreadsheet with multiple other spreadsheets and let data flow between them automatically every day, with the ability to share only specific spreadsheet cells.
tags: spreadsheets, googlesheets, sharedata, automate
cover_image: https://oceansheet.com/assets/img/img-1.jpg
---

Hello, I'm khalid Hamdani, I want to introduce you to a small project I've been working on for a while.

I have been using spreadsheets on daily basis, they are a great way either to gather data or manipulate it. As well as they are frequently used to export data from or to other systems.

They are great, however, I usually encounter performance issues. Such as, when many people connect to the same sheet with me, it becomes slow and it causes productivity loss. As well as, when I have formulas that are connected to other sheets, It becomes messy and errors occur quite often. And my biggest problem was **how to synchronize and update specific cells of data between two sheets or more everyday**, and let data flow between them.

Here where the idea of [OceanSheet](https://oceansheet.com) came up, which is basically a tool that automates this by creation a reliable connection between all my sheets and update data between them automatically.

As this tool creation is still in process, I would like to know if you are interested in using it someday. Your feedback is really valuable to me. If yes! Please leave your email on oceansheet.com/newsletter so that I can notify you when the application is ready for launch :) .

The following [YouTube video](https://www.youtube.com/watch?v=kaHlspUiYGg)  explains pretty much how it works.

Thank you.
Paracetamol.js💊| #64: Explica este código JavaScript
Tags: webdev, javascript, spanish, beginners
Published: 2022-02-25 14:36:59

## **Explica este código JavaScript**

```js
console.log(`${(x => x)('I love')} to program`)
```

-     A: `I love to program`
-     B: `undefined to program`
-     C: `${(x => x)('I love') to program`
-     D: `TypeError`

Respuesta en el primer comentario.

---
Import large MySQL DB into AWS RDS
Tags: aws, mysql, database, learning
Published: 2022-02-25 14:36:24

Hello Devs,

I am going to share tips to import large MySQL DBs into AWS RDS.

### Why am I writing this ?

I took on one project to help my friend to migrate a site from Google cloud to AWS. As part of this activity moving code and setting up server configuration was easy and smooth. Main challenge was moving DB to AWS RDS. You might be thinking why ? Reason is DB was very heavy like a single table having 1 million records. I tried to import it by using a general method like `mysql - u username - p -h hostname -A database < database.sql ` I tried this almost 10-15 times every time the server connection pipe broke. Tried to increase TTL values also but it doesn't help me to solve this issue.

While searching on google I came across [nice explanation video](https://www.youtube.com/watch?v=ecRT_GPQPGE) and a new method which was new learning for me.  It was a simple command `source path of file`.

Curious to know ? What should I do ?

Let me explain the option to import a heavy database. First understand what the `source` command is.

As the name says `source` it is similar to running mysql commands only. But this can be used to run chunks of mysql commands in batch mode.

Normal MySQL command will run like this


```
mysql > select * from tables;
mysql > insert into column tables values;
```
similar way but what you can do is dump the above command into one file like `dbquery.sql` and keep it one of the destinations.

```
ssh> nano dbquery.sql
ssh> ls
ssh> dbquery.sql
ssh> pwd
ssh> /home/ubuntu
```
Path for file will be `/home/ubuntu/dbquery.sql`

Then login to MySQL into the terminal.

```
ssh> mysql -u username -p password
mysql> use database;
mysql> source /home/ubuntu/dbquery.sql;
Query OK, 11513 rows affected (0.56 sec)
Records: 11513  Duplicates: 0  Warnings: 0

Query OK, 11464 rows affected (0.80 sec)
Records: 11464  Duplicates: 0  Warnings: 0

Query OK, 11531 rows affected (0.56 sec)
Records: 11531  Duplicates: 0  Warnings: 0

Query OK, 11352 rows affected (0.56 sec)
Records: 11352  Duplicates: 0  Warnings: 0

Query OK, 11714 rows affected (0.66 sec)
Records: 11714  Duplicates: 0  Warnings: 0

Query OK, 11581 rows affected (0.77 sec)
Records: 11581  Duplicates: 0  Warnings: 0

Query OK, 11608 rows affected (0.56 sec)
Records: 11608  Duplicates: 0  Warnings: 0

Query OK, 11230 rows affected (0.57 sec)
Records: 11230  Duplicates: 0  Warnings: 0

Query OK, 11701 rows affected (5.36 sec)
Records: 11701  Duplicates: 0  Warnings: 0

Query OK, 11436 rows affected (2.86 sec)
Records: 11436  Duplicates: 0  Warnings: 0
```
This will start dumping into the database show record till now.

Hope it will solve your issue if you come across a similar problem. Feel free to comment if you have any issues.
If you like my blog please don't forget to like the article. It will encourage me to write more helpful articles. You can reach out to me over my twitter handle @aviboy2006
PHP vs Python: Which is better for Web Development
Published: 2022-02-25 14:35:58

Now you must be wondering which programming language is the best choice isn’t it? The two programming languages that is PHP and python serve different purposes. As discussed, PHP is widely used in web development and python is used for performing a series of tasks in software or web development. However, both these languages have their respective advantages and disadvantages. You can choose any language based on your requirement and interest with that.
`[read more](https://www.ateamsoftsolutions.com/php-vs-python/)`
Kotlin vs Flutter: Which One Is Better?
Published: 2022-02-25 14:31:18


 Select File .doc / .docx / .pdf / .txt
Words: 131
Kotlin is a journal purpose statically typed programming language developed by JetBrains in 2010 And later released in 2016. Here statically typed means the type of the variable is known at the compile time. Kotlin is interoperable with Java, which means both languages can share and use the information or we can say we can use Kotlin side by side with java and just like the java compiler, It is a very easy and friendly language and Kotlin languages developed by selecting the good features of different languages like Java, JavaScript, C# Etc. Also in 2017, Google announced Kotlin as an officially supported language for Android.
[](https://www.ateamsoftsolutions.com/kotlin-vs-flutter-which-one-is-better/)
Redux Toolkit
Tags: redux, reduxtoolkit
Published: 2022-02-25 14:27:39

## Redux
Redux is an open-source JavaScript library for managing and centrailizing application state. It most commonly used with libraries such as react or anguler for building user interfaces.A popular state management library. Redux helps you write application that behave consisitently, run in different environment and are easy to test.

## Redux Toolkit

The Redux Toolkit package was developed to be the new standard way to write Redux code, handling some major concerns about Redux itself. One important thing to take away is that Redux Toolkit  provides us with powerful data fetching and caching capability. 

Using redux toolkit  was originally created to help address three mejor concerns about Redux:
	

- Configuring a Redux store is too complicated.
- I have to add a lot of packages to get Redux to do anything 
  useful.
- Redux requires too much boilerplate code.

**What’s include Redux Toolkit**

**configureStore()**  

- It can automatically combine your slice reducers , adds whatever redux middleware you supply includes redux-thunk by default and enables use of the redux extention.

**createReducer()**

- Reducer support directly mapping specific action types to case reducer function that will update the state when that actionnis dispatched.

**createAction()**

- Redux Toolkit provides a function called createAction. Which simply generates action creator that uses the giveb action type , and turns its argument into the payload.

**createSlice()**

- createSlice is a higher order function that accepts an initial state, an object full reducer function and slice name. it automatically generates action creators and action types that corresponding the reducers and state.

**createSelector()**

- selectors typically expect the Redux state object as an argument , while slice reducers only have access to specific subset of the entire Redux state.

## Installation

**Redux Toolkit Npm  An Existing app.**

npm  install @reduxjs/toolkit
Full Pytorch Training Pipeline on Image Classification [ part2 ]
Tags: tutorial, python
Published: 2022-02-25 14:25:27

Hello everybody! Today, we will continue with what we left off in [the previous blog](https://blogbybao.wordpress.com/2022/02/13/full-pytorch-training-pipeline-on-image-classification-task/).

I first talk about the Tensorboard. Tensorboard is a visualization toolkit of TensorFlow, which is also a machine learning and deep learning framework. Tensorboard can be used for displaying the images in the dataset, drawing loss and accuracy graphs, analyzing the components of a neural network.

Continue to read this [here](https://blogbybao.wordpress.com/2022/02/14/full-pytorch-training-pipeline-on-image-classification-task-part2/)!
Redux-Toolkit createAsyncThunk
Published: 2022-02-25 14:21:33

Redux-Toolkit createAsyncThunk

While a Redux store possesses great state operation features, it has no indication how to deal with asynchronous sense. Redux eschews handling asynchronous senses simply because it does n’t know what you want to do with the data you brought, let alone if it’s ever brought — hello, crimes. 
 Middleware has been used in Redux operations to perform asynchronous tasks, with Redux Thunk’s middleware being the most popular package. A middleware is designed to enable inventors to write sense that has side goods — which refers to any external commerce outside an being customer operation, like costing data from an API. 
 With Redux Toolkit, Redux Thunk is included by dereliction, allowing createAsyncThunk to perform delayed, asynchronous sense before transferring the reused result to the reducers. 
 In this composition, you ’ll learn how to use the createAsyncThunk API to perform asynchronous tasks in Redux apps. 

 The train over is a Redux slice in a React app. A slice is a function that contains your store and reducer functions used to modify store data. The createSlice API is set to be the norm for writing Redux senses. 
 Within createSlice, coetaneous requests made to the store are handled in the reducers expostulate while extraReducers handles asynchronous requests, which is our main focus. 
 Asynchronous requests created with createAsyncThunk accept three parameters: an action type string, a message function ( pertained to as a payloadCreator), and an options object. 
 posts/ getPosts is the action type string in this case. 

Dispatching actions in components
 
Whenever this function is dispatched from a element within our operation, createAsyncThunk generates pledge lifecycle action types using this string as a prefix 
. pending posts/ getPosts/ pending 
 fulfilled posts/ getPosts/ fulfilled 
 rejected posts/ getPosts/ rejected 
 On its original call, createAsyncThunk dispatches the posts/ getPosts/ pending lifecycle action type. 

Handling errors in createAsyncThunk

The payloadCreator also executes to return either a result or an error. 
 In the event of an error, posts/ getPosts/ rejected is dispatched and createAsyncThunk should either return a rejected pledge containing an Error case, a plain descriptive communication, or a resolved pledge with a RejectWithValue argument as returned by the thunkAPI.reject With Value function ( more on thunkAPI and error handling shortly). 
 Still, the posts/ getPosts/ fulfilled action type gets dispatched, If our data cost is successful. The options parameter is an object containing different configurations for the createAsyncThunk API.
Conclusion
 The three lifecycle action types mentioned before can also be estimated in extraReducers, where we make our asked changes to the store.. By using useSelector and useDispatch from reply-redux, we can read state from a Redux store and dispatch any action from an element, independently.
Top 10 Mobile App Development Companies in Brisbane 2022
Published: 2022-02-25 14:19:43


 Select File .doc / .docx / .pdf / .txt
Words: 112
The [mobile app development](https://www.ateamsoftsolutions.com/top-10-mobile-app-development-companies-in-brisbane-2022/) market is advancing at an astonishing speed. To compete and live in this digital era, you must get familiar with the new trends and build a mobile app to scale your business. Today, smartphones are the key to success in digital media. Statista predicts that global revenue from mobile applications is projected to hit $613 billion by 2025, which is up from $318 billion in 2020. With this expansion comes a plethora of options for mobile app developers in Brisbane and engineers to supercharge their apps and provide their consumers with top-tier experiences.
Mongoose
Published: 2022-02-25 14:19:31

What is Mongoose

Mongoose is an elegant Object Data Modeling or ODM. Mongoose manages relationships between data, provides schema validation. Basically Using mongoose a user can define the schema for the documentation in a particular collection. Basically, mongoose provides a lot of convenience in the creation and management of data in MongoDB.

Mongoose Benefit.

Some benefits of using Mongoose, Basically when we use Mongoose we have schema to work against in our application code and explicit relationship between our MongoDB. And mongoose is equivalent to tables in relational databases. They can hold multiple JSON documents.



There are a Few types of Schema that are String, Number, Date, Buffer, Boolean, Mixed, ObjectId, Array, Decimal, Map, Schema.
What are Redux, Typescript, Functionality, and Base64? use in our New and Existing project?
Published: 2022-02-25 14:12:36

I just learned new technology and am still learning. Those are Redux, Typescript, and Base64. Now I write below some short notes about this topic from their documentation.

Typescript: TypeScript is a strongly typed programming language that builds on javascript. It gives us better tooling at any scale.

Redux: Redux - A predictable state container for js apps. It works with any UI layer; it has a large ecosystem of addons to fit our needs. It helps us to write an application that behave consistently, run in different environments, and is easy to test. Its devtools make it easy to trace when, where, why, and how our application’s state changed.

Base64: It is encode-decode schemes that represent binary data in sequences of 24 bits that can be by four 6-bit Base64 digits.

Now I told how we add Redux in ours react project!

React Redux is the official React UI bindings layer for Redux. Below I take a image for installation Redux on React in a new Project
After installation we see that our file extension will be on .tsx format. But if we rename file .ts format; this code will show error. Because typescript file name will be on .tsx extension format.. Than we will continue our projects.



Setup React. - Setup folder with npm and git. - Create HTML and Javascript (React) file.

Build and run.
Extra useful configs. - Babel config for CSS files.
That’s all from today. Best of luck everyone.

Functionality
There are a lot of reasons why users might choose one platform over another, but functionality and the kind of tasks they want to complete is huge driver. For example, a desktop computer might be the best platform when users need to get intensive work done across a long stretch of time. Alternatively, mobile phones are portable, making them ideal for more casual and immediate tasks like texting, emailing, and checking social media while on-the-go. Your designs for each platform will likely vary based on how and when you expect users to need the product.

Before This Project, I Used only CSS Framework For Responsiveness. But For This project, I need to use custom Media Queries and I gained Cross Platform Responsive Experience.