teleren/devto huggingface dataset:
Replace clsx, classnames or classcat with your own little helper
Tags: react, javascript, typescript, functional
Published: 2021-08-18 21:30:32

Have you ever taken a break from programming, only to return and wrestle with package updates, outdated dependencies, or broken code? This issue often arises if your project heavily relies on a multitude of libraries and packages. In such instances, you might want to consider reducing the number of external imports your project utilizes.

We encountered this issue recently and perceived it as an opportunity to write a small helper utility that could replace a popular package.
Today, I'll be replacing a widely-used package called [`clsx`](https://www.npmjs.com/package/clsx) (or classnames, etc) with a tiny function.

### Planning
With `clsx`, you can pass a mix of strings, objects, arrays, and it consistently resolves to a string of classes to be used in your elements. If you're using a framework like [Tailwind](https://tailwindcss.com/), where everything is accomplished through classes, you likely depend heavily on this function.

However, my colleagues and I rarely used it with objects. 

Instead of this:
```ts
clsx('base', undefined, ['more', 'classes'], {
  'bg-red': hasError,
  'pointer-events-none': !isEnabled,
  'font-semibold': isTitle,
  'font-normal': !isTitle,
})

// Result: "base more classes bg-red font-normal"
```

We prefer an API like:
```ts
cx('base', undefined, ['more', 'classes'],
  hasError && 'bg-red',
  isEnabled || 'pointer-events-none',
  isTitle ? 'font-semibold' : 'font-normal'
)

// Result: "base more classes bg-red font-normal"
```

In fact, with the addition of the || operator, the final API proved to be even better suited for our needs.

### The implementation

The final version of our function, which is just a few lines of code, accepts an array of unknown values, filters for strings, joins them with a space, and trims any leading or trailing whitespace:

```ts
function cx(...args: unknown[]) {
  return args
    .flat()
    .filter(x => typeof x === 'string')
    .join(' ')
    .trim()
}
```

## Conclusion

Think twice before adding yet another package. Sometimes, all you need are a few lines of code - which might be fewer than the additions made to your package-lock.json at the end of the day. Always consider whether you can achieve the same functionality with a simpler, custom solution.
How to hide React Components on Dev Extension
Tags: react, devtools, extension, tutorial
Published: 2021-08-18 21:12:06

## Problem
Have you also struggle that when you develop React components at first everything seems ok. You can check out the props or the redux state easily with React extension.

➡️ But once you try to implement third parties you will see that, you can not find the component you are looking for. 90% percent of the components seems not useful for you.

➡️ Actually there is a way to hide them in the React Extension settings.

## 1 - Open The DevTools
Open your Devtools and go the **Components** tab in which you can see the React components. And there go to settings which you will choose filters to hide specific components in your application.

![Screen Shot 2021-08-19 at 00.02.46](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efad9f4hdyjngvl78wgu.png)
 
## 2 - Add Filters
In there you will see an add filter button at the left bottom. Click it and chooses the option you would like.
 
![Screen Shot 2021-08-19 at 00.08.35](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vl4rp01bc9whi1fdmz1.png)

## 3 - Enjoy

And there you go. After that you can focus on your development.
Codecademy Final Project: Match the Shapes Game
Tags: codecademy, programming, python, codenewbie
Published: 2021-08-18 21:03:42

The final project for Codecademy's programming course in computer science is to make a terminal game in python. I remembered wanting to play the game from an image match layout in Codecademy's CSS course, so I decided to make my own match the images memory game. 

I looked up image match games and realized my game board needed a theme. I chose shapes because they were the easiest for me to create using string characters and I was able to make more shapes by using large and small sizes of each one. The final game board has eight shape pairs and sixteen game pieces on a 4x4 board.

## Python code
I wrote the game program in VS Code and the final program is split into two python files: one with string lists to make game boards and one with the game play variables and functions. The game file imports the game boards file, along with `random`. 

In the game file, the `game_board_solution()` function uses the `choice()` method from `random` to assign shapes from the `shape_nums` list to each spot in the `game_board_solution_dict`. The `start_game_setup()` function prints the title, start game board, and instructions for the player. 

