teleren/devto huggingface dataset:
AudioSign: Converting audio to animated sign language (P2)
Tags: hackwithdg, showdev, ai
Published: 2022-03-17 11:07:57

In the last post, we talked about the idea of taking deepgram and using it to implement a speech-to-animated sign language system.

### 💭 My Deepgram usage
Deepgram is a Speech-To-Text platform that leverages deep learning to transcribe text from voice data.

![STT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvqo7njquy95wogaaovo.png)
 
They make use of end to end deep learning, which entails the system(model) trying to figure out the transcript from the audio without having to break it down into parts like phonemes, words and such. I believe the main reason for this is to make learning new tasks easier and allows for more robustness in the system.

Deepgram has very low latency and high accuracy when using the live/recorded audio transcription services and as such is a reliable choice. So, what I had in mind was to go a step further with the transcriptions and use that to animate a character signing that data.

Now the question is how to transfer the transcription system into one for the signing of languages.

Signing differs from the spoken word as it is not a direct translation, it deals more with concepts than words. It uses other details like tone, visual cues, facial expressions to make good translations. Developing a system to do all this would be a worthwhile undertaking as it would help the **70+ million people** that sign have more impactful interactions. 

The applications of such a system include the following:
- Live signing of videos on platforms for streaming, news and other forms of media to make them more inclusive.
- Signing of pre-existing media, archives, history and other forms of information that was previously only accessible to those who weren't hearing challenged. 
- An advancement in holographic technology could also be used in conjunction with the system such that when an individual is speaking, a real-time 3d rendering of the signing is taking place.

### 🛠 Possible ways we can achieve this 
In the next and final post on the innovation idea track, I'll be writing about how we could achieve this with current deep learning techniques and technologies.

Stay tuned for more and have a great day 👋
Apple will only accept apps built with Xcode 13 starting next month
Tags: reactnative, javascript, xcode13, apple
Published: 2022-03-17 11:06:45


Starting next month, Apple will begin mandating apps submitted to the App Store to be built with Xcode 13.

In an announcement on Tuesday, Apple revealed that come April, it will only accept apps that are built using Xcode 13, the latest version of Apple’s app development kit. The move will go into effect from April 25. By mandating Xcode 13, Apple will ensure that all new apps submitted to App Store are compatible with the latest versions of iOS, iPad OS, watchOS, tvOS, and macOS.

Starting April 25, 2022, iOS, iPadOS, and watchOS apps submitted to the App Store must be built with Xcode 13, which includes the SDKs for iOS 15, iPadOS 15, and watchOS 8.

Apple notes that developers can take advantage of all the new features and APIs introduced with iOS 15, watchOS 8, and macOS Monterey, including ARkit 5, SwiftUI, SharePlay, and Safari Extensions. Apps built with Xcode 13 will continue to support older versions of Apple software, such as iOS 14 and macOS Big Sur.

“Make the most of the exciting features in iOS 15, iPadOS 15, and watchOS 8 to offer even more intuitive and valuable user experiences. Improve your app’s performance by refactoring your code to take advantage of asynchronous functions in Swift. And with the latest updates to SwiftUI, you can enhance your apps with new features, such as improved list views, better search experiences, and support for control focus areas,” wrote Apple in its blog post.

The move comes after Apple released iOS 15.4 and iPadOS 15.5 to the public last week. The latest iOS version introduces several new features, including 112 new Unicode 14.0 emoji, Health and Wallet support for EU COVID-19 vaccination certificates, the ability to use Face ID when masked, Apple Card widget, support for setting up custom email domains, and other smaller, quality-of-life improvements.
How much do you know about headless WordPress?
Published: 2022-03-17 10:54:18


When someone wishes to create a website, WordPress is the only name that first popup in his mind, the reason is its convenience, free of cost, easy to build, and much easier to maintain. WordPress is something beyond an introduction, even after the emergence of several other CMS and website development platforms, it is still leading the web industry with the most share in powering websites. 

When we started web development, our vision was very clear right from the beginning that we will help the companies develop custom websites. Soon we realized that WordPress is the most demanded and ultimate solution to web development that can help businesses and individuals by giving them freedom of creation, maintenance, and enhancement.    

