teleren/devto huggingface dataset:
Supermeme | Made with Next JS
Published: 2022-07-05 03:48:44

![Supermeme | Made with Javascript | Next JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1656339099/large_supermeme_made_with_next_js_b4d9a72957.png "Supermeme | Made with Javascript | Next JS")


### AI powered original meme generator

> Generate original memes powered by AI in 110+ languages. Search for meme templates describing an emotion or an action and get a share-worthy meme in secs..
> 
> Step up your meme marketing game with Supermeme.
> 
> Search for meme templates describing an emotion or an action and get a share-worthy original AI-generated meme in seconds..
> 
> Who is it for?
> Supermeme.ai is your chief meme officer (CMO) whether you are an individual or a business. Supercharge your meme game with the help of AI.
> 
> 


Read More here about Supermeme and find the link to view the showcased website

[Supermeme | Made with Javascript | Next JS](https://madewithjavascript.club/posts/supermeme-made-with-next-js)

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Supermeme on Twitter](https://twitter.com/withjavascript/status/1544165142103228417?s=20&t=cplk99ufExbkfukzgxH0Sw)
 |
| Medium | [Supermeme on Medium](https://medium.com/@madewithjavascript/supermeme-made-with-next-js-f8ec93577996)
 |
| Facebook | [Supermeme on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02nTrLvUfwohAPKD4WfP2nm5xEztpLeAQpzRDMKMgtirkda3uGowDRVkQm3zbYPKX4l)
 |
| Tumblr | [Supermeme on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/688906839552901120?source=share)
 |
| LinkedIn | [Supermeme on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6949930950105456640)
 |
| Pinterest | [Supermeme on Pinterest](https://pin.it/xXorUGE)
 |


Filled Under:


 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with Next JS](https://madewithjavascript.club/categories/next-js)
    
Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
Using open source libraries/frameworks with Real Clients.
Tags: opensource, react, programming, career
Published: 2022-07-05 02:45:55

On the previous weeks we’ve been working on a project developed for a real client, one of the most important things that I’ve learned on my first experience with a client was time management. On this project we worked with React js which is an open source library as  Material UI. 

### Challenges when you contribute to an Open source project

The first time I tried to contribute to an open source project I didn’t know they have guidelines, there you can find how to start contributing. Open source projects are managed by big communities, but there’s also people who works full time as open source contributor this people usually are the ones who approve the pull requests. 

Normally you have to look at the open issues, try to reproduce it on your computer and start working on a solution. But also you have to communicate on the github thread issue that you are currently working on a solution or that you’re interested on solving it. This is how you’re going to be assigned to that issue, and let everyone know that you’re currently solving it. 

In case you decided to skip the thread conversation, what can happen is that anyone else solve it first and then you found out that the issue is closed. That’s why it is important to have communication when you’re working on a open source project. 

On this week, I’ll be working on open source projects and learning more about solving issues, develop new features. This week I decided to start solving a Material UI issue related to style component and margins I’ll update you if I find a solution.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1ygeaxjncryxayoy8p7.png)
Analyzing Trends in Basketball. Vol 1
Tags: sports
Published: 2022-07-05 03:12:09

Each year, millions of teenage boys play basketball for their high school. From there, those who are good enough, go on to play and college. It's only the truly exceptional, that make it to the NBA. In fact, less than 4,500 men have ever played professional basketball in its 77 year history. But what's ever more fascinating is how the game has evolved as much in the last 7 years as it did in the previous 70.

The year is 1982, and the NBA Leader in 3 pointers is Don Buse of the Indiana Pacers. He scored a whopping 73 in 82 total games. For comparison, Steph Curry made 285 in only 64 games in the 2021-2022 NBA season. So what happened? Why did the NBA Leader in 3 pointers per game go from less than 1 per game to 4.5.

In this series, I'll be discussing how data analytics, and a few special players changed the game. We'll be taking a look at some basic formulas/code to explain the rules of the game and how to optimize your chances of winning from the eyes of a data scientist.

So what is a 3 point shot? Simply put, the 3 point shot is a shot attempt beyond the 3 point line on a basketball court. The idea for it is that because it is a more difficult shot than a traditional 2 point shot, it should be worth more if you make it. There are other shots called free throws that are worth 1 point per attempt, but for now, let's focus on the comparison of the 2 and 3 point shot.

Much of the credit for the recent evolution of basketball to beyond the 3-point line is credited to Steph Curry but this is a trend that has been happening gradually since its adoption by the NVA in the 1979-80 season. 10 years ago the NBA 3 point leader was Ryan Andersen of the Orlando Magic with 166 made in 61 games or 2.7 per game. It seems so simple right? 

As this series continues we will further examine the data to see if there is a correlation between 3 pointers attempted/made and wins? In order to do that we will have to determine the values of the winner's relative to that of the opponents and compare this across random samples from both recent and passed years.

If there is a correlation, that could explain why NBA teams are shooting and making so many more 3 pointers each year. But what, if anything, would cause them to revert back to playing focusing more on the 2 point shot? We will examine at what percentage a player would need to make their 2 point shots and free throws in order to revert back from the current 3 point trend.
  


Credit all stats to landofbasketball.com
MariaDB Quick-tip #3 - Prepending zeros
Tags: mysql, sql, mariadb
Published: 2022-07-05 02:43:49

## MariaDB tips and tricks

This is part of a series of quick tips and tricks I have accumulated over the year, that I think can be useful for others.
If you have similar short tips and tricks please leave a comment.

### Prepending zeros

Some data formats require that your numbers have prepended zeros so you can get the MariaDb to format the number in your query. This is done by using the `LPAD(str, len [, padstr])` function and it is alot more elegant than what you have to do to achieve the same result on the [SQL Server](https://dev.to/coderallan/sql-quick-tip-3-prepending-zeroes-3cl0).

```sql
CREATE OR REPLACE TEMPORARY TABLE names (Name VARCHAR(50), ImportantNumber INT);

INSERT INTO names (Name, ImportantNumber) 
VALUES ('Joe', 2), ('Bob', 4), ('Anne', 42), ('Jane', 134);

SELECT Name, LPAD(ImportantNumber, 4, 0) AS ImportantNumber
  FROM names
```

![DBeaver screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlxspwjefqwt4x7lhvfz.png)
Comparing English and Spanish Words in JavaScript
Tags: webdev, javascript, beginners, programming
Published: 2022-07-05 02:39:10

I've been working on a [single page web application](https://developer.mozilla.org/en-US/docs/Glossary/SPA) using [React] (https://reactjs.org/). One feature uses a `JSON` list of Colombian cities:
```javascript
"colombiaCities": [
    {
      "city": "Bogotá",
      "lat": 4.6126,
      "lng": -74.0705,
      "country": "Colombia",
      "iso2": "CO",
      "adminName": "Distrito Capital",
      "capital": "primary",
      "population": 9464000,
      "populationProper": 7963000
    },
// ...515 other cities
```
A user can search for a country to get some details. Their input will be in English, with no accent marks. They could type them if they wanted to, but they choose not to. That's not very cosmopolitan of them.

This user will fail to get their information with no [accent marks] (https://en.wikipedia.org/wiki/Diacritic) (sometimes). When the accentless string is compared to the accented string in the object above (equalizing case using [toLowerCase()] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)), it is compared character by character. All is well until the `a` in `Bogota` is put up against `á` in `Bogotá`. They need a way to compare these words as equals.

Thus began my search. I first came across the [`normalize()` method] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize). It looks like this:
```javascript
const str = 'ÁÉÍÓÚáéíóúâêîôûàèìòùÇç';
const parsed = str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
console.log(parsed)
```
[Regular Expressions] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) still scare me off, so I moved on to the next search result: [localeCompare()] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare). This looked more my speed, plus it's already doing the comparing I need. It looks like this:
```javascript
const enStr = 'Bogota'
const esStr = 'Bogotá'
enStr.localeCompare(esStr, 'es-CO', { sensitivity: 'base' })
```
I actually looked into this term before `localeCompare()`: Full Text Search. It's pretty heavy duty. In JavaScript, this can come in the form of a library dependency like [FlexSearch] (https://github.com/nextapps-de/flexsearch). Far too bulky for the humble sorting task I have at hand.

I will choose `localeCompare()` for my word comparison and city sorting features.
Expense Tracker (To-Dos)
Published: 2022-07-05 02:35:41

This blog post mainly serves as a to-do list of items I would like to include in my project. 

As it stands, this expense tracker is an app that allows you to fill out a form of your transactions, and add that transaction to a list. It adds or substracts the amount depending if it's in an income or expense class! You can currently click buttons and sort through the expenses or income classes.

Some items I would like to add to this project are:
- Edit Function
- Delete Function
- Sort Function (by date, company, etc)
- I would like to include images as well (images of receipts and even purchases)
- Login/logout functionality

I will keep this post updated!
Using Form Elements and Semantic UI React: Extracting values
Published: 2022-07-05 02:28:38

Hi there! 
I was in the middle of my React project from one of my courses. In it, I had to build a form and I decided to use Semantic UI React for my project.

It took me quite a few tries to figure out how to extract the information from the values in my form. Some of the form inputs, specifically, using radio buttons and dropdowns were nested using Semantic UI. Having these nested elements, traditional ways of extracting information like `e.target.value` or `e.target.checked` did not work. Here is what console.log(e.target) looks like: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrc5hetxranxsoj0abib.png)

