teleren/devto huggingface dataset:
Proof of Concept - Dynamically Filtering a Large Select
Tags: javascript
Published: 2021-07-13 14:23:05

---
title: Proof of Concept - Dynamically Filtering a Large Select
published: true
date: 2021-04-12 00:00:00 UTC
tags: javascript,javascript
canonical_url: https://www.raymondcamden.com/2021/04/12/proof-of-concept-dynamically-filtering-a-large-select
---

A while back a friend wrote me with an interesting problem. He has a form where one of the fields can have near a thousand or so entries. It didn't impact load time that much for his users, but it did create a dropdown control that was difficult to use. He was curious to see if there was a way to let the user filter the dropdown to make it a bit more easier to read. Here's what I came up.

First, I did _not_ go down the [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) route. While that provides similar behavior, it only lets you pick a string value. A select field lets you display a string value while binding it to a value in the option. So for example, the text displayed to the user could be American and the value some primary key value used in a database.

Instead of using a datalist, I went with a simple text field next to the dropdown:

```html
<input type="search" id="filter" placeholder="Filter" autocomplete="off">
<select id="myOptions"></select>
```

My JavaScript code then listened for changes to the filter and applied them to a filter on the data that populated the dropdown. Here's the complete code.

```js
function getOptions() {
	let result = [];
	let prefix = ["A","B","C","D","E","F","G","H","I","J","K"];
	prefix.forEach(p => {
		for(let x=0; x<250; x++) {
			result.push(p+x);
		}
	});
	return result;
}


function setOptions(opts) {
	let select = document.querySelector('#myOptions');
	
	//set values for drop down
	let html = '';
	opts.forEach(o => {
		html += `<option>${o}</option>`;
	});
	select.innerHTML = html;
}

let filter = document.querySelector('#filter');

filter.addEventListener('input', () => {
	let value = filter.value.trim().toLowerCase();
	let options = (getOptions()).filter(f => {
		return value === '' || f.toLowerCase().includes(value);
	});
	setOptions(options);
},false);

setOptions(getOptions());
```

So first off, `getOptions` is meant to represent the API call or some other 'real' process. In my case I'm just generating dummy data.

The function `setOptions` handles setting the options available to the dropdown. It expects an array of values passed to it. By default this is the full result of `getOptions`, but when you type into the filter, it filters the values returned. Here's a demo:

