teleren/devto huggingface dataset:
Setup path aliases w/ React + Vite + TS
Tags: react, typescript, vite, javascript
Published: 2022-04-30 06:19:50

Out of the box vite doesn't provide "@" path alias to src, so we have to manually setup it. I suppose you're using Vite preset for react-ts.

Steps to setup this:

**Step 1**

vite.config.ts:

```ts
// also don't forget to `npm i -D @types/node`, so __dirname won't complain
import * as path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
  },
})
```

This would tell Vite about the alias.

**Step 2**

We're adding "@" alias for src directory (ts needs this).

tsconfig.json:

```js
{
  "compilerOptions": {
    // ...rest of the template
    "types": ["node"],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
```

**Usage**

```ts
import Comp from '@/components/Comp'
```
How to Highlight potential problems in React application?
Tags: javascript, react
Published: 2022-04-30 05:48:39

StrictMode
-> Identifying components with unsafe lifecycles 
-> Warning about legacy string ref API usage 
-> Warning about deprecated findDOMNode usage
-> Detecting unexpected side effects 
-> Detecting legacy context API
-> Detecting unsafe effects 
 
Strict mode checks are run in development mode only; they do not impact the production build.
For More: https://reactjs.org/docs/strict-mode.html
VisiPrime Reviews - Effective Benefits Price And Ingredients or Legit?
Published: 2022-04-30 05:32:54

(SPECIAL OFFER) Click Here :- https://ipsnews.net/business/2022/04/27/visiprime-eye-health-supplement-ingredients-and-precautions-you-must-know-before-order/
https://sites.google.com/view/visiprime-price/
https://groups.google.com/g/visiprimereviews/c/bHGqqd8AE-g
https://lexcliq.com/visiprime-reviews-effective-benefits-price-and-ingredients-or-legit/
https://promosimple.com/ps/1e93b/visiprime-reviews
https://wakelet.com/wake/DZi1NDhjVGHFGHYmzsoxc
https://www.bulbapp.com/u/visiprime-reviews-effective-benefits-price-and-ingredients-or-legit
https://caramellaapp.com/csxickyyatt/FrzMu-O1F/visiprime
https://visiprimeprice.tumblr.com/
https://visiprimeprice.wordpress.com/
https://the-dots.com/projects/visiprime-reviews-effective-benefits-price-and-ingredients-or-legit-729119
https://telescope.ac/visiprime-price
https://telegra.ph/VisiPrime-Reviews---Effective-Benefits-Price-And-Ingredients-or-Legit-04-30
https://public.flourish.studio/story/1394341/
https://melaninterest.com/pin/visiprime-reviews-effective-benefits-price-and-ingredients-or-legit/
PKI (public key infrastructure) based on digital certificates
Published: 2022-04-30 05:23:12

Assume we are using a PKI (public key infrastructure) based on digital certificates (which is the norm and practice today). Therefore, we need public-key digital signature algorithms, standards and software to this end. I personally suggests that digital signatures should suffice and there is no need to have public-key encryption standards and software. Do you guys think there will be an argument that argue this claim is feasible? lets say you all participants in the system have a digital signature certificate. you can consider Diffie-Hellman Key Exchange including its man-in-the-middle (MITM) vulnerability.
Remix pathless layout routes
Tags: react
Published: 2022-04-30 04:32:56

