teleren/devto huggingface dataset:
VS Code Shortcuts you Must Know
Tags: vscode, javascript, codenewbie, webdev
Published: 2022-09-18 11:48:26

🔷 Search for a File : Ctrl + P 🔷

🔷 Toggle Comment Block : Shift + Alt + A 🔷

🔷 Find A Word/Phrase in current file : Ctrl + F 🔷

🔷 Select Current Line : Ctrl + L 🔷

🔷 Toggle Sidebar : Ctrl + B 🔷

🔷 Delete Current Line : Ctrl +Shift + K 🔷

Follow @devkshitij7  
For More Amazing Stuff!!!
Array to String Without Commas in JavaScript
Tags: javascript, webdev, beginners, tutorial
Published: 2022-09-18 11:06:32

In this article, you’ll discover how to convert an array to a string without commas. By no commas, I mean no separator between your array elements (words) or a separator different than a comma.

## How to Convert Array to String Without Commas

In JavaScript, all arrays have a built-in method called `join()`. You can use it to convert an array to a string without commas. You can call the join method with an empty string as a parameter (`join("")`). The method will return a string with all the array elements concatenated.

## Concrete Example: Join Array to String

### Without Commas

As mentioned in the above paragraph, you can use [the join method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) to create a string without commas from your array.

This method works on an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) and takes up to one parameter:

- **no parameter:** your array will be joined with commas (`["hello", "world"].join()`)
- **with parameter:** your array will be joined with the string provided as a parameter (`["hello", "world"].join("-")`)

Let me give you an example without commas:

```javascript
const helloMagicWorldArray = ["Hello", "Magic", "World"]
const helloMagicWorldString = helloMagicWorldArray.join("")

console.log(helloMagicWorldString)
// Output: "HelloMagicWorld"
```

### With Separator

I suppose you start the get the idea! If you want to join your array with something different than commas, you can pass the separator of your choice.

```javascript
const helloMagicWorldArray = ["Hello", "Magic", "World"]

console.log(helloMagicWorldArray.join("/"))
// Output: "Hello/Magic/World"

console.log(helloMagicWorldArray.join(" - "))
// Output: "Hello - Magic - World"
```

If you want to go further, you can learn how to:

- [filter an array in JavaScript](https://herewecode.io/blog/filter-array-javascript/)
- [replace item in array with JavaScript](https://herewecode.io/blog/replace-item-array-javascript/)
- [remove null values from an array in JavaScript](https://herewecode.io/blog/remove-null-values-from-array-javascript/)

---

**Thanks for reading. Let’s connect!**

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. [Join me on Twitter for more.](https://twitter.com/gaelgthomas) 🚀🎒
How to get the IP address of a client in Node.js
Tags: javascript, node, beginners, tutorial
Published: 2022-09-18 10:44:20

## What is an IP Address?

An Internet Protocol(IP) address also known as a logical address is given by the internet service provider(ISP) which uniquely identifies a system over the network. IP address keeps on changing from time to time.

A small node.js module to retrieve the _[request’s IP address](https://www.npmjs.com/package/request-ip)_. It looks for specific headers in the request and falls back to some defaults if they do not exist.

The user IP is determined in the following order:

1.  `X-Client-IP`
2.  `X-Forwarded-For` (Header may return multiple IP addresses in the format: “client IP, proxy 1 IP, proxy 2 IP”, so we take the first one.)
3.  `CF-Connecting-IP` (Cloudflare)
4.  `Fastly-Client-Ip` (Fastly CDN and Firebase hosting header when forwarded to a cloud function)
5.  `True-Client-Ip` (Akamai and Cloudflare)
6.  `X-Real-IP` (Nginx proxy/FastCGI)
7.  `X-Cluster-Client-IP` (Rackspace LB, Riverbed Stingray)
8.  `X-Forwarded`, `Forwarded-For` and `Forwarded` (Variations of #2)
9.  `req.connection.remoteAddress`
10.  `req.socket.remoteAddress`
11.  `req.connection.socket.remoteAddress`
12.  `req.info.remoteAddress`

If an IP address cannot be found, it will return `null`.

### How to get the IP address of a client in Node.js

To get the IP address of a client, We will use the  [request-ip](https://www.npmjs.com/package/request-ip)  package in node.js.

#### Step 1: Create Node JS App

Execute the following command to create the node js app:

```bash
mkdir node-ip
cd node-ip
npm init -y
```

**Read Also:** [How to Install Node.js and NPM On Ubuntu 20.04](https://techvblogs.com/blog/install-nodejs-and-npm-ubuntu-20-04)

#### Step 2: Install Express and request-ip library

Execute the following command to install express and request-ip. Usually, We will use express as our web server.

```bash
npm install express
npm install request-ip --save
```

#### Step 3: Create a Server.js File

Create a file named server.js in your project root directory and add the following code to that file:

```javascript
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
```
#### Step 4: Import request-ip package into node application

```javascript
const express = require('express')
const requestIp = require('request-ip')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  var clientIp = requestIp.getClientIp(req)
  res.send(`Your IP Address is ${clientIp}.`)
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
```

#### Step 5: Start Development Server

Execute the following command to run the development server:

```bash
node server.js
```

After running the above command and open  `http://localhost:3000` in your browser.

Thank you for reading this article.
Weekly dev insights (week 37)
Published: 2022-09-18 10:41:42

**TL;DR**
1. [Where to find remote work](#1.-Where-to-find-remote-work)
2. [Angular project structure](#2.-Angular-project-structure)
3. [RxJS patterns in Angular](#3.-RxJS-patterns-in-Angular)


## 1. Where to find remote work
Useful list of platforms where you can find remote work
{% embed https://dev.to/k_ivanow/finding-remote-work-in-2022-26j %}

## 2.Angular project structure
How to structure Angular project, what is part of core, shared, and features module? Of course, if you are still using NgModules you can read here 
{% embed https://medium.com/@shijin_nath/angular-right-file-structure-and-best-practices-that-help-to-scale-2020-52ce8d967df5 %}

## 3. RxJS patterns in Angular
Check RxJS patterns by Deborah Kurata from ng-conf2020 on pluralsight for [free](https://app.pluralsight.com/course-player?clipId=ba4a5144-0eb7-4c65-8f39-26b89171292e)


#### What are your insights from last week? Feel free to share.


If you like this short article, feel free to comment, or share it. If you dont like, do it as well and tell me your remarks ;)

Don't miss any new blog by following me here. 
Follow me on [Twitter](twitter.com/smetankajakub_)

Visit my website [smetankajakub.com](https://smetankajakub.com)
can anyone suggest about a reader narrative button like medium
Tags: react, nextjs, javascript, mui
Published: 2022-09-18 10:33:04

the great medium dot com has a buttons that reads out the text of the whole website ? is there ant react component available that can read them ? i guess there must be something like that available. if it is not available through any matarial ui / react library can anyone suggest how to create such from the scratch?  

this button will be most welcomed for the low visioned people so let me know the details about it.
The Black Box of Software Development
Tags: beginners, programming, productivity, architecture
Published: 2022-09-18 10:29:26

**Think of software development as a box.**

Now, this box is transparent at the start, but as you develop the application this box will get darker and **darker**.

Initially, you can see inside the transparent box, you can see all the code bits and pieces that keep the box together.

A new task was assigned to a developer who starts working on it right away putting the implemented code in the box. The box gets **darker**. Then another bit of code by another developer is put inside the box and the box, yet again, gets **darker**.

Every new code from tasks, iterations, phases, or sprints, however you want to call it, will make this box ever so slightly darker up to the point when this box is **completely black**.

Developers can't see the contents of the black box, they don't know what's going on inside anymore. They have no idea what's keeping the box together.

**A team's job is not to let the box become completely black.**

*What prevents the box to be completely black?*

It's well-defined specifications. It's good tests, be it unit tests, integration, or end-to-end. It's also sane task deadlines, and a well-spent time in and around development reviews. It's refactoring stale code.

Finally, it's team energy of overcoming the hurdles of a complex project and creating a solid architectural base for this imaginary box.

**Remember, good code is just a side-effect of all of the above.**


------------------------------

_Image credit: Thorn Yang on Pexels._

_Stay tuned and if you liked this post, please share it and comment on it below._
Fullscreen menu with hover animation - A step-by-step guide
Tags: css, webdev, html, tutorial
Published: 2022-09-18 10:15:58


![Fullscreen Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yetiiez3g0n1m3x2u0dp.png)

## <u>HTML</u>
For HTML we need a container with a list of menu items.

```html
<div class="container">
    <ul class="menu">
        <li class="menu-item">HOME</li>
        <li class="menu-item">WELCOME</li>
    </ul>
</div>
```

## <u>CSS</u>
For CSS, first we'll style the container.

We'll position it absolute, hovering the whole screen by setting top, bottom, left and right properties to zero.

Then we'll position the list in center using flexbox and set the background color to purple.

```css
.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(167, 118, 221);
}
```
      
Now we're styling the list.

Remove the paddings and list style type.

We'll also display menu items in columns.

```css
.menu {
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
}
```
      
Now let's style manu items.

We'll set width, height and font size.

Now we'll displat text in center using flexbox and set transition so that hover effect (which we'll add later) is smooth.

Of course, we'll set cursor to pointer and a bit transparent text color.

```css
.menu-item {
    height: 70px;
    width: 100vw;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease-in;
    cursor: pointer;
    color: rgba(0,0,0,.4);
}
```
      
On hover, we'll increase font size and set color to white.

We'll add a little text shadow and increase font weight.

With transition, this change will be nice and smooth.

```css
.menu-item:hover {
    font-size: 35px;
    transition: .3s ease-out;
    color: #fff;
    text-shadow: 0px 0px 50px rgb(161, 95, 232);
    font-weight: 600;
}
```
      
And that is it.

You can get the full code and video tutorial [here](https://designyff.com/code/hover_menu_full_screen).

Thank you for reading. ❤️
Tailwind CSS
Tags: css, tailwindcss, webdev, programming
Published: 2022-09-18 10:06:09

**Tailwind CSS** can be used to make websites in the fastest and the easiest way.

**Tailwind CSS** is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. 

The beauty of this thing called tailwind is it doesn’t impose design specification or how your site should look like, you simply bring tiny components together to construct a user interface that is unique. What Tailwind simply does is take a ‘raw’

 CSS file, processes this CSS file over a configuration file, and produces an output.

**Why Tailwind CSS?**

**1.** The faster UI building process
**2.** It is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in the traditional approach. 


**Advantages of Tailwind CSS:**

**1.** No more silly names for CSS classes and Ids.
**2.** Minimum lines of Code in CSS file.
**3.** We can customize the designs to make the components.
**4.** Makes the website responsive.
**5.** Makes the changes in the desired manner. 
**6.** CSS is global in nature and if make changes in the file the property is changed in all the HTML files linked to it. But with the help of Tailwind CSS, we can use utility classes and make local changes.
 
[Why Should you use Tailwind CSS ?](https://www.youtube.com/watch?v=hdGsFpZ0J2E)

**❤️ Thank you very much for reading ❤️
  Like | Share | Follow**
Preview environments in Kubernetes
Tags: kubernetes, gitops, aws, devops
Published: 2022-09-18 09:27:41

If you’re developing on Kubernetes, we’d love to hear your feedback 🙏

We have a new feature (almost) ready for release: Kubernetes Preview Environments.

➡️ **The problem with previews in Kubernetes:**

One of the major challenges we’re seeing is the lack of any concept of native preview environments in Kubernetes. 

When a feature has a lot of dependencies and related infrastructure, setting up a test environment can require an unreasonable amount of DevOps effort. Our new feature lets you automate that effort away.

The Tech Amigos team has been working hard on this one, and now we’re at the stage where we want to hear from some actual users!

➡️ **How Diego Preview Environments work:**

With Diego Preview Environments, you can easily test new features and verify changes within a production-like Kubernetes environment, without actually disrupting production.

Diego allows you to define a “recipe” for your preview environment that includes dependent applications and services, in a simple `diego.yaml` file. 

Based on this recipe, Diego instantly spins up an ephemeral containerised environment (including dependencies!), without having to manually set up any of the infrastructure. Diego will check the version that needs to run and provision the required resources and test data.

➡️ We’d love hear from you 👇

_Is this a challenge you’re facing? 
_
Would you be willing to spend a few minutes playing with the new feature and telling us what you think?

⚠️ **This is not a sales pitch - we do not have a commercial model yet…**

Any feedback is greatly appreciated 🙏
How to easily make Wordpress & WooCommerce work with ngrok
Tags: wordpress, php, webdev, tutorial
Published: 2022-09-18 09:26:27

Ngrok is a super useful CLI tool which enables you to expose your localhost HTTP servers to an internet-facing HTTPS endpoint, for free!
You can get it here: [https://ngrok.com/](https://ngrok.com/).

I've been struggling to find a good, short tutorial on how to make it work properly with my local WooCommerce store, so hopefully you will find this helpful:

## 1. Install the 'Relative URL' plugin
First off, make sure that your Wordpress website issues relative URLs by installing this plugin: [Relative URL](http://wordpress.org/plugins/relative-url/).

## 2. Make WP serve itself via your tunneled hostname
Add the following lines at the end of your `wp-config.php` file:
```php
define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);
```

### 3. Instruct ngrok to rewrite the host header
Add `--host-header=rewrite` to your ngrok command.
For example:
```bash
ngrok http --host-header=rewrite http://localhost:8080
```

Done 🎉

P.S: If you're a WooCommerce store owner and would like to easily sync it with your Google Sheets, [check-out our quick guide on how to do it](https://blog.playmellow.com/how-to-connect-woocommerce-to-google-sheets/).

---
Originally posted [here](https://blog.playmellow.com/how-to-make-wp-and-ngrok-work/).
Javascript - Inheritance ⬆
Tags: javascript, webdev, beginners, programming
Published: 2022-09-18 09:20:06

### Inheritance 

📕 - Mechanism which acquires `properties` and `methods` from the parent.

Let's achieve:

```javascript
class Parent {
    parentProperty;

    constructor(parentProperty) {
        this.parentProperty = parentProperty;
    }

    parentMethod() {
        return 'I am parent class method';
    }
}

class Child extends Parent {
    constructor() {
        super('parent property'); // setting parent property from child.
    }
    childMethod() {
        console.log(this.parentMethod()); // accessing parent methods.
        console.log(this.parentProperty); // accessing parent property.
    }
}

const child = new Child();
child.childMethod();

> I am parent class method
> parent property

```
Here, `super()` refers to parent class constructor and `extends` is the key word used to inherit.

### Overriding

 👨‍👧 child class has same properties & methods like parent.


```javascript
class Parent {
    property = 'I am parent property';

    method() {
        return this.property;
    }
}

class Child extends Parent {

    // same parent property name.
    property = 'I am child property';

    // same parent method name.
    method() {
        console.log('I am a child method');
    }
}

const child = new Child();
child.method(); // overrides parent method and logs child details.
console.log(child.property); // overrides parent property and logs child property

> I am a child method
> I am parent property
```
### Accessing Static

👨‍🦲 child can also access static properties and methods.

```javascript
class Parent {
    static property = 'I am parent class static property';

   static method() {
        return 'I am parent class static method';
    }
}

class Child extends Parent {
}

// We can call static entity with Class name directly.
console.log(Child.property);
console.log(Child.method());

> I am parent class static property
> I am parent class static method

``` 
### Inherit Built-in classes

Javascript allows us to inherit from built-in classes like `Array`, `String`, `Map` etc.

```javascript
class MyArray extends Array {
    find() {
        console.log('This is my array find method');
    }
}

const myArray = new MyArray();
myArray.find();
> This is my array find method
```
In above case, find is the method of built-in `Array` whereas it is overridden in `MyArray` class. 

**Use**

Code reusability
How to include external resources into your executables in C++
Tags: cpp, tutorial, cmake
Published: 2022-09-18 09:03:34

Very often we need to include into our programs some resources like textures, sounds, static data etc. Usually, we distribute them with the programs as files. However, if you want to distribute the application as a single executable, it may become a bit tricky. 

## Classical approach for GCC

The most elegant way to do it, was described [here](https://stackoverflow.com/questions/4864866/c-c-with-gcc-statically-add-resource-files-to-executable-library). It works perfectly but only on Linux with GCC.

## Portable approach

If you want a portable approach for including your resources,
you can use `cmake` and generate a header file with the resources as strings.

Let's create a template with name `resource.h.in`:

```cpp
#ifndef RESOURCE_H
#define RESOURCE_H

#include <string_view>
namespace app {

static std::string_view kResource = "@RESOURCE_DATA@";

}
#endif  // RESOURCE_H
```

In your `CMakeLists.txt` you should read the resource from its file and use `configure_file` to generate a header:

```cmake
file(READ ${CMAKE_CURRENT_BINARY_DIR}/path/to/resource.data RESOURCE_DATA HEX)
configure_file(resource.h.in ${CMAKE_BINARY_DIR}/app/resource.h @ONLY)
```

We need to represent our data as hex-digits, overwise your binary data breaks the C++ strings. It isn't a big deal, you can later convert it into a normal string in your C++ code:

```cpp
  auto hex_str_to_str = [](std::string hex) {
    auto len = hex.length();
    std::transform(hex.begin(), hex.end(), hex.begin(), toupper);
    std::string new_string;
    for (int i = 0; i < len; i += 2) {
      auto byte = hex.substr(i, 2);
      char chr = ((byte[0] - (byte[0] < 'A' ? 0x30 : 0x37)) << 4) + (byte[1] - (byte[1] < 'A' ? 0x30 : 0x37));
      new_string.push_back(chr);
    }

    return new_string;
  };

auto data = hex_str_to_str(std::move(hex));
```

Unfortunately, if your resources are big, you may meet this error on Windows:

```
C2026:  string too big, trailing characters truncated
```

It happens if your string is bigger than [16380 chars](https://learn.microsoft.com/en-us/cpp/error-messages/compiler-errors-1/compiler-error-c2026?view=msvc-170).
Annoying… but it's possible to work around the problem.
We can reformat the strings in Python:

```python
"""Script to reformat long string for Windows"""
import sys

STEP = 16000
if __name__ == "__main__":
    filename = sys.argv[1]
    split = []
    with open(filename, "r") as file:
        while True:
            chunk = file.read(STEP)
            split.append(chunk)
            if len(chunk) < STEP:
                break

    with open(filename, "w") as file:
        file.write('"\n"'.join(split))
```

and run it in our `CMakeLists.txt`:

```
file(READ ${CMAKE_CURRENT_BINARY_DIR}/path/to/resource.data RESOURCE_DATA HEX)
configure_file(resource.h.in ${CMAKE_BINARY_DIR}/app/resource.h @ONLY)
execute_process(COMMAND python3 ${CMAKE_SOURCE_DIR}/cmake/split_string.py ${CMAKE_BINARY_DIR}/app/resource.h)
```

Of course, you need Python on your machine now. If it is an issue, you can find out how to do it in pure-CMake as well.
เปิด golangci ให้ใช้ gosec
Tags: go
Published: 2022-09-18 08:55:05

Linter หรือ Lint Tool อาจจะมีที่มาจากเครื่องมือในการกำจัดขน ออกจากเนื้อผ้าฝ้าย เพื่อให้ผ้ามีความสะอาดสวยงามพร้อมนำไปใช้งาน
ส่วนในด้าน Software Development เราก็มีการใช้ Linter ด้วยเหมือนกัน เพื่อตรวจสอบ Source Code ที่เขียนลงไป ว่ามีอะไรที่อาจจะก่อให้เกิด error หรือ bugs ไปจนถึงความเสี่ยงด้านความปลอดภัย เอาเป็นว่า อยากจะตรวจสอบอะไร ถ้าสามารถหา pattern ได้ก็ควรจะตรวจสอบได้หมด

ในภาษา Go เรามี linter ให้เลือกใช้เยอะจนเวียนหัว แต่ถ้าจะให้แนะนำสักตัว ก็คงไม่พ้นต้องมีตัวนี้เป็นหนึ่งในตัวเลือกแรกๆ นั่นก็คือ [golangci-lint](https://golangci-lint.run/)

ข้อดีอย่างหนึ่งที่ผมชอบส่วนตัวคือ มันเป็นตัวรวม linter อื่นๆมาไว้ให้แล้ว และหนึ่งในนั้นก็คือ gosec เพียงแต่ว่า มันจะถูก disable เอาไว้เป็น default
วันนี้ก็เลยจะมาแนะนำการเปิดใช้ gosec ใน golangci-lint กันดู

ก่อนอื่นก็ install golangci-lint กันก่อน ตามคู่มือนี้ได้เลย https://golangci-lint.run/usage/install/
ส่วนผม install ด้วย Go แบบนี้

> go install github.com/golangci/golangci-lint/cmd/golangci-lint@latest

จากนั้นก็ไปที่ repo โปรเจคของเราที่เขียนด้วย Go แล้วก็สร้างไฟล์ config โดยสามารถสร้างได้หลายแบบ ตามนี้

.golangci.yml
.golangci.yaml
.golangci.toml
.golangci.json

โดยผมจะสร้างเป็น .golangci.yml

จากนั้นก็ลงรายละเอียดในไฟล์แบบนี้

```yaml
linters:
  enable:
    - errcheck
    - gosimple
    - govet
    - ineffassign
    - staticcheck
    - typecheck
    - gosec
linters-settings:
  gosec:
    excludes:
      - G303
```

ผมใส่ enable ตัว default ของ golangci-lint เอาไว้ก่อน และเติม gosec เข้าไปในลิสต์
ทีนี้ในกรณีที่ gosec มันสแกนยุบยับไปหมด และเราอยากจะปิดบางตัวเอาไว้ ยกตัวอย่างเช่น ผมจะปิดตัว G303 เพราะผมจะไปสร้างไฟล์ไว้ใน /tmp และก็บอกเงื่อนไขบางอย่างที่ผมไม่อยากจะทำตาม ก็เลยสาธิตการ disable ให้ดูแบบนี้

จากนั้นเราก็ทดลองรันดูด้วยคำสั่ง

> golangci-lint run ./...

เท่านี้เราก็จะสามารถใช้ gosec ผ่าน golangci-lint ได้ง่ายๆ

ยังมี linter ให้เราสามารถเปิดใช้งานได้อีกเยอะตามนี้ https://golangci-lint.run/usage/linters/

หวังว่าจะเป็นประโยชน์นะครับ
how can i fix this error?
Tags: android, androidstudio, erorr, issue
Published: 2022-09-18 08:42:22

Emulator: WARNING | unexpected system image feature string, emulator might not function correctly, please try updating the emulator.


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