{% codepen https://codepen.io/cfjedimaster/pen/MWJrZVL %}


I shared this on Twitter and got some good responses. Markus Oberlehner responded with a fork of the CodePen where he does something fascinating. Clicking in the filter field activates the `multiple` property of the dropdown, providing a bit more visual feedback of the filter being performed. Here's his version.

{% codepen https://codepen.io/maoberlehner/pen/VwPQZgx %}

Let me know what you think - remember you can fork my CodePen (or Markus) to work on your own version!
New tool: Social Tags Generator
Published: 2023-05-31 21:59:50

---
title: New tool: Social Tags Generator
published: true
date: 2021-04-12 00:00:00 UTC
tags: 
canonical_url: https://glpzzz.dev/2021/04/12/social-tags-generator.html
---

Check it out at [https://glpzzz.dev/social-tags-generator](https://glpzzz.dev/social-tags-generator)

[![glpzzz's Social Tags Generator](https://glpzzz.dev/assets/2021-04-12-social-tags-generator.png)](https://glpzzz.dev/social-tags-generator)
How to do object destructuring with types in TypeScript?
Tags: typescript
Published: 2021-04-12 00:00:00

---
  title: How to do object destructuring with types in TypeScript?
  published: true
  tags: TypeScript
  date: Mon Apr 12 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/object-destructuring-types-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-fc73265f973669206ca92855c27ef500.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/object-destructuring-types-typescript)
  
Sometimes when you destructure object properties in TypeScript, you may want to define the type for the property you are destructuring.

### TL;DR

```ts
// an object
const John = {
  age: 23,
  isAdult: true,
};

// get age property using destructuring syntax
// and set the type of age property
const { age }: { age: number } = John;
```

For example, let's say I have an object called `John` with some properties like `age`, `isAdult` like this,

```ts
// an object
const John = {
  age: 23,
  isAdult: true,
};
```

Now let's use the destructuring operator (`{}` curly braces) to get the `age` property from the `John` object like this,

```ts
// an object
const John = {
  age: 23,
  isAdult: true,
};

// get age property using destructuring syntax
const { age } = John;
```

To set or define a type on the age property we can use a colon `:` after the destructuring operator and then open a curly brace and then define the type of the `age` property inside that curly brace like this,

```ts
// an object
const John = {
  age: 23,
  isAdult: true,
};

// get age property using destructuring syntax
// and set the type of age property
const { age }: { age: number } = John;
```

See the above code live in [codesandbox](https://codesandbox.io/s/object-destructuring-types-typescript-2vtpj)

There is one more way of defining the type using an `interface` like this,

```ts
// interface for age property
interface Age {
  age: number;
}

// an object
const John = {
  age: 23,
  isAdult: true,
};

// get age property using destructuring syntax
// and set the type using the interface "Age"
const { age }: Age = John;
```

That's it! 😃

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

---
Monolithic vs. Microservice Architecture
Tags: monolithic, microservices, docker, containers
Published: 2021-04-11 22:40:48


When dealing with frontend and backend development, there are many different routes developers can take.  With the fast paced world that we call technology, everything is constantly changing.  Something new may be developed, and then everyone switches to that component.  Web components are a perfect example of this.  **Monolithic Architecture** is another example of this.

## So what does Monolithic Architecture mean?

Monolithic Architecture is the old standard design for a software program.  This type of architecture is heavy in the development aspects.  The problem with this type of architecture is that if someone wanted to update one part of the system, this could effect the whole system.  It is tightly coupled together.  This makes the system much more challenging to understand and have many side effects to anything that may happen.

## What's a Microservice?

A microservice architecture is a new design version for software programs.  It uses many different services together (that are loosely coupled) to create the full microservice.  This way, if one section or service of the design needs changed or updated, it makes life much easier for the developer.  a microservice is better organized along with a performance advantage.  By using an API call, each different service is able to communicate perfectly to one another. 

## What's the deal with this?

In conclusion, a microservice type architecture style is the new way to go.  As I stated earlier, it is easier to deal with, it has a higher performance advantage, and there are fewer mistakes to be made.  Microservices can also be used inside of different containers.  Overall, the microservices are the key to the future

## Learning Docker and Containers YouTube Video

https://www.youtube.com/watch?v=VmMvRhk_6q8
Continuing with React and Redux… I want to talk about REDUCERS! 
Tags: redux, react, javascript
Published: 2021-04-11 22:24:26

Reducers are functions that take the current STATE and ACTION as arguments returning a NEW STATE.

 ```
const expenseReducer = (state = [], action) => {
   switch (action.type){
       case "SET_EXPENSE":
       return action.payload.expense || state
       case "ADD_EXPENSE":
           return [...state,action.payload]
        case "REMOVE_EXPENSE":
           return state.filter(expense => expense !== 
 action.payload)
       default:
       return state
      
   }   
 };
```

(Make sure to pass the initial state with the right data structure) 

An important thing about reducers is they are pure functions meaning:
Pure functions are only determined by their input values.
Pure functions have no side effects, meaning they don’t have any effect outside the function, it will only return a value.

For separations of concerns you normally do one reducer by component, so if we have more than one (you most likely will) we can use something call “combineReducers()” method and it will go on a separate folder such as index.js 
 
```
frontend/src/redux/reducer/index.js


import userReducer from './userReducer'
import expenseReducer from './expenseReducer'
 
 
 
 
export default combineReducers({
   user: userReducer,
   expenses: expenseReducer
 
  
})
```

The structure for redux is to split the state into multiple slices or domains by key and provide a separate reducer to manage each individual slice of data as the redux docs say, combineReducers method is not required but it is useful to put all your data together.

The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore. Passing the state as objects gives them a key and a value, you can control state key names by using different keys in the passed value.

You can read more about it here: 
 https://redux.js.org/api/combinereducers 

HAPPY CODING! :)
Difference between =, ==, and === in JavaScript
Tags: beginners, javascript, codenewbie, algorithms
Published: 2021-04-11 22:00:35

First, What is an operator?
> JavaScript **operators** are used to assign values, compare values, perform arithmetic operations e.t.c. 

#Classes of Operators
*Assignment Operators
*Arithmetic Operators
*Comparison Operators
*String Operators
*Conditional Operators
*Logical Operators
*Bitwise Operators
*Relational Operators
*Unary Operators and more...

For this article, I will only focus on those operators that include =, ==, ===.

#Assignment Operators
Assignment operators assign values to variables in JavaScript. It assigns values to its left operand based on the value of its right operand.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kei9vt0afhfwrigczt26.png)

#Arithmetic Operators
They perform an arithmetic operation between numerical variables and/or values. They include **+**, **-**, **(*)**, **(/)**, **%**, **++**, **--**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3sq7ccyvtcw0kk7j1d0g.png)

#Comparison Operators
Comparison operators are used in determining the equality or difference between variables or values. Comparison operators are further divided into two, the equality operators and relational operators.

##Equality Operators
1. Equality Operator (==)  *equal to*
2. Inequality operator (!=)  *not equal*
3. Identity operators (===)   *equal value and equal type*
4. NonIdentity operators (!==) *not equal value and not equal type*

### Equality Operator (==)
This checks whether its two operands are equal and returns a boolean result.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5smjxqqis4hjdqd3vkp.png)

###Identity Operator ===
The strict equality operator (===) checks whether its two operands are equal and of the same type, returning a Boolean result.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tx1qnzwdisna38bbt803.png)