You can see it logs the label and not the radio button where we could extract the value.

Luckily, I found an [article](https://lauren-gifford.medium.com/controlled-select-dropdown-using-semantic-ui-for-react-a934af3ca326) by Lauren Gifford that explained that Semantic UI React actually passes a data object along with the event object... And so, the heavens opened up! 

![Cloud Image](https://media4.giphy.com/media/yB3gwsCaymSglI1Jqt/giphy.gif?cid=ecf05e478obqj3ig52ur6ozv3qcmh0yr4ea0mwkdxr5qv4vl&rid=giphy.gif&ct=g)

In order to extract information from Semantic UI React radio buttons or dropdowns, you can include the `data` parameter to your function. This is what it looks like when I console.log(data):

![Console.log Data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9056c1t71eghclie08ry.png)

Here you can see all the keys that are passed, including value! We can now access the values of our dropdowns and radio buttons using `data.value`. Here is an example of a function using the event and data as parameters:

```javascript
 function handleChange(e, data) {
    if (data.name === 'typeGroup') {
      setType(data.value)
    } else if (data.name === 'accountGroup') {
      setAccount(data.value)
    } else if (e.target.name === 'notes') {
      setNotes(e.target.value)
    } else if (data.name === 'category') {
      setCategory(data.value)
    }
  }
```
 
I hope this helps! Happy coding!
ASR of ML Kit: Make Your App Recognize Speech
Tags: hmscore, machinelearning
Published: 2022-07-05 01:38:24

Our lives are now packed with advanced devices, such as mobile gadgets, wearables, smart home appliances, telematics devices, and more.

Of all the features that make them advanced, the major one is the ability to understand user speech. Speaking into a device and telling it to do something are naturally easier and more satisfying than using input devices (like a keyboard and mouse) for the same purpose.

To help devices understand human speech, HMS Core ML Kit introduced the [automatic speech recognition](https://developer.huawei.com/consumer/en/doc/development/hiai-Guides/ml-asr-0000001050066212?ha_source=hms3) (ASR) service, to create a smoother human-machine interaction experience.

## Service Introduction
ASR can recognize and simultaneously convert speech (no longer than 60s) into text, by using industry-leading deep learning technologies. Boasting regularly updated algorithms and data, currently the service delivers a recognition accuracy of 95%+. The supported languages now are: Mandarin Chinese (including Chinese-English bilingual speech), English, French, German, Spanish, Italian, Arabic, Russian, Thai, Malay, Filipino, and Turkish.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3dstyybzob590rinf0u.PNG)

## Demo
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqdilepnnuaovypozd3w.gif)

## Use Cases
ASR covers many fields spanning life and work, and enhances recognition capabilities of searching for products, movies, TV series, and music, as well as the capabilities for navigation services. When a user searches for a product in a shopping app through speech, this service recognizes the product name or feature in speech as text for search.

Similarly, when a user uses a music app, this service recognizes the song name or singer input by voice as text to search for the song.

On top of these, ASR can even contribute to driving safety: During driving — when users are not supposed to use their phone to, for example, search for a place — ASR allows them to speak out where they want to go and converts the speech into text for the navigation app which can then offer the search results to users.

## Features

- Real-time result output

- Available options: with and without speech pickup UI

- Endpoint detection: Start and end points of speech can be accurately located.

- Silence detection: No voice packet is sent for silent parts.

- Intelligent conversion of number formats: For example, when the speech is "year two thousand twenty-two", the text output by ASR will be "2022".

## How to Integrate ML Kit?
For guidance about ML Kit integration, please refer to its [official document](https://developer.huawei.com/consumer/en/doc/development/hiai-Guides/service-introduction-0000001050040017?ha_source=hms3). Also welcome to the [HUAWEI Developers](https://developer.huawei.com/consumer/en/?ha_source=hms3) website, where you can find other resources for reference.
Implement Efficient Identity Information Input Using ID Card Recognition
Tags: machinelearning, hmscore, ocr
Published: 2022-07-05 01:35:25

Many apps require users to verify their identity in order to use their services offline (such as checking into a hotel) and online (booking a train/air ticket, playing a game, for example). This requires identity document details to be manually entered, which can sometimes be let down by typos.

With the ID Card Recognition feature from [HMS Core ML Kit](https://developer.huawei.com/consumer/en/hms/huawei-mlkit/?ha_source=hms3), entering incorrect details will be a thing of the past.

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

## Overview
This feature leverages optical character recognition (OCR) technology to recognize formatted text and numbers of ID cards from images or camera streams. The service extracts key information (for example, name, gender, and card number) from the image of an ID card and then outputs the information in JSON format. This saves users from the trouble of manually entering such details, and significantly cuts the chances of errors occurring.

**Supported Information**

| **ID Card**                                             | **ID Number** | **Name** | **Gender** | **Validity Period** | **Birthday** |
|---------------------------------------------------------|---------------|----------|------------|---------------------|--------------|
| Second-generation ID card of Chinese mainland residents | √             | √        | √          | √                   | -            |
| Vietnam ID card                                         | √             | √        | √          | -                   | √            |

## When to Use
Apps in the mobile payment, traveling, accommodation, and other fields require an ID document image for identity verification purposes. This is where the ID Card Recognition service steps in, which recognizes and inputs formatted ID card information, for smooth, error-free input.

Take an e-commerce app for example. You can protect the security of your business by guaranteeing that all users shall verify their identity.

## Service Features

- **All-round card recognition**: Recognizes all eight fields on the front and back of a second-generation ID card of Chinese mainland residents.

- **Fast recognition**: Quickly recognizes an ID card in just 545.9 milliseconds.

- **High robustness**: Highly adapts to environments where the lighting is poor or conditions are complex. In such environments, this service can still deliver a high recognition accuracy of up to 99.53% for major fields.

After integrating this service, my demo app received very positive feedback from its testers, regarding its fantastic user experience, high accuracy, and great efficiency.

I recommend you try out [this service](https://developer.huawei.com/consumer/en/doc/development/hiai-Guides/idcard-recognition-0000001050040063#section18151911047?ha_source=hms3) yourself and hope to hear your thoughts in the comments section.
Java 8 to Kotlin, Clojure and Java 17 - Part 2 Kotlin
Tags: clojure, java, kotlin, refactorit
Published: 2022-07-05 00:30:02

#100DaysOfCode #Java
- [Java 8 Example](https://dev.to/jorgetovar621/from-java-8-to-kotlin-clojure-and-java-17-5gjb)
- [Kotlin Example](https://dev.to/jorgetovar621/java-8-to-kotlin-clojure-and-java-17-2-45d5)

## Implementing Kotlin example. BookParser

Next step: move the code to Java 17, then Kotlin and Clojure
https://github.com/jorgetovar/from-java-8-to-java-17-kotlin-clojure/pull/2/files
RESTful verbs vs Real actions
Tags: webdev, story, api, discuss
Published: 2022-07-05 00:27:25

---
title: RESTful verbs vs Real actions
published: true
description: a story of an application
tags: 
  - webdev
  - story
  - API
  - discussion
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogzk7b167cuxcwcmc057.jpeg
# Use a ratio of 100:42 for best results.
---

In http rest APIs we are stuck with a very limited set of verbs. They are essentially:
 - get: to load data
 - post: to create new data
 - put: to replace data
 - patch: to update data
 - delete: to remove data

These are the verbs of a typical CRUD operation. They are very effective. But let me tell you a story:

> In the afternoon you patch your location to your mothers house. After that you get her data and patch her status to happy. 

This is a small situation, told as if you tell a story to a database. Here is the same story, but for the application layer:

> In the afternoon you drive into the city to your mothers house. After you see her, you notice her pretty dress. You make her a nice compliment. That makes her very happy.

What version of the story do you prefer?
Process over Goals, Rituals to kickstart
Tags: productivity
Published: 2022-07-05 00:02:33

Trust the process.

Also have some rituals to start the work.

There is a famous mantra in productivity.

"Don't stop till you finish". A coach recently told me an interesting twist on this.

"Won't stop until I start". The idea is to flip the finish to start.

The trick for me at least is to make the start very trivial. And I think rituals unlock that.
How to access .env variables in nuxt3
Tags: nuxt, nuxt3, env
Published: 2022-08-15 12:05:34

---
title: How to access .env variables in nuxt3
published: true
date: 2022-07-05 00:00:00 UTC
tags: ['nuxtjs','nuxt3','env']
canonical_url: https://www.codef.site//blog/nuxtjs/how-to-access-env-variables-in-nuxt3
---
!["Nuxt 3 env"](https://www.codef.site/img/nuxtjs/nuxt_3_env.jpg)

## Create .env file

Create <code-inline>.env</code-inline> file in the root directory of your project. Add your necessary variables to it.

## Add runtime config

Head over to <code-inline>nuxt.config.ts</code-inline> file. Under <code-inline>defineNuxtConfig</code-inline>, add <code-inline>runtimeConfig</code-inline> object and then public and pass the variables as key and value.

```js
export default defineNuxtConfig({
    runtimeConfig: {
        ...,  // declare private variables here
        public: {
            MODE: process.env.MODE, // this is public 
        }
    }
});
```

## useRuntimeConfig

To access the variables, use <code-inline>useRuntimeConfig()</code-inline> composable from nuxt. There are two properties to access by default. <code-inline>public</code-inline> and <code-inline>app</code-inline>. Since we added our variables in public we can get it from there.

```js
const config = useRuntimeConfig();
console.log(config.public.MODE);
// config.SOME_PRIVATE_VAR
```