Why did we move from traditional WordPress to headless WordPress?

The answer is very simple, we wanted to adopt modern technologies for designing the front end and improve the website performance by providing an excellent user experience with pixel-perfect frontend, blazing fast website speed, enhanced security, improved SEO performance, and highly scalable website structure. 

This can be directly related to modern stacks web development like #decoupled approach or #Jamstack. Luckily all this is possible with WordPress being an open-source platform allowing to use of APIs and isolating the frontend by using the latest JavaScript frameworks or static site generators like NextJS. 

We did our market research and found some interesting facts about WordPress as headless technology, like

👉 80% out of active websites have been developed using a theme system like that in WordPress, Joomla, Wix Webflow, etc.
👉 The average load time for the websites is almost 6 sec to 16 sec for desktop and mobile browsers respectively.

So we realized that #headless WordPress is a great solution for improving the website performance by integrating backend only WordPress with #NextJS, 
Here are some of the performance benefits; 

✅ 10x increase in website speed
✅ Less than 3 sec website load time
✅ 3x increase in conversion rates
✅ Highly scalable 
✅ Enhanced SEO 
✅ Cost efficient by hosting via CDN
✅ ZERO security threats
✅ Easier to manage using #Gutenberg
✅ Pixel Perfect Design using #Tailwind CSS
✅ Build with the mobile-first approach