#Differences between =, ==, ===;
1. Firstly, = is an assignment operator whereas the other two are equality (comparison) operators.
2. = assigns a value to a variable.
   == compares two variables while ignoring the data type of each 
   variable.
   === compares two variables in terms of its values and data 
   types (string, number).
3. = returns a string or number
   == returns a boolean expression, true if the values are equal 
   and false if they are not.
   === also returns a boolean expression, true if both the values 
   and data types are equal and false if either value/datatype is 
   not equal.
Generic modal angular 
Published: 2021-04-11 21:47:42

Hello everyone ,
in this link i want get some change in the application by add a button "Accept" in the modal,
when user click in close button nothing happening just the modal will be close
but if user click in accept button , then in the app.component an array of number will be disaply from 1 to 5,
https://stackblitz.com/edit/angular-dynamic-modal
Basic Console Apps C#
Tags: csharp, codenewbie, beginners, programming
Published: 2021-04-11 21:38:33

Compiling and Executing Programs **Terminology**

---

- **Entry Point:** Code (usually a method) that's automatically run when a program is launched. In C#, this method is called `Main()`.

# **Overview & Examples**

---

### **Setup**

Basic boilerplate setup for every C# program:

**SomeFileName.csproj**

```csharp
<Project Sdk="Microsoft.NET.Sdk">

    <PropertyGroup>
        <OutputType>Exe</OutputType>
        <TargetFramework>net5.0</TargetFramework>
    </PropertyGroup>

</Project>
```

**SomeFileName.cs**

```csharp
using System;

class Program
{
  static void Main()
  {
    // program code goes here
  }
}
```

### **Running Programs**

- We run a program with the following two steps:
    - **Compiling**: In the project directory, run `> dotnet build`. `FileName.cs` should be the name of the file containing program code. This creates an `.exe` file.
    - **Executing**: After compiling, run the following to launch the `.dll` file: `> dotnet run`.

