teleren/devto huggingface dataset:
Introducing offline-docs, collection of scripts to generate offline documentation of open-source projects
Tags: documentation, showdev, productivity, discuss
Published: 2022-04-17 01:35:49

[Offline-docs](https://github.com/naveennamani/offline-docs) is a repo with collection of scripts to build offline documentation for your favourite frameworks/libraries. Simply search :mag_right: for your tool, copy/paste the build commands and enjoy.

## But why? / Motivation

Learning or working on a new language often requires referring to the official docs multiple times. With the rise of **Static Site Generation (SSG)** many documentation sites are now open-source  and can be built for offline usage. This project aims to collect all such websites and the build commands to have a knowledge of widely used SSG tools.

## How to use this repo

Details about each tool such as website, source code repo and build commands are given in README page of the [repo](https://github.com/naveennamani/offline-docs). Once you are on the repo

1. Find the framework/library/tool for which you want to build the documentation (you can search in the [Available Tools](https://github.com/naveennamani/offline-docs#available-tools) or with <kbd>Ctrl</kbd>+<kbd>F</kbd>)
1. Open a new terminal
1. Copy paste the build commands shown for the tool
1. Open the output dir as mentioned in the last command (or) unarchive the
   .tar.gz file in your preferred location and rename the folder
1. Use any static site serving tools like
   [serve (npm package)](https://www.npmjs.com/package/serve) or simply
   `python -m http.server`. (We recommend using serve package)

## Currently available tools

- Blockchain
  * ethereum
  * hardhat
- Build tools
  * vite
- CSS frameworks/libraries
  * daisyui
  * material ui
  * tailwindcss
- Frontend javascript frameworks/libraries
  * reactjs
  * vuejs v3
- Javascript testing libraries
  * chaijs
  * mochajs
- Other
  * eslint

Many more websites are coming soon (including Mozilla Developer Network (mdn) :wink:). So, go to the repository, create a star :star: and show your love :heart: towards the project.

Thanks for your time!

---

Visit my blog for latest articles related to web development
[https://naveennamani.github.io/blog](https://naveennamani.github.io/blog) and
for projects like this.
Don't use window.event
Tags: javascript, dom, warning
Published: 2022-04-17 01:20:18

---
title: "Don't use window.event"
published: true
description: "A warning on using event.window"
tags: ["JavaScript", "DOM", "warning"] 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wv87v06mwf5ns2jy0gqi.jpg
canonical_url: https://ashutoshbw.github.io/blog/window-dot-event/
---

Suppose you have the following HTML and JavaScript:

```html
<button id="btn">Click me</button>
```

```js
let myBtn = document.querySelector("#btn");

myBtn.addEventListener("click", () => {
  console.log(event);  
});
```

What do you think clicking on the button will happen?

If you think it will not work, saying `event` is not defined or something like this, you will surprisedly get the right `Event` object for that event, unless your browser has stopped caring about it.

What actually happens is that `event` is a read-only property of `window` and outside of event handlers, this `event` is always `undefined`. But when an event happens, only inside that corresponding event handler, it has respective `Event` object as it's value if your browser has support for it.


**⚠️ Warning**: It's not recommended by [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/event) and is a deprecated feature and it may be dropped if supported. So you should avoid accessing `Event` objects like this and instead use the first parameter of event handler for accessing it. For example:
```js
myBtn.addEventListener("click", event => {
  console.log(event);  
});
```
How to create a field inside a class in TypeScript?
Tags: typescript
Published: 2022-04-17 00:00:00

---
  title: How to create a field inside a class in TypeScript?
  published: true
  tags: TypeScript
  date: Sun Apr 17 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/create-field-class-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-25faaf4793219ab759c2d814fbab2f7e.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/create-field-class-typescript)
  
To create a field inside a class, you can use one of the following methods:

- [Create a field with a type](#create-field-type)
- [Create a field and initialize a value and let TypeScript infer the type](#create-field-with-value)

### <a name="create-field-type"></a> Create a field with a type

To create a field with the type you can first write the name of the field inside the [class](https://melvingeorge.me/blog/create-class-typescript) followed by the `:` symbol (colon) and then the type you need to use for the field.

It can be done like this,

```ts
// create a field inside
// class with `string` type
class Person {
  name: string; // <- this is a field with type
}
```

**NOTE: By default, every field is `public` and is `mutable` if no modifiers are applied.**

### <a name="create-field-with-value"></a> Create a field and initialize a value and let TypeScript infer the type

To create a field and initialize a value, you can write the name of the field inside the [class](https://melvingeorge.me/blog/create-class-typescript) followed by the `=` symbol (assignment operator), and then the value you need to initialize the field with. By doing so TypeScript will automatically infer the type based on the value that is assigned to the field.

It can be done like this,

```ts
// create a field inside
// class and initialize the value
class Person {
  name = "Anonymous"; // <- this is a field initialised with a `string` value
}
```

**NOTE: By default, every field is `public` and is `mutable` if no modifiers are applied.**

See the above codes live in [codesandbox](https://codesandbox.io/s/create-fields-class-typescript-fxv7xe?file=/src/index.ts).

That's all 😃!

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

---
C++ Axioms
Tags: cpp
Published: 2022-04-16 23:42:27

My note for c++

### 1.1.1 

#### Data type `char16_t`, `char32_t`, or `wchar_t` with variables assigned to an octal representation of unicode characters are converted to a decimal when used with `std::cout` while `char` in Octal representation is converted to a string literal. 

Example 

```cpp
#include <iostream>

int main()
{
    // The following are Octal representation of 
    // a unicode character M.
    char16_t d1 = '\115';
    char32_t d2 = '\115';
    wchar_t d3 = '\115';
    char d4 = '\115'

    std::cout << d1 << " is the \x4d greatest number of all" << std::endl;
    // d1, d2, d3 are converted to decimal, hence shows 77 
    // in the output but d4 will be converted to character M. 

    return 0;
}
```

### 1.1.2 

#### Hexadecimal (hex for short) representation uses `A, B, C, D, E, F` to represent numbers after 9. For example, 4D in hex is equivalent to 77 in decimal because D is equal to 13 and `4 * 16 + 13 = 77`. 

Example

```cpp
#include <iostream>

int main()
{
    char16_t yo = '\x4d'; 
    // char16_t type converts to hex int with std::cout per 1.1.1
    std::cout << yo << " is the greatest number of all " << std::endl;
    // 77 is the greatest number of all
    return 0;
}
```
Note: Had `A B C D E F` not been used, it would have been more difficult to represent decimal numbers like 77 because `\x4(13)` is longer in length, and without the brackets, it will convert to a much bigger number. 

### 1.1.3

#### `char16_t a = 'abc'` then its output is `25187`

> ASCII code for 'abc' is '61-62-63' hex. Without the dash, '616263' in hex is 6382179 in dec. The largest integer value allowed for char16_t is 2^16. Hence, 6382179 % 2^16 = 25187

Q: Can the above be generalized? I.e. the conversion process from char16_t assigned to an integer is ascii code for each character in hex, convert to decimal, then find the remainder for the largest value permitted for that data type. 

### 1.1.4

#### `char32_t b = '\a'` then its output is `7`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skc2xhu93yvar0g7ozqx.png)
 
[source](https://en.wikipedia.org/wiki/Escape_sequences_in_C)

### 1.1.5

#### `char32_t b = '\ab'` then its output is `1890`

> '\a' is `7` in ASCII code and 'b' is `98` in ASCII code in decimal which `62` in hexadecimal. Hence `762` when joined represents `7*16^2+6*16+2 = 1890` 

#### Data type `char16_t`, `char32_t`, or `wchar_t` outputs a remainder in decimal value of its hexadecimal representation of variables assigned to string literals given the size of each type.

Example

```cpp
#include <iostream>

int main()
{

    char16_t a = 'abc'; 
    // outputs 25187
    // '616263' hex -> 6382179 in dec -> 6382179 % 2^16 = 25187
    
    char32_t b = '\ab'; 
    // outputs 1890
    // \ is octal -> 

    char32_t c = 'abcabc';  // 1667326563


    wchar_t d = 'abcabc';   // 1667326563
    long e = 123123123123123;  // 123123123123123

    std::cout << a << "\n" << b << "\n"  << c << "\n" << d << "\n" << e << std::endl;
    return 0;
}
```
Introducing Pixel Art for NFTs as WEB3.0 privacy and cost matter
Tags: opensource, react, javascript, blockchain
Published: 2022-04-16 22:53:06

The definition of pixel art has been a constant subject of discussion between artists. In general, it is characterized by the importance that is placed in each pixel of an image by the artist. Therefore, an image in which the pixels are visible and discernible from one another, but were not placed with intent or coordination, such as in a low resolution photograph, is not necessarily considered pixel art.

It is by constraints rather than by will that most NFTs are pixelated, it is in the desperate hope to be able to generate using a computer some set of pictures giving the same level of entertainment embedded into a collection such as "Bored Ape Yacht Club" or again in the hope of storing thousands of aggregation of thousands image into a super-computer-state (blokchain) being replicated sometimes hundreds of time at separate worldwide locations and updated/synchronized every block created containing all the new transactions and contracts inside of it sometimes and ideally storing some 1-100Kb of data like a pixel art takes in average.

NFTs being minted on the behalf of images taken from your own private life can exposes you to risks, as, already, identity theft has arisen on social media, it is not the theft that is so threatening since it is easier to get the proper issuer of the image shared but supposedly more the details and trace it leaves, at first it can appears to be image meta-data such as device and location but at the ends it can be something bigger than the pictures,  the weather the effects you choose and all the parameters being details to human and “gold” to surveillance central agency.

With pixel art, meta-data often are removed automatically and more than that fake photo can be easily made by everyone.

And foremost, every information you decide to publish on the Internet can be copied and stored in a manner that it can outlive you, and get beyond the intent you sue when dealing with the platform initially.

This is why, not leaving my will and idea without a proper example of solutions I found, was like to build an editor for pixel art (react, javascript, open-source) and https://pixa.pics/ has :

1 smart import feature with fancy resizing and color quant. algorithms
1 powerful system of layers
16 Painting tools
23 Selection tools
12 Effects (color tuning)
24 Filters (color correction)

But, to you, there, the solutions may be another idea because "we" moves information technology forward.
Close to the finish line
Tags: telescope, github, turborepo
Published: 2022-04-16 22:52:23


We are now less than a week away from the final [Telescope](https://github.com/Seneca-CDOT/telescope) release: version 3.0. Here's a quick update of what I've been up to.

## Turborepo CI cache attempt

With my latest [PR](https://github.com/Seneca-CDOT/telescope/pull/3458), I added support for Turborepo for our tests. I also tried to add the ability to keep a Turborepo cache as GitHub Artifacts in CI.

I used this [GitHub Action](https://github.com/felixmosh/turborepo-gh-artifacts) by Felix Mosheev which basically creates a local server in CI that can be used to upload/download the cache during a CI run. The Turborepo [docs](https://turborepo.org/docs/features/remote-caching#custom-remote-caches) mention that Remote Cache can be self-hosted and used with the command:

```sh
turbo run build --api="https://my-server.example.com" --token="xxxxxxxxxxxxxxxxx"
```

Felix has a fully working [example](https://github.com/felixmosh/turborepo-gh-artifacts-example) that I used as a guide. To run the Action we need a token that is used to connect to the local server. We are using the unique GitHub sha as the token each time.

Unfortunately even after [Dave](https://github.com/humphd)'s [follow-up](https://github.com/Seneca-CDOT/telescope/pull/3468) [attempts](https://github.com/Seneca-CDOT/telescope/pull/3471) to make this work, the local server starts but no cache is saved. I don't think this is an urgent issue to get done before the 3.0 release so I might end up keeping this one for later.

## Add Twitch URL to Sign Up flow

The other [issue](https://github.com/Seneca-CDOT/telescope/issues/2843) I started working on is allowing the frontend Sign Up page to take a Twitch URL. [Thanh](https://github.com/tcvan0707) is also doing the same but for Youtube.

During a meeting, Dave suggested to rework the feed-discovery to handle not only blogs, but also Youtube and Twitch channels and he did so in a live coding session with Thanh and I. I reviewed his [PR](https://github.com/Seneca-CDOT/telescope/pull/3488) and I think it should be ready merged soon.

Youtube provides RSS feeds for all channels. You just need the Youtube channel id number and then put it at the end of this URL: `https://www.youtube.com/feeds/videos.xml?channel_id=`

Twitch however does not do the same. This is were [RSS-Bridge](https://github.com/RSS-Bridge/rss-bridge) comes in handy. It creates an RSS feed for websites that don't provide one.

Finishing up the Sign Up flow is important so that future students can get started with Telescope by signing up directly on the website. Other students have already done the heavy lifting in this area but adding Youtube and Twitch support will be the cherry on top. I'll have an update on this in next week's blog post.
Parámetros opcionales y nullish coalescing en Typescript
Tags: typescript, webdev, beginners
Published: 2022-04-16 22:26:00

> Los parámetros opcionales siempre deben ir al final
> 

función con parámetros obligatorios:

```jsx
export const someFunction = (param1: string, param2: number, param3?: boolean) => {

  return {
    param1,
    param2: param2 ?? 10,
    param3: param3 ?? false
  }

}
```

También está en uso el `nullish coalesing`. (`??`). Que es “si `param` viene `null` o `undefined` asigna este valor que pongo a la derecha.

Es importante destacar que los valores que se aplicarían en caso de ir `null` o `undefined`, no sucederá para el `param2`. Porque es un dato de entrada obligatorio, y ese mismo dato es el que tendrá salida.

A excepción del `param3`. Ese puede quedar indefinido. Y sí aplicaría el `nullish coalesing`.

Otra manera de definir una función con parámetros opcionales:

```jsx
export const otherSomeFunction = (param1: string, param2: number = 23, param3: boolean = false) => {

  return {
    param1,
    param2,
    param3
  }
```

En caso que no se proporcione datos para las props `param2` y `param3` se asignará el valor por defecto que se les está colocando.

quizá te preguntarás si puedes usar `||` en lugar de `??` para retornar un valor por defecto en caso que la variable esté nula o indefinida. La respuesta es NO. 

`??` ⇒ se aplicará la instrucción en caso de que el espacio en memoria sea `null` o `undefined`.

`||` ⇒ se aplicará la instrucción en caso de que el espacio en memoria sea `0`, `‘’`, `false`, `undefined`, `null`.

Notas del **Curso de Typescript: Tipos Avanzados y Funciones - @Platzi**
Get upto 4500 USDT just with inviting friend on AAX
Published: 2022-04-16 22:15:32


AAX provide high rewards with you invite your friends to only register and complete verification.
50 USDT/1 friends.
and the top three of inviting ranking get free up to 4500 USDT free.
there are more interesting and exciting reward option in AAX.
please register and get your free rewards.
https://www.aax.com/invite/sign-up?inviteCode=L99A0LIXJAg8k, 
AAX rewards 50 USDT，start earning now！
Through Ping Pong, I learn that Consistency and Mentorship are Essential 📈🏓
Published: 2022-04-16 21:48:05

As a software engineer, I always think about how I can improve my skills quickly, and I can build and deliver applications faster than now. Recently, I proved that consistency and mentorship are really important to improve my skills not only as a software engineer, but I think they can be implemented for any type of field.

I came up with consistency and mentorship through my ping pong skills. I have a hobby, which is playing ping pong. I started playing ping pong when I was in college around 2014 (I wish I could start early). However, when I started to play ping pong, I did not have a routine schedule to play or practice. After moving to the US, I have a ping pong buddy, Jayson, and we started playing ping pong every week in August 2021. Fun fact, we planned to play ping pong together in May 2020, but pandemics came. Finally, we made it happen last year.

When we played together, sometimes, I brought my GoPro to record our game. Therefore, we can see what is our mistakes. After around 7 months, we have several videos that we have already recorded. Amazingly, we can see many improvements even though we are not at the advanced level yet. Our improvement after playing consistently every week shows us the result. Check out the video below. 
{% embed https://youtu.be/LGlIpDX7RIw %}
I was so happy with the result because I haven’t improved that fast before. If you know about Pingpong, I could not return backspin with topspin, but now, I can do that. Consistency brought me to another level.

After I saw our videos, that make me realized that if people are consistent to do something, it will not disappoint the result. I also remembered that my friend, Alfian, mentioned a statement from James Clear’s book, Atomic Habit, if we can get 1% better every day for a year, we will be better 37 times at the end of the year. You can watch the video below as well. 
{% embed https://www.youtube.com/watch?v=U_nzqnXWvSo %}

Why do I think about mentorship also? In fact, in the beginning, when Jayson and I played for the first time, I was better than him because I play ping pong earlier than him. Therefore, I gave him some advice to improve his skills, and now, he can beat me most of the time. If there is someone who can mentor and guide you, I’m pretty sure it will speed up your improvements.

Now, I think this is the time to prove it in my software engineering skills. I start to have algorithm night every Tuesday with Jessica, and I make a commitment to creating a blog post every month. I can’t wait to see how far my skills go next year.

Leave a comment below if you think consistency and mentorship are essential, and I’m curious how many people players see this post?
ReactDOM.render is no longer supported in React 18.
Tags: javascript, webdev, react, devops
Published: 2022-04-16 21:19:36

ReactDom.render is no longer supported in React latest update 18.0.0. UsecreateRoot instead untill you switch to the new API, your app will behave as it it's running React 17.
If you will try to run the ReactDom.render in index.js
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pylmg2ji7c59oj8e0ebg.png)
 
then you will get warning like this.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrikorjh2r352nk2qd77.png)
A better alternative of this warning is change your dependency version of `react` and `react-dom` to some older version like `17.0.2` or some other which is better for you and for your project in `package.json` file inside the your project
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8131cqemimzwi62nffsk.png)<br>
 
or else you can use different method as well.
To solve the error, create a root element and use the `ReactDOMClient.render` method instead.

Make sure you are changing the `index.js` file
```JavaScript

import {StrictMode} from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// ⛔️ ReactDOM.render is no longer supported in React 18.
// Use createRoot instead. Until you switch to the new API,
// your app will behave as if it's running React 17.
ReactDOM.render( // 👈️ deprecated starting React 18
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById('root'),
);
```

<br>

To solve the error, create a root element and use the `ReactDOMClient.render` method instead.


```JavaScript
import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';

import App from './App';

// 👇️ IMPORTANT: use correct ID of your root element
// this is the ID of the div in your index.html file
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ if you use TypeScript, add non-null (!) assertion operator
// const root = createRoot(rootElement!);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

```
<br>

**Let's see what's new in this React!!**

React 18 introduces a new root API which provides better tools for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.

```JavaScript
// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);
```


for more information plase visit it's official website:
[Reactjs](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)