If you are also struggling with the website performance, then feel free to reach out to [Fastvert](https://www.fastvert.com/) | Headless WordPress Development Company.

PS: Performance is the key to business growth.
The JS canvas editor Pikaso has been around for a year
Published: 2022-03-17 10:51:47


Pikaso, an open source library I created, has just been updated to version [2.4.0](https://www.npmjs.com/package/pikaso/)

It added a lot of new features to the core library in that [release](https://github.com/pikasojs/pikaso/releases/tag/v2.4.0).

It seems like a good time to introduce the library here since I believe it might be useful to the community.

In essence, [Pikaso](https://github.com/pikasojs/pikaso) is a seamless, [fully typed](https://github.com/pikasojs/pikaso/tree/master/src/types) and [fully tested](https://app.codacy.com/gh/pikasojs/pikaso/dashboard) library that includes a lot of features out of the box that make working with canvas incredibly easy.

It provides all basic shapes, pencil and shape drawing, images and filters, SVG, groups management, flip, rotation, export to image and json, import from json, events, undo/redo, snap to grid and many other features.  (more)

Additionally, it comes with a powerful [cropper](https://pikaso.app/#/core/cropper) with four modes.

Almost every feature, such as color, style, and anything else, can be [customized](https://pikaso.app/#/getting-started/configuration).

This library can be used with any library, such as [React](https://codesandbox.io/s/pikaso-react-hook-example-i0uwg), Angular, [Vue](https://codesandbox.io/s/vue3-example-o3cig), Svelte or Vanilla Js
In addition to contributing the library, I am constantly adding new features to it.

With Pikaso, you can design your own image cropper, Social Network image editor, T-shirt maker, avatar maker, Canva-like app, or even create your own Figma-style app.

More details can be found in the Github repository [https://github.com/pikasojs/pikaso](https://github.com/pikasojs/pikaso) and you can view the documentation and demos at [https://pikaso.app](https://pikaso.app) or [API reference](https://pikaso.app/api/classes/Pikaso.html)

Thank you for giving the [project](https://github.com/pikasojs/pikaso) a Github star if you liked it, because it will help others find the project and trust that, and it motivates me to spend more time on it. Appreciate it.

https://github.com/pikasojs/pikaso
25+ Awesome Flutter Slide Hack Projects with Source Codes
Tags: flutter, github, dart, webdev
Published: 2022-03-17 10:49:31

Check out the 25+ awesome flutter projects along with source codes that participated in the Flutter Slide Hack. 

![Flutter Slide Hack Projects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cqet710zwuy1a0pe7wk.png)

Some of these projects definitely push the boundaries of what we can achieve using flutter. One can definitely learn quite a lot from these projects. 

[Click Here](https://fluttergems.dev/flutter-puzzle-hack/) to view the complete list of projects & source codes.
Error in rbind(deparse.level, ...) : numbers of columns of arguments do not match
Tags: r
Published: 2022-03-17 10:35:38

Problem :
I have about 25 dataframes which are essentially the frequency counts of my elements stored in the column called Elements. They all have some of the different and some of the same elements in my Elements columns so they just look like below :

dataframe called DataFrame1

Elements    freq
boby         4324234
janey        433
hamy        4324
timy         22
dataframe called DataFrame1
Elements     freq
boby          987
janey         223
jonny        12
jimy          98092
I am just trying to set up the table so that my Elements becomes my column and each row is my frequencies. This is so that I should be able to combine all my dataframes.

I have tried rbind on them but facing the below error:

“Error in rbind(deparse.level, ...) : numbers of columns of arguments do not match”.

Solution :

An alternative method to the rbind + dcast technique is that the use of the tidyverse.

Please use the pipes (%>%) to first use the bind_rows() to bind all the dataframes together while simultaneously creating the dataframe id column here I just called the variable as "df". Then use the spread() to move the unique " Elements" values to become the column names and spreading your values of the "freq" across your new columns. " Elements" is the key and "freq" is your value in this case.
error in fun(newx[, i], ...) : invalid 'type' (character) of argument
Tags: errors, c, lattice, array
Published: 2022-03-17 10:33:46

Problem:
Hi, I want someones' help me on this " error in fun(newx[, i], ...) : invalid 'type' (character) of argument"

Thanks in advance

Solution:
In this case, this error is coming from sum(), since you are trying to sum the character elements in the color column.

sum("a")
# Error in sum("a") : invalid 'type' (character) of argument
You require to remove the color column from the x argument, because it is not being employed in aggregation, however is really the by argument.

aggregate(csv[-1], csv["color"], sum)
#   color val2 val3
# 1  blue    6   13
# 2 green    7    3
# 3   red   11    9
However, you can try this formula method. It can solve your problem.

aggregate(. ~ color, csv, sum)
You can also apply dplyr package for example-

library(dplyr)
csv %>% group_by(color) %>% summarise_each(funs(sum))
  color  val2  val3
  (chr) (int) (int)
1  blue     6    13
2 green     7     3
3   red    11     9
Now, you are able to solve this issue

Thnks
How PeachPay will improve your Woocommerce Checkout
Published: 2022-03-17 10:33:30

**How PeachPay will improve your Woocommerce checkout process**

As mentioned above… PeachPay simplifies your store checkout process. The PeachPay plugin adds quick checkout buttons on your cart and checkout pages, and also on each product page, meaning your customer can add a product to the cart, and then process payment right then and there!
The following buttons are added to your Cart & Checkout pages and also your product single pages… Plus you can also edit the text, color and position of the buttons too.

Those button make it very quick and easy for your customers to complete their purchase before changing their mind, and simply giving them a better experience on your store.
Once a customer is happy with their cart, they’ll click on any of the express checkout buttons to open the express checkout popup where they can enter their details and complete their purchase.

**Setting up PeachPay on your WooCommerce store**

PeachPay make it very easy to install and setup their WooCommerce one-click checkout plugin in just a few minutes.

You simply install the free plugin from the WordPress repository by logging in to your WordPress site and navigating to **Dashboard -> Plugins -> Add New.**

Then search for “PeachPay for WooCommerce” and you’ll find it come up first in the list… Click **Install** and the **Activate** the plugin.

![Image description](https://community.codenewbie.org/remoteimages/uploads/articles/jvjd1lehkzyj287hprqv.png)

**Install Now and Activate the PeachPay for WooCommerce plugin.**

After activation, PeachPay will ask if they can connect to your store and have permission to place orders. WooCommerce doesn’t offer the ability to set finer permissions, so you will see it asking for managing products, customers, and coupons too, but the plugin only really needs to be able to place orders.

Once you’ve clicked “Approve”, you will then be taken to Stripe where you can sign up or sign in to a Stripe account.

![Image description](https://community.codenewbie.org/remoteimages/uploads/articles/j37q1t68qknc8psfo59w.png)
 
Sign in and connect your stripe account, and once you’ve completed that, you will receive an email shortly with the activation key which you can then enter into PeachPay under **Dashboard -> PeachPay.**

![Image description](https://community.codenewbie.org/remoteimages/uploads/articles/2vorp7ar40nxy4naz6sk.png)
 
And that’s it! You’re ready to start receiving payments with your new WooCommerce one-click checkout plugin.

Scroll further down on the settings page and you can also configure other settings such as button text, color, position and more to make PeachPay suit your store.

**Reference Blog**
[How PeachPay will improve your Woocommerce Checkout](https://www.gomahamaya.com/peachpay-review/)
Int to hex string c++
Tags: c, decimal, hex, int
Published: 2022-03-17 10:31:38

Problem:

How to convert int to hex string c++.

I need someones' help to solve this.
Thanks

Solution:
Use <iomanip>'s std::hex. If you print, just send it to std::cout, if not, then use std::stringstream

std::stringstream stream;
stream << std::hex << your_int;
std::string result( stream.str() );
You can prepend the first << with << "0x" or whatever you like if you wish.
Other manips of interest are std::oct (octal) and std::dec (back to decimal).

One problem you may encounter is the fact that this produces the exact amount of digits needed to represent it. You may use setfill and setw this to circumvent the problem:

stream << std::setfill ('0') << std::setw(sizeof(your_type)*2) 
       << std::hex << your_int;
So finally, I'd suggest such a function:

template< typename T >
std::string int_to_hex( T i )
{
  std::stringstream stream;
  stream << "0x" 
         << std::setfill ('0') << std::setw(sizeof(T)*2) 
         << std::hex << i;
  return stream.str();
}
I hope this will solve your issue

Thanks
Unexpected token < in json at position 0 fetch api
Tags: javascript, react, programming, discuss
Published: 2022-03-17 10:19:20


This error occurred when trying to fetch a local json file:


---

## How I fixed this.

![solution to Unexpected token < in json at position 0 fetch apimrpaulishaili](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hprt30r4k4ltvbgffmv5.JPG)

**Put the json data file** (or folder containing the json data files) **in the public directory of your react project and try to fecth again**.



---

## Further Reading

https://stackoverflow.com/questions/37269808/react-js-uncaught-in-promise-syntaxerror-unexpected-token-in-json-at-posit

https://docs.microsoft.com/answers/questions/449617/syntaxerror-unexpected-token-lt-in-json-at-positio.html
How to Use Multiple Template Engines within One Class?
Tags: javascript, node, typescript, webdev
Published: 2022-03-17 10:10:14

Normally we use one template engine for one project.
But it is possible to use multiple template engines within one project. You can initialise many templates and use them separately.



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

With [Aex](https://github.com/calidion/aex), you can do it much simpler.

You can initialize your template engine within an init function, and pass related parameters to the init function.
Or you can wrap this init function into a shared function in a separated file.

In [aex](https://github.com/calidion/aex), it provides a decorator called [`template`](https://github.com/calidion/aex#4-template-decorators) to help you to prepare a template for your web handler. 

You can check [here](https://github.com/calidion/aex#4-template-decorators) for more details on how to use the `template` decorator.

The following is how it looks like with multiple template engines, template engine `nunjucks` and `pug` are used here.

```typescript
class Template {
  @http("/one")
  @template(
    // init function
    (path) => {
    const loader = new nunjucks.FileSystemLoader([path], {});
    const env = new nunjucks.Environment(loader, {
      autoescape: false,
    });
    return env;
  }, resolve(__dirname, "./views"))
  public async name(_: any, res: any) {
    // access using res.render
    res.render("index.html", { hello: "Hello" });
  }

  @http("/pug")
  @template((path) => {
    const engine: any = {};

    // engine render function rewrite
    engine.render = function (name: string, data: any) {
      let file = name;
      if (!existsSync(name)) {
        if (!existsSync(resolve(path, name))) {
          throw new Error("File Not Found: " + resolve(path, name));
        } else {
          file = resolve(path, name);
        }
      }
      return pug.renderFile(file, data);
    };
    return engine;
  }, resolve(__dirname, "./views"))
  public async name2(_: any, res: any, scope: any) {
    // access using scope.engine
    res.end(scope.engine.render("index.pug", { hello: "Hello" }));
  }
}
```
Var vs Const vs Let (JavaScript)
Tags: javascript, webdev, programming, beginners
Published: 2022-03-17 10:04:16

## Variable Declarations

There are several ways of declaring values to variables in javascript:

- Var
- Const
- Let

### Var 

var stands for "variable" is used to declare variables that can be reassigned and are only available inside the function they're created in. They're function scoped.

```javascript
var word = "hello"
console.log(word) // returns "hello"

word = "bye" // can be re-assigned ✅
console.log(word) // returns "bye"
```

---

### Const 

const stands for "constant" and is used to declare variables that cannot be reassigned and are not accessible before they appear within the code. They're block scoped.

```javascript
const word = "hello"
console.log(word) // returns "hello"

word = "bye" // cannot be re-assigned ❌
console.log(word) // throws an error as constants cannot be re-assigned
```

---

### Let

Variables declared using let can be reassigned but are similar to const i.e. block scoped. If variables are not created inside a function or block they are globally scoped.

- Block

    A block is a set of opening and closing curly brackets.


> Hope you learned something useful today! Peace Out ✌️
856. Score of Parentheses
Tags: cpp, algorithms
Published: 2022-03-17 09:54:01

# Description

Given a balanced parentheses string `s`, return *the **score** of the string*.

The **score** of a balanced parentheses string is based on the following rule:

- `"()"` has score `1`.
- `AB` has score `A + B`, where `A` and `B` are balanced parentheses strings.
- `(A)` has score `2 * A`, where `A` is a balanced parentheses string.

## Example 1:

```
Input: s = "()"
Output: 1
```

## Example 2:

```
Input: s = "(())"
Output: 2
```

## Example 3:

```
Input: s = "()()"
Output: 2
```

## Constraints:

- `2 <= s.length <= 50`
- `s` consists of only `'('` and `')'`.
- `s` is a balanced parentheses string.

---

# Solutions

## Solution 1

### Intuition

1. store the base grade 0 to stack
2. if we find another `(` , we just need to got the top grade and check its value
    1. if it is 0, so we got 1 and put it back to top
    2. if it is bigger than 0, we need to double it
3. return the top

### Code

```cpp
class Solution {
public:
    int scoreOfParentheses(string s) {
        stack<int> stk;
        stk.push(0);
        for (char c : s) {
            if (c == '(') {
                stk.push(0);
            } else {
                int g = stk.top();
                stk.pop();
                if (g == 0) {
                    g = 1;
                } else {
                    g *= 2;
                }
                stk.top() += g;
            }
        }
        return stk.top();
    }
};
```

### Complexity

- Time: O(n)
- Space: O(n)
Create barcode in React JS or React Native Apps
Tags: react, reactnative, beginners, typescript
Published: 2022-03-17 09:43:12

A barcode is a machine-readable representation of numerals and characters. It consists of bars and spaces. A barcode is shown as an image that consists of a series of parallel black and white bars that can be read by a barcode scanner. Barcodes encodes the product information. It helps to manage items at a store or track inventory in a warehouse. Here we will create barcode in React JS or React Native Apps.

We can use package [react-barcode](https://www.npmjs.com/package/react-barcode) which provides us a component for use with React. You can read about this [package in detail here](https://www.npmjs.com/package/react-barcode).

## Create barcode in React JS or React Native Apps

### Installation
```ssh
npm install react-barcode
```

### Usage
Now, we have Component which we can use in our class or functional component easily. Below is a sample usage of this component.
```typescript
var React = require('react');
var ReactDOM = require('react-dom');
var Barcode = require('react-barcode');

ReactDOM.render(
  <Barcode value="http://github.com/kciter" />,
  mountNode
);
```
That’s it using this package [react-barcode](https://www.npmjs.com/package/react-barcode) we can create a barcode in our react or react-native.

---

Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials please [visit my website](https://www.w3courses.org/tutorials/).

Thanks:)
Happy Coding:)