### **General Guidelines**

- Files with `.cs` extensions contain code written by the developer.
- Files with `.csproj` extensions contain project configuration data.

# AOT Versus JIT Compiling **Overview**

---

- In modern programming languages, source code must be translated into machine code before computers can understand it. Some languages and platforms do this automatically, but others like C# must be explicitly compiled.

# **Terminology**

---

- **Compiling**: Translating one type of code into another type. Generally this refers to translating a more human-readable type of code into a more complex type of code meant only for computers.
- **Just in Time**: When code is compiled as a user interacts with it, as is the case with JavaScript.
- **Ahead of Time**: When code is compiled ahead of time, as is the case with C#.

### **Sample `.csproj` code:**

**DoubleIt.csproj**

```csharp
<Project Sdk="Microsoft.NET.Sdk">

    <PropertyGroup>
        <OutputType>Exe</OutputType>
        <TargetFramework>net5.0</TargetFramework>
    </PropertyGroup>

</Project>
```

- Build a C# program with the following command: `dotnet build`.
- Run a C# program with the following command: `dotnet run`.
- The `Console.WriteLine()` method prints a string to the console.
- The `Console.ReadLine()` method is used to retrieve input the user has typed into the command line.

# Dotnet Watcher **Terminology**

**Watcher**: Monitors files so we don't need to constantly type `dotnet run`. Here's how we add a watcher:

```
dotnet watch run
```

We can also do this with the `build` command:

```
dotnet watch build
```
Implementing Paypal checkout with React - Part 1

Tags: react, paypal, checkout
Published: 2021-04-11 21:33:06

When we are building an e-commerce project, Paypal is one of the most common ways to handle payment. It is easy and straightforward to apply it to your react project. Let's take a closer look at it. :moneybag::eyes:
<br>
### Step 1) Create your sandbox accounts 
To communicate with the Paypal API, we have to create or log in to your Paypal account in the [developer application](https://developer.paypal.com/home/).

In the **Account** on the left menu, they provide two default sandbox accounts for you. One is a Business sandbox account, the other is a Personal sandbox account. We can use these two accounts to login and pay during the development.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88linhz1we7hrpjac3ac.png)
<br>
### Step 2) Create a new Paypal app
Next, we have to create a new app. Click on the **My apps & credentials** and **create a new app**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvc7fm1puesngdzge994.png)
We will then receive a *Client ID* after creating the new app. Replace your *Client ID* with the script below and place it inside the index.html of the public file of the react app.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdik6590j9e66b5we8oy.png)

```html
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=INR"></script>
```
<br>
All the settings are done with the Paypal developer site and our react app! Let's go back to our react app and start building the Paypal component in the next part. :smirk:
Salesforce: Aura Components
Tags: salesforce
Published: 2021-04-11 21:29:28


*Salesforce has so much terminology it can be a bit overwhelming in the beginning. I am starting a series of short posts to help me learn the definitions.*

-----

###
**Salesforce has archived the Aura open-source UI framework**
###
They were replaced with Lightning Web Components around February 2019. Aura components and LWC can coexist and interoperate on the same page.

##Aura components
are the self-contained and reusable units of an app. They represent a reusable section of the UI, and can range in granularity from a single line of text to an entire app.

https://github.com/forcedotcom/aura
Using react router to make a navbar
Tags: beginners, react, javascript, node
Published: 2021-04-11 21:21:21

#Introduction :computer:

Once you need to interlink different pages in a react project, you will need to use the react Rooter as hyperlink to jump from one page to another

#Installation  :hourglass:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhcryfyfntw7680b6dmr.PNG)

1. Before coding, you will need to download react router using the terminal inside of the current project and write "npm install react-router-dom"

2. Second step will be to import the different needed element in the header import.  You can copy-paste it from here :

{
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jyfsn4qpmlo91neawxa.PNG)


