teleren/devto huggingface dataset:
Toggle at top of the page, to expand/collapse all headers -elegant solution?
Tags: html, javascript, css, node
Published: 2020-11-05 03:18:55

Hi folks, 

I'm about to implement something **a bit** like the **expand-all** | **collapse-all** on this page (hopefully less tacky): 

http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm

BUT, I'm still very green, so was hoping some folks can lend a fair bit of their experience & time?

Screenshot of the project as implemented this far is attached...
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ple7mg97h5wg04s6gyfo.jpg)

I also have a copy of the main relevant files I'm working on, but it's all a bit private. So I hope you don't mind, but to those happy to help, may I please share via a pwd-protected OneDrive link?

To further flesh out what I was thinking, & just to get the ball rolling. I also have a bunch of pseudo-code which I'll include in the DM, to continue discussing there -as/if needed.
OS wars let's settle this right now
Tags: linux, macos, windows
Published: 2020-11-05 03:02:16

Let me re-ignite this flame one last time, but trust me, I'm sure you'll like what I have to say.

In past 5 years, I have been in 3 companies, in first company, they only asked me what hardware I want and what were the specs. I could choose literally any hardware I'd want. When I joined I saw majority of people were on windows, one guy was on mac and me being on Manjaro at first and Ubuntu when I crashed Manjaro. There the code we wrote was cross compatible, when any of us found compatibility issue, we fixed it.

On my next company I was locked down to windows but I was given a separate laptop after manager's approval which had linux mint on it, but most of the project under this company was in legacy .NET framework which meant working a lot with windows hardware.

My current company, everyone is locked down to a MAC even though all projects are in golang or elixir. There's no manager's approval to get other hardware. It's a company policy to give everyone a macbook pro regardless of developer wanting it.

My philosophy is that tools should work for me, I shouldn't work around the tools, there are small things I like to do, the virtual workspaces on linux, the guake terminal, all of these tiny things make me so much productive, now being locked to mac is making me working AROUND the mac instead of making IT work for me.

Now I'm not bashing on mac, if mac does what you want it to do, great. I guess what I'm saying is choose an OS which you're comfortable with, don't jump on the hype train, just because all the nerds are using gentoo or arch doesn't mean you've to do the same, if you're comfortable with windows, good for you!

Make your tools work FOR you, don't work around the tools, use what you're comfortable with. For me, workspace is a must, guake terminal is a game changer, and small tiny things I can't even remember to write it down, doesn't work on windows nor mac.

Now I know someone will say, "But windows has virtual workspace", yeah, but is it as good as what I have? Say I'm on my primary workspace where I write code. I want to listen to music so I open Spotify, but I realize Spotify doesn't belong in primary, so I can press `Ctrl` + `Alt` + `Shift` + `DownArrow` which moves my Spotify to music workspace, (I use 2x2 workspaces), there's no shortcut for that, windows has only horizontal workspace and no 2d Grid, don't get me started with mac, just to switch workspace, you need to use mouse. The support for external keyboard is non existent.

So for the last time: Let people use what they want to use. If they're building a iOS app, they'll ASK for mac, if they're building windows app, they'll ASK for windows, if that's not the case, there's no point locking people down to what YOU think is better for them, they know what's good for them.
How to open/edit/bind ports to running Docker Containers
Tags: docker, linux
Published: 2020-11-05 03:02:04

You have a running production container (a synced node) and you would want to either edit or bind new ports in this container, as opposed to spinning up a new container.

The following steps should aid you to achieve this.

#### 1.Stop the running Container
 ``` docker stop <container-id> ```

#### 2.Open Docker containers directory
 ```cd /var/lib/docker/containers/ ```
 ``` cd <container-id> ```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/538qwwmunzgy5867eghc.png)

#### 3.Edit hostconfig.json
Open ``hostconfig.json`` with nano or vim 
locate and edit ``PortBindings`` with the new ports you want to edit, open or delete.