Now that we know how to make [shared layouts in Remix](https://daily-dev-tips.com/posts/remix-shared-layouts-a-first-look/), there might be times when you want a shared layout but not the shared routes.

For instance, what happens when we want to introduce multiple auth routes that share one layout?

We might go for an `auth` folder and inside create files like: `login.tsx` and `register.tsx`.

That would work, right?
And the answer is yes.

But the downside of that approach is that we get all the URLs prefixed with `/auth`:

`http://mywebsite.com/auth/login`
`http://mywebsite.com/auth/register`

Remix came up with pathless layout routes for this problem.

## Pathless layout routes in Remix

The main idea behind these pathless layout routes is that they can share a layout but are not read as URL segments.

To use them, you have to prefix the folder with two underscores: `__auth`.

And for the layout file goes the same, prefix it with `__auth.tsx`.

Let's try and set up these login pages to see it in action.

First, create the `__auth` folder inside your routes directory.

Then go ahead and create the layout file, which will hold our main auth layout.
This file is called `__auth.tsx` and is located at the root of the routes directory.

First, remove any existing `login` or `register` routes and create `login.tsx` and `register.tsx` inside the `__auth` directory.

Each one can have a file similar to this:

```js
export default function Login() {
  return <p>This is the login page</p>;
}
```

> Note: Make sure to rename the function name and the actual copy.

If we now run the website, we can navigate to `/login` and `/register`, and our auth layout will still be there!

![Auth routes](https://cdn.hashnode.com/res/hashnode/image/upload/v1650430431362/jIowK3Dc0.png)

Pretty cool stuff, Remix!

You can also find the completed code on [GitHub](https://github.com/rebelchris/remix-starter/tree/pathless-layout).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
How to publish a package to npm
Tags: javascript, npm
Published: 2022-04-30 04:25:25

If you've built a package you want to publish as a public package to `npm` you can follow these steps:

1. [Sign up](https://www.npmjs.com/signup)
2. [Create an organisation](https://www.npmjs.com/org/create)
3. Choose the following option
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ottxsrvxx2hxiigu4x65.png)
4. On the command line, navigate to the root directory of your package

```bash
cd /path/to/package
``` 
5. Authorize the machine to publish a package

```bash
npm login
```
6. Publish the package

Assuming you've built the package correctly, you can publish it like this:

```bash
npm publish --access public
```

If you're interested to see a package publish exactly this way, take a look at this repository:

https://github.com/utopiops/utopiops
HackerRank Football Scores Python Solution
Tags: programming, python, coding, solution
Published: 2022-04-30 04:24:55

So Football Score problem is asked in many top level product base company like Meesho, Adobe etc.

So here we have came across with the solution of this problem in a more pythonic way and it is easily understandable if you have basic idea of programming and logical idea. So let's get started with the problem statement.

**Problem Statement**

The number of goals achieved by two football
teams in matches in a league is given in the form
of two lists. For each match of team B, compute
the total number of matches of team A where
team A has scored less than or equal to the
number of goals scored by team B in that match.

**Example**

`teamA = [1, 2, 3]
teamB = [2, 4]`

Team A has played three matches and has scored
teamA = [1, 2, 3] goals in each match respectively.
Team B has played two matches and has scored
teamB = [2, 4] goals in each match respectively.
For 2 goals scored by team B in its first match,
team A has 2 matches with scores 1 and 2. For 4
goals scored by team B in its second match, team
A has 3 matches with scores 1, 2 and 3. Hence,
the answer is [2, 3).

```
def counts(teamA, teamB):
    answer = []
    teamA.sort()    
    for score in teamB:
        low, high = 0, len(teamA) - 1
        while low <= high:
            mid = (low + high) // 2
            if teamA[mid] > score:
                high = mid - 1
            else:
                low = mid + 1
        answer.append(low)
    
    return answer

l1 = [1,2,3]
l2 = [2,4]

print(counts(l1, l2))
```

So this was the simplest solution for this problem you can also try different approaches to solve this problem in a efficient way.

Thanks for your valuable time. You can like my post and
you can.

[By me a Coffee](https://www.buymeacoffee.com/saim783)

[My other Blog Website over Technology](https://www.saimtechnews.in)

[My YouTube Vlog Channel](https://www.youtube.com/c/abdullavlogs)
Apa yang dimaksud dengan Scope ?
Tags: javascript, interview, indonesia
Published: 2022-04-30 04:20:15

---
title: Apa yang dimaksud dengan Scope ?
published: true
description: 
tags: JavaScript, interview, Indonesia
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g48n1t35ps96pekqwi9m.jpg
---

Kata "scope" atau dalam bahasa Indonesia yang artinya lingkup merupakan istilah yang digunakan dalam pemograman untuk menunjukkan apakah suatu variabel dapat dipanggil atau digunakan, yang mana scope tersebut dipengaruhi saat suatu variabel tersebut dideklarasikan.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byxt4oak6tl3bikx7eyp.jpg)
Fixing - Cannot find name '__dirname'.ts(2304)
Tags: typescript
Published: 2022-04-30 04:04:59

It happens when we try to use `__dirname` in a TS file.

Steps to fix this:

Installing node types: `npm i -D @types/node`

Applying types in to tsconfig.json:

```js
"compilerOptions": {
  "types": ["node"],
},
```

Then using it:

```js
import * as path from 'path'

console.log(__dirname)
```
Bybit's Pybit: How to subscribe to kline stream via WebSocket
Tags: bybit, pybit, websocket
Published: 2022-04-30 03:16:31

As a beginner crypto trader, I often look at automating my trades so I can sleep at ease. Bybit is one of the exchanges that offers open-sourced API, but its documentation can be outdated at times. Hence, I'm learning via trial and error and finally figured out how to use its WebSocket API.

Bybit's python library had been released with a new version. At the time of writing, [Pybit's](https://github.com/bybit-exchange/pybit) latest version is v2.1.0

Now, let's look at how to consume Pybit WebSocket API to stream realtime kline data:

```python
from datetime import date, datetime, timedelta
import dateparser
import time
import hmac
import json
from pybit import usdt_perpetual

# Apply for API keys and secrets at  https://testnet.bybit.com/
api_key="xxx"
api_secret="xxx"

# Initialize web socket connection instance
ws = usdt_perpetual.WebSocket(
    test=True,
    api_key=api_key,
    api_secret=api_secret,
)

# Initialize http connection instance
session = usdt_perpetual.HTTP(endpoint="https://api-testnet.bybit.com", api_key=api_key, api_secret=api_secret)

# Define a target price that you want to enter your position
target_price = 40000

# handle_position is a callback that will be triggered on every new websocket event (push frequency can be 1-60s)
def handle_position(message):
    data = message["data"][0]
    if data:
        # check for target_price for entering position, if confirm=True, the data is the final tick for the interval. Otherwise, it is a snapshot.
        if data['close'] >= target_price and data['confirm'] == True:
            print("Buy Order | {} | {}".format(data['close'], time.strftime("%m/%d/%y, %H:%M:%S", time.localtime())))
            tp = target_price + (target_price * 0.05)
            sl = target_price - (target_price * 0.05)
            # Buy at market price to enter Long position
            ret = session.place_active_order(
                symbol="BTCUSDT",
                side="Buy",
                order_type="Market",
                qty=0.001, # amount to buy
                time_in_force="GoodTillCancel",
                reduce_only=False,
                close_on_trigger=False,
                take_profit=tp,
                tp_trigger_by="LastPrice",
                stop_loss=sl,
                sl_trigger_by="LastPrice",
                position_idx=0,
            )
            print("Buy Order Id | {}".format(ret["result"]["order_id"], time.strftime("%m/%d/%y, %H:%M:%S", time.localtime())))

# start kline stream here and pass in callback, symbol and desired kline interval
ws.kline_stream(callback=handle_position, symbol="BTCUSDT", interval="5")

```

Notes: Do request for free credits on [testnet.bybit.com](https://testnet.bybit.com) so that you can have imaginary $$ to test your algorithm. Request can be done via live chat support.

Reference to official Pybit's WebSocket example: https://github.com/bybit-exchange/pybit/blob/master/examples/websocket_example.py
[Solved] No CMAKE CXX COMPILER could be found
Tags: cmake, errorsolution, ubuntu, apt
Published: 2022-04-30 02:18:53


### Problem:

Running into the following error when trying to run `cmake .. -DCMAKE_BUILD_TYPE=RelWithDebInfo`:

```
-- The CXX compiler identification is unknown CMake Error at CMakeLists.txt:3 (project): No CMAKE CXX COMPILER could be found.
Tell CMake where to find the compiler by setting either the environment variable "CXX" or the CMake cache entry CMAKE CXX COMPILER to the full path to the compiler, or to the compiler name if it is in the PATH.

```

### Solution:

This error is usually caused by the `build-essential` package not being installed. If you're on Ubuntu run the following commands to install this package:

```
sudo apt update
sudo apt install build-essential
```

After installing this package, try running the `cmake` command again and this error should be resolved.

## Conclusion

Thanks for reading this blog post!

If you have any questions or concerns please feel free to post a comment in this post and I will get back to you when I find the time.

If you found this article helpful please share it and make sure to follow me on [Twitter](https://twitter.com/Shehan_Atuk) and [GitHub](https://github.com/ShehanAT), connect with me on [LinkedIn](https://www.linkedin.com/in/shehan-atukorala-8631491a5/) and subscribe to my [YouTube channel](https://www.youtube.com/channel/UCtxed_NljgtAXrQMMdLvhrQ).
ENS DigitClub
Tags: ens, web3, ethereum, nextjs
Published: 2022-04-30 02:18:52

## Happy to announce http://digitclub.xyz

> A simple tool to keep track of floor / prices of ENS digits. It's currently quite difficult to keep track of this through Opensea and DigitClub helps with this

This was made within 24 hours so still early beta. More features in the works!

**For updates follow us on Twitter:** https://twitter.com/pateldeep_eth


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htf12k527hswvaw3rp93.jpeg)
Webjars in Java/Spring
Published: 2022-04-30 01:41:29

---
title: Webjars in Java/Spring
published: true
description: Webjars in Java/Spring
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Webjars allow us to add frontend libraries like Angular, React, Vue, jQuery into a Spring application as jar files. Meaning they can be added into the Spring application using Maven or Gradle commands. 

Reference: 
1. [Webjars docs](https://www.webjars.org/)
2. [Using Webjars with Maven](https://www.baeldung.com/maven-webjars)
Day 21: High reward
Published: 2022-04-30 00:42:55

Hi!
after a long conversation with my friends I went to sleep and that's when I realized that I didn't write my post and there was a part of me that wanted to just stay in the bed comfort and maybe push it to tomorrow morning but I realized that that's how I always fail at something by letting my guard down about consistency and I had to get up right away. so Today was a good one actually Fridays are the best and the demo was even better that I expected which is a high reward to me. this weekend I decided to stop everything and focus on my paper too which is due next week Hopefully I make progress on that as well
I want to get back to my personal project and the other unfinished tutorial article and maybe get them done by next week too
for now I think I can use a good night sleep and get back to work tomorrow 
signing off...
AlmaLinux for PowerPC 8.5 Stable Now Available!
Tags: almalinux, opensource, cloud, linux
Published: 2022-04-30 00:34:45

Hello Сommunity and PowerPC enthusiasts around the world! The AlmaLinux Foundation is proud to announce that the general availability of AlmaLinux OS 8.5 Stable for ppc64le is live.

## Images and Release Notes
You can now [grab](https://repo.almalinux.org/almalinux/8.5/isos/ppc64le/) the image and take a look at the [Release Notes](https://wiki.almalinux.org/release-notes/8.5-ppc.html) for the changelog and installation instructions.

## Containers and Cloud Too
All you Container and cloud fans will be happy too. PowerPC 8.5 container images are already available on Docker Hub and should be updated to the latest stable images real soon and we'll providing a generic cloud (cloud-init) image in the repository as well.

## Thanks
AlmaLinux would like to express our sincere gratitude to those that lent an extra hand to make this release possible. This release would not have been possible without the tremendous support of both the [Oregon State University Open Source Lab](https://osuosl.org/) as well as researchers from [CERN](https://home.cern/) and dozens of other PowerPC community members, who have provided resources, testing, feedback and more to help us build and fine tune every aspect of this release. We proud to be a part of, and work with such an amazing community of people across the globe.

## How to help
As always, your contributions, feedback and bug reports help make AlmaLinux great. Please, report any bugs you may see on the [Bug Tracker](https://bugs.almalinux.org/). Join the party on the [AlmaLinux Community Chat](https://chat.almalinux.org/) and ask any question you have on our AlmaLinux Community Forum and on Reddit. Catch us on Twitter too.

Looking forward to move releases soon!
How to make a static field accessible only in its class in TypeScript?
Tags: typescript
Published: 2022-04-30 00:00:00

---
  title: How to make a static field accessible only in its class in TypeScript?
  published: true
  tags: TypeScript
  date: Sat Apr 30 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-static-fields-accessible-only-in-class-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-31a0539931ae2ab873f79d1ee5a12b4b.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-static-fields-accessible-only-in-class-typescript)
  
To make a static field accessible only in its class, you need to make the static field into a private static field using the `private` keyword before the static field in TypeScript.

### TL;DR

```ts
// a simple class
class Person {
  name: string;
  age: number;

  // a private static field
  private static className = "Person";

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// the `className` static field
// cannot be accessed from outside the class
console.log(Person.className); // This is not allowed now ❌
```

For example, let's say we have a class called `Person` with 2 fields, a constructor and a static field like this,

```ts
// a simple class
class Person {
  name: string;
  age: number;

  // static field
  static className = "Person";

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// the `className` static field
// can be accessed from outside the class
console.log(Person.className); // This is allowed now
```

Currently, in the above class, the `className` static field is public and can be accessed from outside the class.

To make it only accessible within the `Person` class, we need to add the `private` keyword before the static field like this,

```ts
// a simple class
class Person {
  name: string;
  age: number;

  // a private static field
  private static className = "Person";

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// the `className` static field
// cannot be accessed from outside the class
console.log(Person.className); // This is not allowed now ❌
```

As you can see from the above code that when we try to access the `private static field` called `className` from outside the class, the TypeScript compiler is showing an error saying `Property 'className' is private and only accessible within class 'Person'`, which is what we want to happen.

We have successfully made the static field to be accessible within its class only in TypeScript. Yay 🥳!

See the above code live in [codesandbox](https://codesandbox.io/s/make-static-fields-accessible-only-in-class-typescript-24gcx3?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
One rule for optimizing images on the web
Tags: nextjs, seo, performance
Published: 2022-04-30 14:35:23

---
title: One rule for optimizing images on the web
published: true
date: 2022-04-30 00:00:00 UTC
tags: nextjs, seo, performance
canonical_url: https://bstefanski.com/one-rule-optimizing-images-web
---

A good rule of thumb for optimizing images: **Lazy load everything that is below the fold, eagerly load everything above the fold, with fetch priority set to high**. Serve all images in webp/avif format.

Although native lazy loading is getting traction right now. I would not recommend using it, since it is only lazy-loading if the user's network is slow, which is unreliable and can hurt your website's bandwidth usage. Read more this new feature here [https://addyosmani.com/blog/lazy-loading/](https://addyosmani.com/blog/lazy-loading/)

AVIF images are ~20% smaller than WebP ones, but they also take 20% longer to generate. AVIF is [supported only by Chrome & Firefox](https://caniuse.com/avif). Use AVIF if you generate images in build time and WebP if in runtime.

WebP is [well supported](https://caniuse.com/webp) in all major browsers, except older versions of Safari, so remember to always have a fallback for JPEGs

There are at least two ways to serve optimized images in HTML:

- [Picture element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)
- [Img element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes) 

Both work very similarly, but the picture element allows to declare fallback whilst img element does not.

If you're using Next.js I highly recommend checking out next/image component. It has great defaults, adapts best practices, and works great in small & big scale projects. [https://nextjs.org/docs/basic-features/image-optimization](https://nextjs.org/docs/basic-features/image-optimization)
Case Studies
Tags: javascript, webdev, beginners, programming
Published: 2022-04-29 23:57:45

[Daffodil](https://www.infotonicsmedia.com/case-studies/) is a trusted software product engineering partner to 100+ dynamic organizations across the globe. They innovate with the latest technologies, and design approaches to build cutting edge software products. Daffodil’s software development capabilities are recognized in reports by leading research analysts.