3. The first tag to rener is <Router>. The links and the switch won't work if they are not inside of a Router tag.




#link :link:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/774b2vz9m2t4ntttk4ni.PNG)

Within the navbar, you will now use "<Link to="/home">Home</Link>" to create a link.  It is the equivalent of the HTML a href.  It means now that when you click on the home link, the url will add /home at the end of the url link.

#switch :bulb:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7j5d0kq3n1559pgkxsn.PNG)

Once you are able to change the url clicking the links, you still need to set a Switch to be able to open another page acording to the current url.  <Route path="/main" exact component={Main}/>

In this example, if in the url the route path is set as /main, then the page Main.js is going to be opened in the website.

Adrien Clesse
2018-2019 Article Archive
Tags: webdev, archive, opensource
Published: 2021-04-11 21:13:18

---
title: 2018-2019 Article Archive
published: true
description: Articles written in 2018-2019 on hapi pal's Medium
tags: webdev,archive,opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rg6r2rwdt18eghw9bybv.png
---

Before moving to dev.to, we wrote a handful of articles on [our Medium](https://medium.com/@hapipal).  We think there's some good stuff in there!  If you're interested to check it out, look no further:

#### [Building real-world APIs with hapi pal](https://medium.com/@hapipal/building-real-world-apis-with-hapi-pal-c0303fcef1c6)
_Feb 1, 2019 by @devinivy_

#### [A stand against the “easy” nodejs backend](https://medium.com/@hapipal/a-stand-against-the-easy-nodejs-backend-f67f4c25e04c)
_Jun 19, 2018 by @devinivy_

#### [The hapi pal roadmap: build a healthy community around building healthy nodejs web services](https://medium.com/@hapipal/the-hapi-pal-roadmap-build-a-healthy-community-around-building-healthy-nodejs-web-services-820c66d978c0)
_Apr 30, 2018 by @devinivy_

#### [Introducing hapi pal](https://medium.com/@hapipal/introducing-hapi-pal-550c13f30c5b)
_Apr 11, 2018 by @devinivy_
What I Worked On This Week: April 5th-9th, 2021
Published: 2021-04-11 21:09:14

---
title: What I Worked On This Week: April 5th-9th, 2021
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

My company is currently in a performance review period, and as I was completing my self-review, I realized that I don't really take enough time to celebrate the small things I accomplish every week. I decided that I wanted to spend more time thinking about what I accomplish every week, and what better way to do that than write a short recap at the end of the week of what I worked on.

And on that note, here are some of the things I did this week:
- **Onboarded to a new codebase**. My team is onboarding to a new project, which involves working in a codebase that I've never worked in before (which is written in a language that I've never worked in before...). So far all I've done is run the tests and run the codebase, but I'm excited to dig further into this codebase.
- **My first experiences with mob programming**. This week I participated in a few mob programming sessions. Mob programming is similar to pair programming, but with a larger group. One person drives (and this person should probably switch more frequently than we actually did) with everyone else assisting and offering suggestions. I enjoyed the mob programming and working as a group, but some of the sessions were very long, and it got to be very draining, so I don't think it's something I could do all the time.
- **Got to take my first steps into mentorship**. We have someone new joining my team next sprint, and I'm helping onboard her. I a bit dropped the ball on reaching out to her and starting the process, but once I got started, I enjoyed preparing some information and I'm looking forward to sharing it with her and helping her get set up over the next few days.
Salesforce: Visualforce
Tags: salesforce
Published: 2021-04-11 21:06:07

*Salesforce has so much terminology it can be a bit overwhelming in the beginning. I am starting a series of short posts to help me learn the definitions.*

------

##
**Visualforce:**
##
A markup language that lets you create custom Salesforce pages with code that looks a lot like HTML, and optionally can use a powerful combination of Apex and JavaScript.

https://trailhead.salesforce.com/content/learn/modules/platform_dev_basics/platform_dev_basics_code#get-to-know-your-options