*for instance*
``` "PortBindings":{"18332/tcp":[{"HostIp":"","HostPort":"18332"}],"18334/tcp":[{"HostIp":"","HostPort":"18334"}]} ```

#### 4.Restart Docker
``` systemctl restart docker ```
#### 5.Start container
``` docker start <container-id> ```
Release @nxtend/capacitor 2.0.2
Tags: ionic, capacitor, nx, webdev
Published: 2020-11-05 02:56:22

---
published: true
title: "Release @nxtend/capacitor 2.0.2"
cover_image:
description:
tags: ionic, capacitor, nx, webdev
series:
canonical_url: https://nxtend.dev/blog/capacitor-2.0.2
---

Nxtend Capacitor v2 is here! This release has a number of big changes that warrated a major release. Capacitor project structures have been changed, Nx Console support has been improved, and dependencies have been updated. That being said, a manual migration is needed to support upcoming capabilities. Read the full blog post for more information on updating the plugin and migrating your projects. Please note, due to an npm issue, the current release is 2.0.2.

## Fixes

- fix Windows support

## Features

- update Capacitor to 2.4.2
- add Capacitor configs to frontend application
- add or update `package.json` in project folder when generating a Capacitor project
- add builder configurations for Nx Console
- add `add-plugin` schematic for adding Capacitor plugins

## BREAKING CHANGES

- Capacitor plugins must now be added to both the root and project-level `package.json`

<!--truncate-->

One of the major changes in this release is that Capacitor configurations are not added to a dedicated application (e.g. `my-app-cap`) but rather added directly to the associated frontend project. This also means that the you will need to run `@nxtend/capacitor` builder commands from the frontend project as well (e.g. `nx run my-app:sync --project android`).