To flip a game board piece, the player enters a row and column number, the `player_piece`. The `play_game()` function prints a game board with the shape at `player_piece` from the `game_board_solution_dict`. `play_game()` stores the shape number in the `flipped_pieces` list and the `print_player_board()` function prints a board using a shape row from the `shapes_dict` and three rows from `game_piece_row`. 

When the player matches shapes, the `matched_shapes_()` function prints a message and stores the shape numbers from `flipped_pieces` in the `matched_shapes` list so the player cannot flip those pieces again. When the player matches eight shape number pairs from the `matching_shapes` list, the `win_game()` function prints a message and lets them play again with a new game board solution. 

See code on [GitHub](https://github.com/cli-cd-ca/terminal_game)
Calculations with booleans
Tags: javascript, quirks, webdev
Published: 2021-08-18 21:00:15

Sometimes I like to take a look at the quirkiness of the language I code in and compare it to other languages. This time, I thought I'd share my findings with you, in case you also find them entertaining and interesting. On this occasion I looked at a quirk featured in [WTFJS](https://github.com/denysdovhan/wtfjs#math-with-true-and-false), namely doing Math with booleans. Let's dive in.

## true + true = ?

In Javascript, we use the + operator to concatenate strings as well as to add up numbers, but what happens when we through some booleans into the mix? Let's try!

```js
'Hi' + true;    // output: "Hitrue"
true + 'Hi';    // output: "trueHi"
```

Okay, so far, so good, Javascript notices that we use a string with a + operator and treats the boolean like a String and concatenates the two. Now, let's take a look at the numbers.

```js
5 + true;    // output: 6
true + 5;    // output: 6
```

Wait, what? Let's take a closer look at what's happening here.

### the Number-function

The boolean value is passed to the `Number`-function, which converts it to a Number; `true` is converted to 1 and `false` to 0.

---

#### Note

The Javascript Number type has limits to what it can store and also limits on how high the numbers stored in can be. All Numbers are stored as floating-point values.

---

If it fails to convert the value into a number, it will return NaN. It can convert true, false, null, as well as a decimal and hexadecimal number (in strings).

```js
Number(true);        // output: 1
Number(false);       // output: 0
Number(null);        // output: 0
Number(undefined);   // output: NaN
Number(0x7E5);       // output: 2021
Number('0x7E5');     // output: 2021
Number('12.5');      // output: 12.5
```

### calculation with booleans only

When we only add boolean operands, Javascript will still try and convert them into Numbers, rather than interpreting both as being strings.

```js
true + true;     // output: 2
true + false;    // output: 1
false + false;   // output: 0
```

## Beyond the addition

The same effect, of course, happens with subtractions, multiplications and divisions, as well as when using unary operators (positive and negative - although NaN will not be signed).

```js
+true       // output: 1
+false      // output: 0
+null       // output: 0
+undefined  // output: NaN
+0x75E      // output: 2021
+'0x75E'    // output: 2021
+'12.5'     // output: 12.5
```

## Is it just JS

You might know all of this already, so let's compare it to a few other languages.

**PHP** and **Python** will also allow calculations with booleans. They both also convert `true` to 1 and `false` to 0.

**Java** and **Rust** on the other hand, will both refuse calculations with boolean values and throw an error during compilation.

> error: bad operand types for binary operator '+'
*Java*

> error [E0277]: cannot add `bool` to `{integer}`
*Rust*

---

I hope you had fun reading about calculations with booleans. Thanks for reading!
Function Declaration VS Function Expression In JavaScript
Tags: javascript, webdev, programming, codenewbie
Published: 2021-08-18 20:59:24

Basically, function declaration and function expression are two ways of creating a function in JavaScript. But how do they differ? And how do you know which of them to use when creating functions?


###Function Declaration
Here, the function is defined starting with the **function** keyword then a **name** followed by parentheses and then curly braces where your statements will be written.
```javascript
//Example of Function declaration 
function calcAge(birthYear) {
    return 2021 - birthYear;
}
```
###Function Expression
Unlike function declaration, function expression does not have a name, this is usually called an anonymous function. The value of the function cannot be used until it is stored in a variable.
```javascript
//Example of Function expression
const calcAge = function(birthYear) {
    return 2021 -birthYear;
}
```

#What is the difference between the two?
The main practical difference is that you can call function declaration before you define it and your code will work just fine but with function expression, it's impossible and JavaScript will throw an error at you.
```javascript
//Calling Functiion declaration before defining it

calcAge(2000);

function calcAge(birthYear) {
    return 2021 - birthYear;
}
```
I tried doing the same above with Function expression and I got this error in return:
```javascript
Uncaught ReferenceError: Cannot access 'calcAge' before initialization
```
This happens because of a process called "Hoisting". Hoisting is a JavaScript behaviour which moves all the declarations to the top of your code before execution. 
Function declarations are hoisted but function expressions are not. This is why calling a function before defining it is possible with function declaration.

##Which of them should you use when writing your functions?
Most of the time, it is just a matter of preference. Personally, I prefer to use function expression as it forces me to define all my functions at the top of my code. I get to write cleaner and more readable codes this way..
react-color-palette: <ColorPicker /> component for your React project.
Tags: webdev, react, typescript, javascript
Published: 2021-08-18 20:29:56

## Hello everyone!

I would like to introduce you to my &lt;ColorPicker /&gt; component.
I will be glad of any feedback, have a nice day!

**[GitHub Repo](https://github.com/Wondermarin/react-color-palette)**
**[Online Demo](https://rcp.wondermarin.space)**

<hr />

### Features:
- 🚀 Lightweight
- 💨 No dependencies
- 🛡️ Strict

<hr />

### Installation
#### npm
```sh
npm install react-color-palette
```
#### yarn
```sh
yarn add react-color-palette
```

<hr />

### Usage
```ts
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/lib/css/styles.css";

export const App = () => {
  const [color, setColor] = useColor("hex", "#121212");

  return <ColorPicker width={456} height={228} color={color} onChange={setColor} hideHSV dark />;
};
```
What is blackmart alpha?
Tags: blackmart, alpha
Published: 2021-08-18 20:04:25

Blackmart Alpha APK Download is the best alternative to Google Play

Yes that what it says - Blackmart Alpha Version is actually an Android app store which has been loaded with a lot of applications to offer you. The applications have not been modified nor hacked into them to make them work and that what makes them safer and reliable to download.

It is an app which was developed for the Android users who would want to get applications from a different source than Google Play. This is what has been called as Black Market and what makes this market different from others, it brings together all the best apps in one place so that all the people who are looking for them can get what they want without having to search in many different apps.

It has been built around Black Market that is why you can have so many applications from almost any category what you need. There are free and paid applications available and what makes this app market wonderful is that it sorts out the paid and free applications into lists what you could access. But what makes it a bit tricky to use is that you cannot download the applications directly, you have to get from what are called as APK files which you can download what people make available.

Source: https://blackmartapk.co/blackmart-apk-alpha/
What tools do you guys use for managing your tasks/goals
Tags: discuss, help, watercooler
Published: 2021-08-18 19:25:09

As the title says, i am intersted in knowing what all tools do you guys use for managing everything like daily tasks, project specs, plans, professional goals, long-term (yearly) goals, kanban baords maybe, etc. 

Currently, I use two tools
- [Notion](https://www.notion.so/) - To manage a list of long-term goals, what I want to do focus on for the next couple of months etc.
- [Joplin](https://www.joplinapp.org/) - For managing daily tasks.
Keeping Yourself Safe Online
Tags: duckduckgo, privacy, security, productivity
Published: 2021-08-18 16:25:20

As the Internet evolves so does the threats and attackers that lie below it, did you know 60% of small company’s close within 6 months to cyberattacks?

## Protecting Yourself On The Internet

The internet is probably the most important section in this post, many threats can lie on it. My first recommendation is using DuckDuckGo instead of Google, Google tracks nearly everything you do from your IP to everything your search for there “Personalised Ads” these are mostly intrusive. DuckDuckGo on the other hand doesn't collect any information not even your IP Address, they don’t use Personalised Ads so they are less intrusive on your Privacy.

The second thing I would recommend is a VPN which stands for Virtual Private Network, this service will be Paid but can be as low as £5 a month I personally recommend [VyperVPN](https://www.vyprvpn.com/) the one I personally use, [VyperVPN](https://www.vyprvpn.com/) will connect you to the nearest server so you would look as if your at there Server, this service completely hides your IP online. I choose [VyperVPN](https://www.vyprvpn.com/) as they provide Zero Logging Servers and even offer there own Zero Logging DNS Servers. 

The third thing I would recommend is using a third-party DNS Provider, your DNS (Domain Name Server) will map a domain to an IP Address, say for example I looked up (blah.com) my DNS Server will say okay (blah.com) goes to (192.168.1.1), your DNS Server will most likely be your ISP’s DNS which most likely track the sites you visit. If you are on windows [visit this guild](https://www.lifewire.com/how-to-change-dns-servers-in-windows-2626242) and change the DNS Primary to 1.1.1.1 and Secondary to 1.0.0.1 these DNS Servers are CloudFlares which provide the fastest servers and also provide great Privacy.

The forth thing is always use a Password Manager, do you ever find yourself using the same password over and over again on each site? If a hacker got that password they would have access to all your accounts. I would suggest using a Password Manager like [1Password](https://1password.com/), [Dashlane](https://www.dashlane.com/) or [Lastpass](https://www.lastpass.com/). I personally use 1Password due to the extra security features but it is Paid and Dashlane and Lastpass are good Free Options.

The last thing is to use a AntiVirus, this isn’t directly linked to online but this will prevent you from downloading anything malicious onto your computer. I would recommend looking at [Bitdefender](https://www.bitdefender.com/) they offer a Free Plan and a great Paid Plan, this is the one I personally use and never had an issue with it…

Even after using all these it won’t make it impossible to download anything malicious or to get any information exposed or collected. Always use the Internet with caution, it can bring some wonders but also some great dangers..
Goals i want to achieve in the Hngi8 internship
Published: 2021-08-18 18:51:55

Below are some if the goals i hope to achieve in the 8 weeks of hngi8 internship.(As a frontend developer)

1. Connect with defferent developers and companies in order to have ease in getting jobs and getting help with all the things i learned.
2. Create a good resume which will enable me to secure job opportunities.
3.Get a Hngi8 T-shirt.
4. Create good projects to defend my resume.

Here are some of the tutorials that helped me.
1 Figma tutorial link - https://youtu.be/3q3FV65ZrUs
2. Git tutorial Link - https://youtu.be/RGOj5yH7evk
3. Python programming tutorial -
https://youtube.com/playlist?list=PLsyeobzWxl7poL9JTVyndKe62ieoN-MZ3
Abusing Network Protocols for Secret Communication
Tags: softwaredevelopment, informationsecurity, security, hacking
Published: 2022-02-08 00:45:59

---
title: Abusing Network Protocols for Secret Communication
published: true
date: 2021-08-18 18:47:28 UTC
tags: softwaredevelopment,informationsecurity,security,hacking
canonical_url: https://blog.insiderattack.net/abusing-network-protocols-for-secret-communication-7c96cbdfca61
---

[![](https://cdn-images-1.medium.com/max/2600/1*ZrXiAvbdj8TqAdYWacriyQ.jpeg)](https://blog.insiderattack.net/abusing-network-protocols-for-secret-communication-7c96cbdfca61?source=rss----57f0c4748c10---4)

How to hide your communication in plain sight with Network Covert Channels

[Continue reading on Deepal’s Blog »](https://blog.insiderattack.net/abusing-network-protocols-for-secret-communication-7c96cbdfca61?source=rss----57f0c4748c10---4)
Apa itu IT Programmer

Published: 2021-08-18 18:40:25

[Apa itu IT Programmer](https://ruangkoding.id/apa-itu-programmer/) - Programmer adalah salah satu profesi menjanjikan saat ini. Bagaimana tidak, pengembangan dunia TI membuat banyak perusahaan berbasis teknologi semakin bermunculan. Kebutuhan akan programmer meningkat dengan penawaran gaji tinggi.

Artikel ini akan membahas apa itu programmer, pekerjaan mereka, jenis programmer dan keterampilan yang harus dikuasai untuk menjadi programmer handal.

Selengkapnya di : [https://ruangkoding.id/apa-itu-programmer/](https://ruangkoding.id/apa-itu-programmer/)
How to use this keyword 
Tags: braziliandevs
Published: 2021-08-18 18:39:38

A Keyword _this_ é um recurso presente em inúmeras linguagens de programação e eventualmente pode causar uma certa estranheza quanto ao seu caso de uso em específico e ao seu comportamento através da orientação à objetos. 

Em seguida, demonstrarei brevemente sua aplicação e seu contexto de utilização.

|    Keyword      |   Descrição    | 
| :------------- | :----------: | 
|  _This_ |  A Keyword _this_ é uma referência ao próprio objeto instanciado. Ou seja, no momento da execução do método ou do construtor do objeto em que _this_ está escrito, _this_ apontará para si próprio obtendo o acesso as propriedades e atributos do objeto.  | 
```
public class Example {
  int variable;
  void exampleMethod(int variable) {
  this.variable += variable; // This está referenciando ao próprio objeto instanciado e obtendo acesso à seus atributos e propriedades.

// Ah, esse uso da Keyword This é bem singular por proporcionar a distinção do "variable" atributo ao "variable" parâmetro do método. Faça seus teste :) tente retirar a Keyword This do código e observar o que acontece!
}
}
```
Checkbox Group ReactJS issue
Tags: react, usestate, checkbox
Published: 2021-08-18 18:21:36

I'm a newbie of ReactJS, I was mess around with this function. Here I'm got 3 group of checkbox so I wanna when I checked/unchecked 1st box (2nd,3rd) of group checkbox then it's same effected like this :https://www.loom.com/share/35506f4234a649a9b98213dd0430bf9e

I'm so grateful with every idea which community give me, tks you all

    export const Vertical: ComponentStory<typeof EdsFormCheckbox> = () => {
      const [isChecked, setChecked] = useState({checkOne:false,checkTwo: false,checkThree: false});
      const handleClick = (e: ChangeEvent<HTMLInputElement>) => setChecked(isChecked.checkOne);

  return (
    <div>
      <EdsCheckboxGroup
        onChange={handleClick}
        name="standard"
        labelText="Standard"
        className="gap-300"
      >
        <EdsFormCheckbox  checked={isChecked.checkOne} labelText="Math"></EdsFormCheckbox>
        <EdsFormCheckbox  checked={isChecked.checkTwo} labelText="Science"></EdsFormCheckbox>
        <EdsFormCheckbox  checked={isChecked.checkThree} labelText="English"></EdsFormCheckbox>
      </EdsCheckboxGroup>

      <EdsCheckboxGroup
        onChange={handleClick}
        name="required"
        labelText="Required"
        className="gap-300"
      >
        <EdsFormCheckbox checked={isChecked.checkOne} labelText="Math" isRequired></EdsFormCheckbox>
        <EdsFormCheckbox checked={isChecked.checkTwo} labelText="Science" isRequired></EdsFormCheckbox>
        <EdsFormCheckbox checked={isChecked.checkThree}  labelText="English" isRequired></EdsFormCheckbox>
      </EdsCheckboxGroup>

      <EdsCheckboxGroup
        onChange={handleClick}
        name="disable"
        labelText="Disable"
        className="gap-300"
      >
        <EdsFormCheckbox checked={isChecked.checkOne} labelText="Math" isDisabled></EdsFormCheckbox>
        <EdsFormCheckbox checked={isChecked.checkTwo} labelText="Science" isDisabled></EdsFormCheckbox>
        <EdsFormCheckbox checked={isChecked.checkThree} labelText="English" isDisabled></EdsFormCheckbox>
      </EdsCheckboxGroup>