teleren/devto huggingface dataset:
Lit: how to use it
Tags: html, lit, javascript, typescript
Published: 2022-08-08 19:47:00

Lit can be easily added to existing projects:
in fact, Lit components work with any JavaScript framework, template server system and CMS.

In fact, a Lit component can be used directly in HTML, with the DOM API or in templates.
Most JavaScript frameworks have great support for Web components and Lit, just import the element definition and use the element tag names in the templates.

First, you install the Lit package from the command line, with npm: 

```
npm i lit
```
A new item can be created in any project folder, using JSX.

JSX is a language used for creating templates. It is an extension of the JavaScript syntax.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5i8q6k6hljks4azcuksc.png)
 
A Lit component is a reusable piece of the user interface. It is a kind of container, with a state, which displays a user interface based on its state.
It can react to user input, trigger events, whatever you can expect from a UI component.
A Lit component is an HTML element, so it has all the standard element APIs.

We create a class that extends LitElement and register it with the browser:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5knb4i73n34dbfs753j.png)

In TS, the @customElement decorator is an abbreviation for calling customElements.define, which registers a custom element class with the browser and binds it to an element name (in this case, simple-greeting).

Otherwise you can use JS:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ix31gqy2hxs1lwluf5f7.png)

By defining a Lit component, you are defining a custom HTML element; you can use the new element like any HTML element:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jox48x5xu37fvcynz911.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/553x674avrfnjhn17nki.png)
 
The base class LitElement is a sub-class of HTMLElement, therefore a Lit component inherits all properties of the standard methods of HTMLElement.

Specifically, LitElement inherits from ReactiveElement,
which implements reactive properties, and in turn inherits from HTMLElement.

TypeScript infers the class of an HTML element returned by some DOM APIs based on the tag name.

For example, we know that document.createElement ('img') returns an HTMLImageElement instance with an src property of type string.

Custom elements can get the same treatment by adding the mapping with HTMLElementTagNameMap.

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

In this way, the following code performs the type checks correctly:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zt5kpppzk0n9e29aa3qp.png)