Another notable change is that the [`capacitor-project`](https://nxtend.dev/docs/capacitor/schematics/capacitor-project) schematic will now add or update the `package.json` in the project folder. This was done to increase compatibility with the Capacitor CLI and from now on Capacitor plugins should be added both to the root and project-level `package.json`. To help with this, an [`add-plugin`](https://nxtend.dev/docs/capacitor/schematics/add-plugin) schematic has been added.

For more details on migrating your Capacitor project, visit the [`MIGRATION.md`](https://github.com/nxtend-team/nxtend/blob/main/packages/capacitor/MIGRATION.md).

For information on upgrading the plugin, visit the [nxtend upgrades documentation](https://nxtend.dev/docs/nxtend/upgrades).
On .NET Episode: Real-time Data fetching with GraphQL and Blazor
Tags: aspnet, dotnet, webdev, webassembly
Published: 2020-11-05 02:55:54

GraphQL supports the ability to subscribe to event streams to enable somewhat real-time scenarios for both clients and servers.

In this episode of the On .NET show, HotChocolate author Michael Staib returns to show us how to enable real-time data fetching with GraphQL using subscriptions.

{% youtube iDAYdrFHqGU %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).

#### Useful Links

<ul>
<li><a href="https://github.com/ChilliCream/hotchocolate" target="_blank">HotChocolate in GitHub</a></li>
<li><a href="http://spec.graphql.org/June2018/#sec-Subscription" target="_blank">Subscriptions in GraphQL spec</a></li>
<li><a href="https://docs.microsoft.com/en-us/aspnet/core/introduction-to-aspnet-core?view=aspnetcore-3.1" target="_blank">Introductions to <span class="s1">ASP.NET</span> core</a></li>
</ul>
Minimalist mac vim users: This might be your holy grail keyboard customization
Tags: vim, keyboard, mac, minimalism
Published: 2020-11-05 02:20:50

I avoid messing with keybindings as much as possible, but there’s one customization every Mac user should consider.

Vim likes easy access to the Escape and Control keys. Both are hard to reach on a standard Mac keyboard.

The solution is incredibly elegant and simple:

Using Karabiner elements, configure it so that tapping Caps Lock is Escape, while holding it is Control.

This single shortcut makes Vim beautifully ergonomic. It has a downside – it’s not portable inside a vimrc. But if you’re not connecting to remote servers often it’s worth it.

Besides the vim benefits, it also lets you use convenient MacOS shortcuts without reaching all over with your pinkies

- backspace via ‘Control + h’
- forward delete via ‘Control + d’
- jump to beginning of line: ‘Control + a’
- jump to end of line via ‘Control + e’

That modification is found [here](https://ke-complex-modifications.pqrs.org/#caps_lock)
Boolean Algebra for Dummies
Tags: computerscience, beginners, codenewbie
Published: 2020-11-05 02:04:17

There are times when I find it hard to write a conditional and get the right result, so I decided to make some research and find out more about this fancy *Boolean Algebra*.

There is no rocket science, only basics. Hope to help some beginners to find the light at the end of tunnel. :smile:

There is a kind of cheat sheet structured by levels with just a little theory.

:exclamation: DISCLAIMER: This information is quite new for me as well, I encourage you to double check everything.

#### Level 0:

> There is a data type called bool or boolean in computer
> science with 2 possible values => True (1) and False (0)
>
> Also, there are some boolean operators that are used in 
> conditional statements: Not (!), AND (&&), OR (||), XOR (^)
     
#### Level 1:

|x      | y       | x AND y   | x OR y   | x XOR y |
| :---: | :-----: | :------:  | :----:   | :-----: |
| False | False   | FALSE     | FALSE    | FALSE   |
| False | True    | FALSE     | TRUE     | TRUE    |
| True  | False   | FALSE     | TRUE     | TRUE    |
| True  | True    | TRUE      | TRUE     | FALSE   |



    !True == False (NOT True equals False)
    !False == True (NOT False equal True)

#### Level 2:

    Some simple rules of boolean algebra (x is "something"):

    False OR x == x 
    True OR x == True
    False AND x == False
    True AND x == x

##### Level 2.1:

> For the rest of the examples I have used short operators 
> (&& and ||) and constants A, B, C (these could be either true
> or false).

    A && A == A
    A || A == A
    A || !A == True
    A && !A == False
    
#### Level 3:

> Remember that `!` => high precedence, `&&` => medium precedence
> `||` => low precedence

    !!A = A
    
    A && (A || B) == A
    A || A && B == A

    (A && B) && C == (A && B) && C == A && B && C
    (A || B) || C == (A || B) || C == A || B || C

    A && B == B && A
    A || B == B || A

    A && (B || C) == A && B || A && C
    A || B && C == (A || B) && (A|| C)
    A && (B || C) == (A && B) || (A && C)
    A || (B && C) == (A || B) && (B || C)

>All of the above have some fancy law names, but I don't think that you'll ever need to know them. :smiley:

#### Level 4 (De Morgan's laws):
 >The name of this laws is too cool not to write it down :grin:

    !(A || B) == !A && !B
    !(A && B) == !A || !B

    
Thank you! :pray:
Writer's Block: I don't know how to write anymore
Tags: beginners, career, javascript, csharp
Published: 2020-11-05 01:53:50

My last blog post was [this article](https://dev.to/jasterix/6-java-learning-resources-to-get-you-started-442b), "6 Java language resources to get you started" also in July 2020, was published over 4 months ago. In just the few of months between "officially" starting my job search in May and that last blog post, I went from publishing a weekly post every Tuesday or Wednesday to every 2 weeks to nothing for 4 months.

It's not that I don't want to write- (the multiple drafts in my dashboard would beg to differ). I just don't know what to write that other people will find helpful.

I started this blog to chronicle my journey to becoming a software developer, while sharing the tools and resources that worked for me. Because I was primarily focused on mastering JavaScript, most of my posts revolved around JavaScript. It was fun because I could look back and see my progress. Each day built on the day before and I had an overarching "post-bootcamp master schedule to keep me on track.

But then I started learning Java for a really exciting role; so I switched to blogging about Java. The next role required visual basic; so I switched to that for 2-3 weeks. Then it was React and now it's C#. 

In between the Java role and the React role, I applied to the Microsoft Leap Apprenticeship Program. Surprisingly, I made it through the interviews and started end August 2020. That's where the C# came in.

The past few months have been incredibly difficult, exciting, thrilling and every bit the rollercoaster. Learning .Net has been a completely different challenge than learning Ruby and JavaScript. Unlike every .Net blogger in the space, I don't have the decades of experience or knowledge to refer to. Everything is knew. 

Even the things that seem familiar at first glance i.e. XAML are new. So I doubt myself. This isn't imposter syndrome but uncertainty. Every sentence of those draft articles reeks of uncertainty. Publishing them would feel like a case of the blind leading the blind.

But there is a need for more .Net content. For every 100 engaging JavaScript content creator, there seems to be a single C# creator, but with 20 years of experience. Clearly I'm rambling at this point. But maybe this article is just the kick I need to start posting again. Let's see.
How to remove duplicates in an array using JS Set?
Tags: javascript, 100daysofcode, webdev, beginners
Published: 2020-11-17 08:15:36

---
title: How to remove duplicates in an array using JS Set?
published: true
date: 2020-11-05 00:00:00 UTC
tags: javascript, 100daysofcode, webdev, beginners
canonical_url: https://jsmates.com/blog/remove-duplicates-in-an-array-using-set-in-js
---

Consider we have an simple string array with duplicate values,

```js
const authorNames = [
  'Param',
  'Moises',
  'Fernando',
  'Joshua',
  'Param',
  'Joshua'
];
```

The array have `Param` and `Joshua` values duplicated twice. There are several ways to remove duplicates, using `Set` is just one among them.

```js
const uniqueAuthorNames = [...new Set(authorNames)];
console.log(uniqueAuthorNames); // Output - ["Param", "Moises", "Fernando", "Joshua"] ✅
```

**What if the data is an array of objects?**

We can make it work, but directly using `Set` on the array of objects won't work.

```js
const authors = [
  {
    name: 'Param',
    age: 30
  },
  {
    name: 'Joshua',
    age: 26
  },
  {
    name: 'Param',
    age: 30
  }
];
const uniqueAuthors = [...new Set(authors)];
console.log(uniqueAuthors); // Output - It won't remove the duplicates ❌
```

{% codesandbox set-remove-duplicates-2em37 %}
How to add spacing or padding to the end of a string in JavaScript?
Tags: javascript
Published: 2020-11-05 00:00:00

---
  title: How to add spacing or padding to the end of a string in JavaScript?
  published: true
  tags: JavaScript
  date: Thu Nov 05 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-spacing-or-padding-end-of-string-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-2f893064fcd0ba8f63b21b45fc8c8c8e.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-spacing-or-padding-end-of-string-javascript)
  
To add spacing or padding to the end of a string, you can use the `padEnd()` string method in JavaScript.

Consider this string,

```js
// a string
const str = "Hello";
```

Let's add 5 spaces to the end of the string using the `padEnd()` string method like this,

```js
// a string
const str = "Hello";

// add 5 spaces to the end
// of string using padEnd() method
const paddedStr = str.padEnd(10);

console.log(paddedStr); // "Hello     "
```

Now you might think why did we use `10` instead of `5`. Because the `padEnd()` method starts counting characters from the start of the string. Since we already had `5` letters and passing `5` won't do the trick.

```js
// a string
const str = "Hello";

// ❌ passing 5 won't make 5 spaces we have
// to accomodate for the whole string
const paddedStr = str.padEnd(5);

// 😕 Not what we expected
console.log(paddedStr); // "Hello"
```

But if you don't want to hardcode like this, there's another way to automatically pad `5` spaces to the end of the string.

It can be done using the `length` property of the string. First, get the length of the string then add 5 spaces like this,

```js
// a string
const str = "Hello";

// add 5 spaces to the end
// of string using padEnd() method
const paddedStr = str.padEnd(str.length + 5);

console.log(paddedStr); // "Hello     "
```

Nifty Trick 🔥. Right?

You can also choose to have any string instead of spaces by passing the string as the second argument to the `padEnd()` method like this.

```js
// a string
const str = "Hello";

// add 5 spaces to the end
// of string using padEnd() method
const paddedStr = str.padEnd(str.length + 5, ".");

console.log(paddedStr); // "Hello....."
```

See this example live in [JSBin](https://jsbin.com/sopeyokiko/1/edit?js,console).

Key things to take away using the `padEnd()` string method:

- It requires the absolute number of spaces or padding to be added to the end of the string as the first argument.
- You can have an optional string to be used instead of spaces if provided as the second argument to the `padEnd()` string method.
- the method returns a new string

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

---
Cheat sheet for webpack's config rules
Tags: webpack, javascript, cheatsheet
Published: 2020-11-06 18:10:37

---
title: Cheat sheet for webpack's config rules
published: true
date: 2020-11-05 00:00:00 UTC
tags: 
- webpack
- javascript
- cheatsheet
canonical_url: https://notebook.aboutdavid.me/posts/2020-11-05-cheat-sheat-for-webpack-config-rules/
---

Webpack's config rules may seem complicated, but it really isn't! This is a simple "cheatsheet" that you can use for webpack's config.

Here is where you place the rules:

```js
 module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/bundle.js",
  },
  mode: "development",
  module: {
+ rules: [],
  },
};
```

Your config does **not** have to look like the one above, I was just showing you where the rules go (in the module.rules array) and how it looks

### JavaScript and JSON [#](#javascript-and-json)

Nothing is really needed for these two languages as webpack natively supports them

### CSS/SCSS [#](#css%2Fscss)

You do need a few packages to import CSS and/or SCSS into webpack, but it works like a charm.

Install the packages needed with this command:

```sh
npm install postcss-loader style-loader sass-loader css-loader --save
```

Then, insert the following rule in `webpack.config.js` under module -> rules:

```js
{
    test: /\.(scss|css)$/,
    use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
```

### Images [#](#images)

Yes, you can use images in webpack. You will need to use the [Assets modules rule](https://webpack.js.org/guides/asset-modules/) functions.

Insert the following rule in `webpack.config.js` under module -> rules:

```js
{
    test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
    type: 'asset/resource'
},
```

### Fonts and SVG files [#](#fonts-and-svg-files)

For this one, you need to use something inline assets

Insert the following rule in `webpack.config.js` under module -> rules:

```js
{
    test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
    type: 'asset/inline',
},
```

### Babel [#](#babel)

Babel is a compiler for the next generation JavaScript, today. You can basically use newer JavaScript in older browsers like Internet Explorer.

Install the packages needed with this command:

```sh
npm i @babel/core @babel/preset-env babel-loader @babel/plugin-proposal-class-properties --save
```

Then, insert the following rule in `webpack.config.js` under module -> rules:

```js
{
    test: /\.js$/,
    exclude: /node_modules/,
    use: ['babel-loader'],
},
```

I actually made this cheat sheet for myself, but I decided to share it with everyone! Enjoy!
The best technical book you’ve ever read
Tags: career, knowledge, books
Published: 2020-11-04 23:33:35

---
title: The best technical book you’ve ever read
published: true
description: Let’s talk about the best technical books ever 
tags: career, knowledge, books
cover_image: https://www.wykop.pl/cdn/c3201142/comment_4gc13e7sJC8E6zI8igRTVSsVUxvD8CbI.jpg
---

Hi Geeks! 📚

What's the best technical book you’ve ever read? One, just one book.

From my side, it is **”Philosophy of Software Design”** by John Ousterhout. I've learned so much about code design and also about software architecture. Thanks to this book I’ve learned about modularity in software engineering and how significant it is! It has changed my point of view on the whole software engineering world. **Highly recommended!** :)

If you have some space on a shelf - pick this book and you’ll not regret it.

And you? What’s your strongest recommendation? Share it, maybe thanks to this someone else’s career will be just better! ✌🏻