teleren/devto huggingface dataset:
Inference machine learning models in the browser with JavaScript and ONNX Runtime Web
Tags: machinelearning, react, javascript, webdev
Published: 2021-11-26 17:03:16

---
title: Inference machine learning models in the browser with JavaScript and ONNX Runtime Web
published: true
description: Inference machine learning models in the browser with JavaScript and ONNX Runtime Web
tags: machinelearning, reactjs, javascript, webdev
cover_image: ![logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rt9gbh5p9l3hzii4shds.png)
---
In this video tutorial we will go over how to do client side inferencing in the browser with ONNX Runtime web. Below is a video on how to understand and use a QuickStart template to start building out a static web app with an open source computer vision model. Additionally, you can find a written step-by-step tutorial in the [onnxruntime.ai docs here](https://onnxruntime.ai/docs/tutorials/web.html). Let's learn a bit more about the library, ONNX Runtime (ORT), which allows us to inference in many different languages.

## What is ORT and ORT-Web?

`ONNX Runtime (ORT)` is a library to optimize and accelerate machine learning inferencing. It has cross-platform support so you can train a model in Python and deploy with C#, Java, JavaScript, Python and more. Check out all the support platforms, architectures, and APIs [here](https://onnxruntime.ai/).

`ONNX Runtime Web (ORT-Web)` enables JavaScript developers to run and deploy machine learning models client-side. With ORT-Web you have the option to use a backend of either `WebGL` for GPU processing or WebAssembly `WASM` for CPU processing. If you want to do JavaScript server side inferencing with node checkout the [onnxruntime-node library](https://onnxruntime.ai/docs/get-started/with-javascript.html#onnx-runtime-nodejs-binding).

Video tutorial:
{% youtube vYzWrT3A7wQ %}

Written tutorial:
Check out the written tutorial here: [ONNX Runtime Web Docs tutorial](https://onnxruntime.ai/docs/tutorials/web.html)

## Resources

- Start using the template now by going to [GitHub NextJS ORT-Web Template](https://github.com/microsoft/onnxruntime-nextjs-template). 
- [ONNX Runtime Web Docs tutorial](https://onnxruntime.ai/docs/tutorials/web.html)
- [ONNX Runtime docs](https://onnxruntime.ai/docs/)
- [ONNX Runtime GitHub](https://github.com/microsoft/onnxruntime)
- [Deploy with Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/)
GitHub Actions
Tags: github, opensource, csharp
Published: 2021-11-26 16:56:28

# Introduction
What is GitHub Action? According to Github, it is a series of commands that can be executed when a special event (defined by user) occurred. The series of commands is put in the context of `workflow` and every steps can be seen as a `job`. 
This week, I had a chance to explore GitHub Actions for my Shinny-SSG project and it is a great improvement for my application.

# Define Workflows 
I created my first workflow by using Github's default workflow template for .Net project. Github created a YAML file in the `.github/workflows` directory inside my git repository. You can read more about it [here]
(https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions).
My dotnet.yml file :
```bash
name: .NET

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Setup .NET Core 3.1	
      uses: actions/setup-dotnet@v1	
      with:	
       dotnet-version: 3.1.x
    - name: Setup .NET Core 5.0
      uses: actions/setup-dotnet@v1
      with:
       dotnet-version: 5.0.x
    - name: dotnet-format
      run: dotnet tool install -g dotnet-format --version 5.1.225507
    - name: Restore dependencies
      run: dotnet restore shinny-ssg/shinny-ssg.sln
    - name: Build
      run: dotnet build shinny-ssg/shinny-ssg.sln --no-restore 
    - name: Test
      run: dotnet test shinny-ssgTests --no-build --verbosity normal
```

# Testing
Later, I tested my Github Actions by making a pull request to my origin repository. It worked like a charm and it denied merging if my PR did not pass the test. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbsvomsrcqq6esn7gie0.png)

I also made a [PR](https://github.com/Qiwen-Yu/TextHTMLPress/pull/17) for my classmate's project. It also worked as expected.
Persistent connection to Kafka through Spring Boot?
Tags: help, java, programming, kafka
Published: 2021-11-26 16:49:43

Please excuse the ambiguity as I'm trying to be as clear as possible with the little knowledge that I have.

We have a Kafka cluster and the idea is to have a Spring Boot application to serve as the bridge between the Producers, Consumers and Kafka.

I've worked with simple REST, CRUD applications, in which I basically interact with the server on a request basis.

**Question:**

How do I go about creating a persistent connection between Spring and Kafka to send and receive messages?

Does the protocol matter?
If you use React, DO THIS!
Tags: react, webdev, programming, javascript
Published: 2021-11-26 16:41:14


_This article was originally published on [my newsletter](https://www.tuomokankaanpaa.com/newsletter) last week. I publish previous week's newsletter here on the blog. If you want to read these as soon as they are published, [sign up](https://www.tuomokankaanpaa.com/newsletter) for the newsletter!_

Ahoy,

Are you using React? If your answer is YES then you need to keep reading!

When using React, browsing the React docs is something that at least I do frequently. So I was super excited when I learned that the React team is rewriting the documentation and we can actually already access the new docs!

The new React.js docs are still in beta and a work in progress but by going to [beta.reactjs.org](https://beta.reactjs.org) you can already take them for a spin!

## So what's new in the docs?

One of the things that I really like in the new docs is the fact that all the explanations are written using Hooks and functional components rather than classes and class based components.

For me I'm nowadays always using hooks + functional components and the only time I use class based components is when I'm working with an older codebase and modify existing components.

I uploaded a video this week talking about all my thoughts on the new docs and I also go more in depth on what's new in them. You can watch the video on the [Youtube channel](https://www.youtube.com/tuomokankaanpaa).

{% youtube LyrZEho45yw %}

That's all for this week!

Cheers,
Tuomo
How to explore a new database
Tags: database, qa, dev
Published: 2021-11-26 16:38:20

---
title: How to explore a new database
published: true
description: Quickly zoom into database schema metadata details for your domain
tags: database, qa, dev
---

Chances are that you have started a new job, and are quickly trying to get up to speed on how the data is laid out. Or, you are a consultant, trying to look worth the money, and speak intelligently about a client’s schema design. Maybe you just returned from vacation, and want to see what changes other developers have made to the database. Use SchemaCrawler to search through your metadata using regular expressions, and quickly zoom into relevant details.

Watch the video: [How do you explore a new database?](https://nofluffjuststuff.com/webinar/55/how_to_explore_a_new_database)
Correct parameters to migrate from Bcrypt to Argon2 for express?
Tags: discuss
Published: 2021-11-26 16:28:55

As per [security.stackexchange.com](https://security.stackexchange.com/questions/17207/recommended-of-rounds-for-bcrypt) the recommended number of rounds for Bcrypt is a number such that it takes atleast 250 ms to hash your password. [Argon2](https://www.npmjs.com/package/argon2) on the other hand takes multiple parameters it seems. What is the equivalent configuration you need for Argon2? I am talking about an express webserver here with passportjs if that helps
5 Articles every WebDev should read this week (#47)
Tags: webdev, tutorial, javascript, programming
Published: 2021-11-26 16:20:57



## ES Proposals
> A website for keeping up to date with ECMAScript proposals.
https://www.proposals.es


---

## A Custom CSS Reset
> For a long time, I used Eric Meyer's famous CSS Reset. It's a solid chunk of CSS, but it's a bit long in the tooth at this point; it hasn't been updated in more than a decade, and a lot has changed since then!
https://www.joshwcomeau.com/css/custom-css-reset/

---

## Understanding why our build got 15x slower with Webpack 5

> A while back, we encountered an odd problem. All of a sudden, building our front-end went from taking a few seconds to taking a few minutes. We felt this most acutely when starting our front-end development server. Incremental changes were still fast, but if you needed to stop and restart the server, it took forever. 
https://engineering.tines.com/blog/understanding-why-our-build-got-15x-slower-with-webpack

---

## Etsy’s Journey to TypeScript
> Over the past few years, Etsy’s Web Platform team has spent a lot of time bringing our frontend code up to date. It was only a year and a half ago that we modernized our Javascript build system in order to enable advanced features, things like arrow functions and classes, that have been added to the language since 2015. And while this upgrade meant that we had futureproofed our codebase and could write more idiomatic and scalable Javascript, we knew that we still had room for improvement.
https://codeascraft.com/2021/11/08/etsys-journey-to-typescript/

---

## 7 Ways to Improve Node.js Performance at Scale
>In this article, we will consider some practices that you should adopt to scale your Node.js servers. Your servers will then be able to handle high traffic workloads without a degraded user experience.
https://blog.appsignal.com/2021/11/24/7-ways-to-improve-nodejs-performance-at-scale.html
---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr).

Photo by [Alex Kulikov](https://unsplash.com/@burntime) on [Unsplash](https://unsplash.com)

---
 
[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---
Logical Operators
Tags: javascript, webdev, beginners, programming
Published: 2021-11-26 15:56:37

## Note: 
This is part of control flow which I forgot to mention and would like to add on to that with it's own explaination. Check out the control flow blog <a href="https://dev.to/tomyotwongjai/control-flow-in-js-1ob6">HERE</a>


##What is Logical Operators?

A logical operators job is simply connect two or more programming statements to return ``true`` or ``false``.

Three logical operators are: 
```
AND && | Return true if both operands are true.
OR  || | Return true if either operand is true.
NOT !  | Return true if operand is false.
```
Let say I want to evaluate if user password is long enough and have special character ``#``, I can use ``&&`` to evaluate like this:

```javascript
const password = "#passwordislong";

if (password.length >= 10 && password.includes('#')) {
  console.log('very strong');
} else if (password.length >= 8) {
  console.log('strong');
} else {
  console.log('weak');
}
```
Above, the password is more than 10 character long and has a special character # so it safe to say the password is 'very strong'.

Now, what if I want to include ``||`` to else if statement so if the password length is 8 character or more or password length is greater or equal to 5 with special character ``#``  for example.
```javascript
if (password.length >= 10 && password.includes('#')) {
  console.log('Very strong');
} else if (
  password.length >= 8 ||
  (password.length >= 5 && password.includes('#'))
) {
  console.log('strong');
} else {
  console.log('weak');
}
```
The else if take in two condition. If the password length is greater or equal to 8 or password length is greater or equal to 5 and it include '@', then the statement is true and the password is 'strong'

### Last operator I will analyze is ``!`` or "Logical Not".
Logical not operator return something true to false and vice versa .

### Example:

 In normal behavior, the if statement only run the code block only if what it's evaluated inside is true.

```javascript
//Let's evaluate if there's an item

let item = false;

if (item) {
  console.log('run something');
}
//output: Nothing since item is false, the code block will not run
```
But if I add the logical not ``!`` in front of the item, it switch it to true and the code now run without changing the value item which will always be false.

```javascript
//If we add ! to item

let item = false

const item = false;

if (!item) {
  console.log('run something');
}

//output: 'run something'
```

There we go! It is important for me to understand logical operators since it is the building block of control flow. Using this will help me develop and evaluate statements effectively.

##Thanks for reading !! :)
###Feel free to leave any comment or feedback!
How to access local webserver, raspberry pi and gameserver from the Internet
Tags: webdev, gamedev, beginners, testing
Published: 2021-11-26 15:55:28

Suppose you are working on a hobby project or building projects on the spot to learn some concepts. Once you have completed the project and it is working as expected, you can share it with your friends and colleagues.

However, you don't want to worry about hosting it on a web server as it involves purchasing a domain name, hosting space, and various other setups.

Now some of you might suggest using the port forwarding option. For those unfamiliar with port forwarding, it is a process of intercepting traffic destined for a computer's IP / port combination and redirecting it to another IP and / or port.

## [localtonet.com](localtonet.com)

LocaltoNet is a reverse proxy that enables you to expose your localhost services to the internet.
You can share your local web server, connect your raspberry pi on ssh or its supports local game server like counter strike, minecraft etc. 
Its support HTTP/s, TCP and UDP protocols.

Visit the official docs for more information.
Steps to download & use:
    > Visit [localtonet.com](localtonet.com)
    > Download and unzip file. Start localtonet. Copy Auth Token on your dashboard and paste on command line.
![>] (https://localtonet.com/homepage/img/http_tunnel.gif)
## [ngrok.com](ngrok com)

ngrok gives you a public URL for the web app running on localhost.

It is a reverse proxy software that establishes secure connections from a public endpoint to a locally running service.

There are two ways to use ngrok:

    Download the software from the official website
    Use npm to install

Visit the official docs for more information.
Adding Gitmark to lazygit
Tags: gitmark, git, lazygit, config
Published: 2021-11-26 15:52:03

[Gitmark](https://git-mark.com/) is a way to mark your git commits to achieve finalization

[Lazygit](https://github.com/jesseduffield/lazygit) is a useful tool for those running git on the command line

Lazygit has an interesting feature which lets you add commands to key bindings.  Here's how I added a gitmark workflow to lazygit

```yaml
customCommands:
  - key: 'm'
    context: 'global'
    subprocess: true
    prompts:
      - type: 'menu'
        title: 'Git Mark?'
        options:
          - name: 'trial'
            description: 'trial run'
          - name: 'commit'
            description: 'commit'
            value: '--tag --send --commit'
          - name: 'init'
            description: 'init'
            value: 'init'
    command: 'git mark {{index .PromptResponses 0}}'
```
ANATOMY OF A FAKE RESUME
Tags: resume, cv
Published: 2021-11-26 15:29:47

As a 3rd party IT recruiter I look at a lot resumes on a daily basis. Some are very well written, while others not so much and then there are the resume mill templates. You can usually tell these resumes as they all seem to use the same exact format. Almost 100% are IT (Information Technology) resumes listing only a First Name (as if they are Madonna, Elvis, Bono, etc.), no phone number, email address or location. Most are written by consulting firms employing or representing H1B or OPT consultants. They usually list large US companies as their employers (even though they are not employed by these companies) to attract the recruiters attention. Their roles, duties and responsibilities look very similar in almost all the projects listed.

Another red flag to look for is: having experience in a technology longer than it has existed.

Here's a lay out of the typical fake resume:

Summary:

6-8 years experience as a software engineer working with onshore and offshore teams. Blah, blah, blah...
Having good knowledge of (fill in the blank)
Expert in (fill in the blank)
Expert in ( )

Certifications:

Technical Skills: (often listing every technology known to mankind)

Professional Experience:

Company Name / Position Title January 2017 - Till date

Blah. blah, blah

Education:

Master of Computer Applications (M.C.A.) (note, no school name listed or year of graduation)


How to handle these resumes.

When I see these resumes, I delete them! Hiring Managers/Recruiters, don't waste your time with these people. Candidates should always list their first and last name, and at least one form of contact info (phone and/or email address) on their resume. Of course, doing this does not guarantee a real candidate but it is a good start. Check to see if they have a LinkedIn profile and if so does it look similar to their resume.
DevTips Daily Update 26/11/21
Tags: devtipsdaily, javascript, beginners
Published: 2021-11-26 15:28:08


So in this week's videos on DevTips Daily, we were carrying on with our full end to end project and we got setup with our server on Digital ocean, starting creating some endpoints in the Express app for generating short urls and also got setup with a MongoDB database inside a Docker container.

Here's a link to each individual tutorial:

[Setup hosting server](https://youtu.be/TqniZz0ZyWE)
{% youtube TqniZz0ZyWE %}

[Connecting to server via SSH](https://youtu.be/zZpiGCXQcZg)
{% youtube zZpiGCXQcZg %}

[Creating short URLs](https://youtu.be/Xldt2wT-v90)
{% youtube Xldt2wT-v90 %}

[Setup MongoDB with Docker](https://youtu.be/nag8DMmG0D0)
{% youtube nag8DMmG0D0 %}

[Testing MongoDB connection](https://youtu.be/Pm2PWfKG1y0
{% youtube Pm2PWfKG1y0 %}

[Connecting to MongoDB in the API](https://youtu.be/g9l3JSmsxdQ)
{% youtube g9l3JSmsxdQ %}

[Adding URLs to database](https://youtu.be/https://youtu.be/NWQJatD432E)
{% youtube NWQJatD432E %}

Next week we're going to be carrying on with the project again, we'll be setting up our redirect endpoint and starting to build our delivery pipeline with GitHub Actions!

Thanks for watching 👍
Discoveries in Ruby(and Rails): Partial indexes with Postgres
Tags: ruby, rails
Published: 2021-11-26 15:25:46

Rails has support for partial indexes when used with Postgres. According to Postgres a partial index is defined as _"A partial index is an index built over a subset of a table"_.

What it is used for?. Imagine you provide users of your app to delete their account. But, for some reason you want to soft delete the account, maybe for data analysis purposes, or to give the user a grace period where they can undo it. A soft-deleted email is considered to be not taken, because although there is a record with the email in the database, but it is not used(soft deleted)

Then, it does not make sense to include that record's index(which contains a pointer to the original row in the users table) in the index file. This speeds up queries by ignoring soft-deleted users records.

Adding partial indexes with Postgres could look like this in SQL

```sql
CREATE UNIQUE INDEX users_email_deleted_at_is_not_null
ON users (email) WHERE deleted_at IS NULL;
```

Thankfully, you can pass a `where: condition` as an argument to `add_index`. So, the above code will look like this in rails's migration

```ruby
add_index :users, :email, unique: true, where: "(deleted_at IS NULL)"
```

Thanks for reading, happy coding!.
Custom Fonts and React Native - 
The complete story
 
Tags: reactnative, javascript, fonts, beginners
Published: 2021-11-26 15:25:05




When it comes to creating an effective user interface for an application, font is **crucial**.

Follow the steps and your app would have the custom fonts that you need


Download and save the required fonts in the `assets/fonts` folder

You can save the fonts in some other folder as well but this is the standard way

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


Now create a **config** file by the name of `react-native.config.js` in the root directory of your project and write the following code in that file

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



In the *terminal* link the custom fonts using the following command
"npx react-native link"
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axtv4z7nk146osi2bb1j.png)
 


Tip:

Don't use **fontWeight** property while styling your text as it would override and remove the custom fonts

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





##TL;DR
- Save the fonts in `assets/fonts` folder
- Create a config file by the name of `react-native.config.js`
- Link your fonts using `npx react-native link`
- Enjoy using the fonts
Building a Unicorn Engineering Org at GRIN
Tags: techtalks, podcast, leadership, analytics
Published: 2021-11-26 15:21:22


{% spotify spotify:episode:4WPlf5roPoDIMxBS9ClAfi %}

How do you build an engineering organization that can drive your company to a billion-dollar valuation and unicorn status?

And how do you do it in an emerging and highly-competitive product category like influencer/creator management? Brent Bartlett, VP of Engineering at GRIN, joins the podcast this week to share his blueprint for success and his path to leadership.

Listen as Brent shares his advice on how to use intuition to inform data-based decision making, how he managed GRIN's engineering department during it's explosive growth on the path to a billion dollar valuation, and why he trusts LinearB to help him succeed.

## Episode Highlights Include:
* Building an engineering org in a highly competitive product market
* How to blend intuition and data when decision making
* Why GRIN chose to partner with LinearB
* Institutionalizing knowledge and communication practices while scaling

## Join the Dev Interrupted Community
With over 2000 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.com/invite/devinterrupted)

![https://discord.com/invite/devinterrupted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ntzh378o6mgdwbtqdr8.png)
AWS SignatureDoesNotMatch error
Tags: aws
Published: 2022-04-02 04:01:28

---
title: AWS SignatureDoesNotMatch error
published: true
date: 2021-11-26 15:08:34 UTC
tags: aws
canonical_url: https://adithya.dev/aws-signaturedoesnotmatch-error/
---

I was setting up AWS from scratch again on Windows 10. I went into IAM -> Users -> Add User and obtained the `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY`. Then I set up both of them under environmental variables.

I opened up a command prompt and ran `aws sts get-caller-identity` and got this error message.

`An error occurred (SignatureDoesNotMatch) when calling the GetCallerIdentity operation: The request signature we calculated does not match the signature you provided`

After a bit of Googling and making sure that [my system time was set correctly](https://github.com/aws/aws-cli/issues/602), I found out that sometimes AWS CLI has an issue if the `AWS_SECRET_ACCESS_KEY` has a + (plus symbol) on the starting part of the value. All I did was to delete the existing `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY`, regenerate it and it worked.