It is a good idea to add an HTMLElementTagNameMap entry to all elements
created in TypeScript and publish the .d.ts types in the npm package.
 
 [See here](https://www.slideshare.net/EleonoraRocchi1/lit1pdf)
Connecting ionic angular app to WordPress using REST API.
Published: 2022-08-08 20:08:27

ionic is an open-source UI tool-kit for building native and web app using HTML, CSS AND JS. It also has integrations for frameworks e.g Angular.

REST API makes it possible for developers to connect WordPress with other applications outside it's basic installation.

I'm currently building an App using ionic but stuck at connecting it to WordPress using REST API.

Any suggestions please?
Inverse Captcha
Tags: adventofcode, algorithms, programming, javascript
Published: 2022-08-08 19:43:00

## [Advent of Code 2017 Day 1](https://adventofcode.com/2017/day/1)

## Part 1
1. Circular lists from the beginning!
2. Writing my working algorithm

### Circular lists from the beginning!
- I knew it was a recurring theme throughout the year
- But I didn't know it started with Day 1

### Writing my working algorithm
An outline of my algorithm
```
Split the input into an array of numbers
For each number
  Accumulate a sum, starting a 0
    If the next number (wrapping if necessary) is the same number
      Increment the sum by the number at the current index
    Otherwise, increment the sum by 0...leaving it unchanged
```

A `reduce()` that leverages all of the possible parameters:
```js
return input
  .split('')
  .map(Number)
  .reduce((acc, curr, index, RA) =>
    acc += RA[index] == RA[(index + 1) % RA.length]
        ? curr : 0
  , 0)
```

## Part 2
### Adjusting my working algorithm
Instead of checking the next index, I'll check the index half a list away.

An outline of my algorithm
```
Split the input into an array of numbers
For each number
  Accumulate a sum, starting a 0
    If the number half a list length away (wrapping if necessary) is the same number
      Increment the sum by the number at the current index
    Otherwise, increment the sum by 0...leaving it unchanged
```

A small tweak to the number being added to `index`, and Voila!
```js
return input
  .split('')
  .map(Number)
  .reduce((acc, curr, index, RA) =>
    acc += RA[index] == RA[(index + (RA.length / 2)) % RA.length]
        ? curr : 0
  , 0)
```

## I did it!!
- I solved both parts!
- Using one long statement comprised of chained array methods!
- Where both parts only differ by a single operand!

## Year in review
Since I worked in reverse, today was the first time I saw this animation:
![Snapshot of this year's map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/280o81o50jhqs8yk8lx2.gif)

This static map should which puzzles I made simulators for:
![Map with Simulators indicated](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffpxp0mgf1vo4z5isdqx.png)
- `46` stars! A new personal best!
- 21 two-star days! A new personal best!
- 4 one-star days! A new personal best!
- 0 no-star days! A new personal best!
- [8 simulators built](https://aocsimulators.rmion.repl.co/)! A tie with 2018 for lowest amount.
- Tons of GIFs created...many which helped me solve the puzzle!

It's been a blast, 2017!
3 : Procrastination slowing taking over me!
Tags: beginners, programming, productivity, todayilearned
Published: 2022-08-08 19:39:55

Sheesh! Procrastination is getting the better of me. I have been lazy and barely do a CodeChef problem a day! I need to work on that. It might be because of the exams but I doubt that is it. I've been a ton more productive when I was alone, both here and at home. I'm doing simple CodeChef problems and at least a simple GoLang project a day. The hope is still strong #30DaysofCode.
Use CloudFront to serve a static website hosted on Amazon S3
Tags: aws, tutorial, beginners, cloud
Published: 2022-08-08 19:38:00

Part 2/n of the Cloud Resume Challenge

## Chunk 1: Building the frontend

After configuring the Next.js website on S3, you'll notice that the website endpoint [http://cindy-crc.s3-website-us-east-1.amazonaws.com/](http://cindy-crc.s3-website-us-east-1.amazonaws.com/) is HTTP. This is because the website URL should use HTTPS for security, and this is where we'll need to use CloudFront.

Stack:
- Next.js
- Amazon S3
- Amazon CloudFront

As you'll remember from the previous [blog](https://dev.to/cindyledev/configure-a-static-website-on-amazon-s3-cloud-resume-challenge-1fdc), you'll need to remove any Bucket policy attached to the S3 bucket and Block all public access to continue with this.

We will be using a REST API endpoint as the origin, with access restricted by an Origin Access Identity (OAI).

#### Create the CloudFront Distribution
I mostly followed [Use CloudFront to serve a static website hosted on Amazon S3](https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-serve-static-website/)

1. In the [Amazon CloudFront console](https://console.aws.amazon.com/cloudfront/v3/home), choose **Create distribution**
  - Origin domain: **cindy-crc.s3.us-east-1.amazonaws.com** (from the dropdown menu)
  - Name: **cindy-crc.s3.us-east-1.amazonaws.com** (should be autofilled)
  - S3 bucket access: **Yes use OAI (bucket can restrict access to only CloudFront)**
  - For **Origin access identity**, select **Create new OAI** and choose the newly created OAI
  - Bucket policy: **Yes, update the bucket policy**
  - Default root object - optional: **index.html**
2. Click **Create distribution** and wait for the **Last modified** status to go from **Deploying** to **Date**. This may take ~5 minutes
3. You should be able to visit the **Distribution domain name** link [https://d1ij0wngzhbeyc.cloudfront.net](https://d1ij0wngzhbeyc.cloudfront.net) and see the resume website

#### Troubleshooting
If you're getting an **Access Denied** error, it's probably due to Bucket policy. You should be blocking all public access and only allowing your CloudFront Distribution to access your S3. The S3 bucket policy should look like

```diff
{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
-                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity Distribution-ID"
+                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E392Q20ZNZ7N4X"
            },
            "Action": "s3:GetObject",
-            "Resource": "arn:aws:s3:::Bucket-Name/*"
+            "Resource": "arn:aws:s3:::cindy-crc/*"
        }
    ]
}
```
cy.get() vs. cy.contains()
Tags: cypress, testing, cyget, cycontains
Published: 2022-08-08 19:29:00

## Get to know one of the differences between the commands `cy.get` and `cy.contains`

Here's a simple but helpful piece of information to better use [Cypress](https://cypress.io) and understand when to use one command or another.

Do you know the difference between the two lines of code below?

```js
cy.get('tr:contains(User 1)')
```

```js
cy.contains('tr', 'User 1')
```

They look quite similar, don't they?

However, they are actually different.

While [`cy.get`](https://docs.cypress.io/api/commands/get) gets one **or more** DOM elements.

[`cy.contains`](https://docs.cypress.io/api/commands/contains) gets **only one** DOM element.

[Here's an example](https://github.com/wlsf82/sum-table-rows-with-cypress/blob/users-logs/cypress/e2e/usersLogs.cy.js) where we need to combine `cy.get` with [jQuery's `contains`](https://api.jquery.com/contains-selector/) selector instead of using `cy.contains`.

Just to reinforce.

```js
cy.get('tr:contains(User 1)') // get ALL table rows which contain User 1 in their content
```

```js
cy.contains('tr', 'User 1') // get the first table row which contains User 1 in its content
```

I hope you find this helpful information.

___

Did you like the content? Leave a comment.

___

Curious and want to learn more about Cypress Testing Automation?

Check out [my online courses on Udemy](https://udemy.com/user/walmyr).

___

👋 Until next time, and happy testing!

___

This content was translated to Portuguese and can be found on the [Talking About Testing blog](https://talkingabouttesting.com/2022/08/08/cy-get-vs-cy-contains/).
Pass Data from children Component to Parent Component in ReactJs
Tags: react, javascript
Published: 2022-08-08 19:01:00

Been studying for Frontend React interviews the past few weeks should I get one and came across a question from the guide I was using and honestly got confused because I know of passing data from Parent to child since React is unidirectional and when doing that Vice versa, passing data from child to parent you use either the Context API for or state management libraries like Redux, Mobx or Recoil, FYI I am only familiar with Redux but found an interesting answer to the question since the question said not to use either Context API or Redux or any state management library so after googling and the regular Stackoverflow, reading some medium articles and reading the React Docs a little I found out you can actually pass data from child to parent using CALLBACKS.

I was confused at first then I remembered according to MDN docs:
A callback function is a function passed into another function as an argument. This call back function is then invoked inside the outer function to complete some kind of routine or action.

#Procedure 

There are basically two steps to achieve this process and I will be listing them and creating a component as we go

- Creating a Parent component and then creating a callback function in the parent component
```javascript
function ParentComponent() {
  const [team, setTeam] = useState("");

This here is the callback function that will be passed as a prop to the childcomponent
  const addTeam = (team) => {
    setTeam(team)
  }
  
  return (
     <>
    <h3>This is the Parent Component that we 
        will be focusing on
    </h3>
    <h1>Your selected team is {team} </h1>
Below, the addTeam function is then passed into the child component as a prop
    <ChildComponent addTeam={addTeam}/>
     </>
  );
}
```

- Creating structure of the ChildComponent
```javascript
const ChildComponet = ({ addTeam }) => {
The addTeam function will then be used to push the data(team) selected back to the ParentComponent
  const teams = ['LA Clippers', 'Boston Celtics', 'Cleveland Cavilers', 'Memphis Grizzlies'];

  return (
    <div>
      <h3>Choose Your Team in the child 
          component
      </h3>
      <ul>
        {teams.map(team, index => {
          return (
            <li key={index} onClick={() => addTeam(base)}>
              {team}</span>
            </li>
          )
        })}
      </ul>
      )}
    </div>
  )
}
```

- In the ChildComponent we simply used an **onClick** property to handle user click and then the data clicked is passed to the parent component and your selected team is displayed on your screen, the action is thereby complete. 

#Conclusion
Data has successfully been passed from the ChildComponent to to the ParentComponent and the unidirectional flow of react is beaten. If you feel I made a mistake, kindly hit me to tell me what I missed, thanks for reading.
How to Easily Add and Remove Any Elements from a JavaScript Array
Tags: javascript, webdev, array, beginners
Published: 2022-08-08 19:00:00

In this post I want to discuss a super useful way to add and remove elements from _ANY index_ in a javaScript array.

You're probably familiar with `push`, `pop`, `unshift`, and `shift`. They come in handy for sure, if you want to add and remove elements from the beginning or the end of the array.

**However, there are a TON of different scenarios where you will need to insert and remove array elements from any position.**

This is worth memorizing _cold_!

Let's start with an array of animals...

```javascript
const animals = ['😺' , '🙉' , '🧞','🦊', '🦁', '🐯', '🐵'];
```

Wait! There's a genie in the list at index 2. Not sure how that snuck in there 😂. Let's go ahead and remove that array element.

```javascript
const genieIndex = 2;

animals.splice(genieIndex,1);

console.log(animals);
// => ['😺' , '🙉' ,'🦊', '🦁', '🐯', '🐵'];
```

`splice(index,1)` removes the array element located at `index`. Very simple.

Now `🐶` is feeling left out, so let's add him into the array at `index` equal to 2.

Again, we can use the splice array method.

```javascript
const index = 2;

animals.splice(index, 0,'🐶');

console.log(animals);
// => ['😺' , '🙉' ,'🐶','🦊', '🦁', '🐯', '🐵'];
```

`splice(index, 0,'🐶')` inserts the dog emoji at position `index`.

Now there are definitely more sophisticated array manipulations you can do with `splice`. However, start by memorizing how to add and remove array elements with `splice`. You'll thank me later!

If you enjoyed this article please check out my blog
[Indepth JavaScript](https://indepthjavascript.dev/) for more illuminating
content.
My journey starts here...
Tags: beginners, css, webdev, showdev
Published: 2022-08-08 18:56:00

I'm a very beginer in programming and really glad to join dev community!
Two months ago I've started my journey into web development. Looking forward to become a FrontEnd developer.

Two months ago the only thing I new about javascript was that it exists LoL

The same was with HTML and CSS.

But after two months of hard studying I've done some things that make me proud of myself!

And today I want to share one of my small projects which is my small step into development.

I've created this [stop-watch](https://anastasiia-tilikina.github.io/layout_stop-watch/) using HTML and SCSS only.

**The magic starts here!**
How to tell if the code is clean?
Tags: programming, beginners, design, cleancode
Published: 2022-08-08 18:50:00

Clean code is a buzzword and a boogieman in the software industry. There're books called "Clean code" and there're social-network-based fights on what could be called "clean code" and what couldn't.

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

Why it is difficult to create a "clean code formula"? I have been thinking about it lately and I think I was able to come up with something interesting.

Programming code we write is not only instructions for a computer, but also a form of communication. Just think about it - we try to write something which:
👉  can be understood by a computer
👉  can be reasonably easy read (and written!) by programmer
👉  is reasonably easy to change 
👉 as  well as communicate the "grand plan" of a software system architecture

And I haven't yet mentioned that it should be:
👉 reasonably efficient (with every task having different efficiency requirements)
👉 and not consume unnecessary memory.

Clearly, it is not an easy task. It also isn't something100% objective and/or measurable.

Different people have different readability "requirements". I am assuming this is mostly defined by what kind of code they were exposed to, but there might be something else going on.

A similar challenge is with "grand plan"/"architecture" communication - depending on what kind of applications one worked with as well as personal paradigm preferences there may be quite big differences in understanding of what could be a good architecture direction.

The worst thing is that in many cases the objective differences are, in fact, marginal. Similarly "code smells" are just heuristics and not definitive tests. 

So, while it is great if you care about writing clean code, keep yourself open-minded and never assume that you know "the formula"

Interested? Then check out the next post on clean code - ["The most important code smells"](https://dev.to/dadyasasha/are-there-any-objective-code-smells-1hm6)
A useful array method in Javascript
Tags: javascript, webdev, tutorial, react
Published: 2022-08-08 18:41:41

Have you faced a nested array before? With nested i mean this for example:
`const array=[1,2,3,[4,5]]`
If we want to access to all of it's elements one by one we will have to use nested map methods too, so to avoid that we can use the flat method

`array.flat()`
Which will return an array

`[1,2,3,4,5]`
This is all good and fun but if our main goal was to map across all of the items we still have to use map,so why don't we **combine** both methods in a single one? 
`array.flatMap((item)=>console.log(item))`
Will do the job. 

That's it,happy coding. 
**Ps:try these methods with this array**
`const nastyNested=[1,2,3,4,[[5,6]]] `
Why cant I use with my agent?
Published: 2022-08-08 18:33:12

Hi,
I created an agent with the name bcdbcdbcd and the lable bcdbcdbcd. And when I created a job that would use an agent I got:
(pending—'Jenkins' doesn't have label 'bcdbcdbcd')
[The output](https://drive.google.com/file/d/1In4AxC9hPMslAaQY3KkBEOtN_fpMHAEl/view?usp=sharing)
[The agent](https://drive.google.com/file/d/17r_sgrHddr3qIdVCo4yuoTDEoYRCER57/view?usp=sharing)
I would love to know what the solution is.
Thanks
Using .trim() to validate input strings before submission to a db✂️
Published: 2022-08-08 18:18:49

I ran across this bit of code today:

```js
 if (request.body.body.trim() === '') {
		return response.status(400).json({ body: 'Must not be empty' });
    }
```

This actually made me pause. It seemed unnecessary to me. Like... _why?_ I could easily just use something like:

```js
 if (request.body.body === '') {...}
```

To check for empty fields, right?

But the use of `trim()` is actually pretty smart. `trim()` returns a string without spaces at the start or end. Thus, for example:
```js
let trimmy = "       foo.        "
let trimmier = "                bar              "
console.log(trimmy.trim() + trimmier.trim())
//foo.bar
```
So, why use `trim()`? To prevent the submission of `" "` or or any number of empty spaces to the database. Pretty slick.
`" ".trim()` will return `""`

Cool, huh?
Principles To Achieve a Better UI/UX Design
Tags: webdev, beginners, ux, design
Published: 2022-08-08 18:17:39

Introduction
The main aim of any business is to increase its sales in order to increase its overall growth. Here, UX/UI Design plays a fundamental role in achieving this goal. UI/UX Design of your product (website, application, etc) improves the user experience and customer satisfaction. This ultimately helps increase the number of users of the specific product!

So, here are 4 Gold Principles you can implement to achieve a better UI/UX Design 😉

**1. Place Users In Control**
👉 Good UI/UX design help to instill a sense of "control" in their users.

👉 You can do so in the following ways:

🔷 Make actions Reversible

This means that you should always include a Redo/Undo option
🔷 Interface should be easy to navigate

Provide visual cues and add "predictability"
🔷 Feedback

Users should be able to give feedback and you should act on it!
🔷 Status

When your app is doing something, show the status of that action to the user.

**2. Make your User comfortable**
👉 You can do this in the following ways:

🔷 Simplification and Elimination

Just eliminate anything that is not helping your users to simplify the flow!
🔷 Never ask for already entered data again until or unless e.g you want authentication.

🔷 Use universal language and universal elements that every user can understand.

🔷 Make sure that you use things such as colors, fonts, font sizes, etc to make your design "accessible".

🔷 Add well-crafted error messages so the user understands what they did wrong.

**3. Reduce cognitive load**
👉 It is the amount of mental processing required to perform any task or use any product.

👉 Here's how you can reduce it:

🔷 Add info in chunks so that it is easy to process.

🔷 No of actions to perform a task should be as few as possible.

🔷 Induce visual clarity by organizing the information in a way that is easy to understand.

**4. Make User Interface Consistent**
👉 Consistency is the key while doing anything! It is also of extreme importance in UI/UX Design.

👉 Here's how you can do it:

🔷 There should be a specific color scheme for your product.

🔷 Add functional consistency

Any object should work similarly throughout the product.

Similar functional behavior keeps the users happy!

🔷 Don't reinvent terminologies.

Use the ones that are already familiar and within the expectations of the user.


Let's connect!

✨ Twitter : twitter.com/rohittmore

✨ Github : github.com/rohitmore07
Fix vercel error : A system error occurred: uv_os_gethostname returned ENOSYS (function not implemented)
Published: 2022-08-08 18:17:19

If you looking for the solution you are probably has **windows 7 OS**.
all you have to do go to `node` directory in your system and follow the path : 
node_modules->vercel->dist->index.js.

On top of index.js override the system function hostname:

```
const os=require("os")
os.hostname=()=>"localhost"
```
Then run vercel again and will work with you

**I hope is helped !**