teleren/devto huggingface dataset:
WordIT(a clone of Wordle)
Published: 2022-10-26 13:07:35


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te3rm657aeiv3zop88r4.png)Hi, its my first post on Dev.to . So what better than writing about something I am building. [Bugscoder](https://bugscoder.pages.dev/) you can check me out here. So I was building a clone of the famous game Wordle with ReactJS. 
I won't explain each and everything but I am here is the [Wordit](https://github.com/singharyan1007/Wordit) github link. Check out the code here. You can ask me anything. The code is completely documented so you wont face much obstacle.

## Firstly -
Firstly we should basically point out all the data we need to track.

- >--solution
- --Its the 5 letter word, e.g. 'guess'
- >--Past guesses
- --Past guesses is an array of words and each past guess is an array of letters [{},{},{},{},{}]
- --Each object is a letter of the guess word in the form of key value pair [{key:'a', color:'yellow'}]
- >--Current guess
- >--Keypad letters(the keypad which appears at the bottom of the game)
- --array of letter objects [{key:'a', color:'green'}]
- >--Number of turns left
- --an integer from 0 - 6

This is all for the data which we need to track.We will follow the color scheme for the matched letters as per the original game i.e. green for correct position of matched word and yellow for incorrect position of the matched word. 

##What about the game process

- >--entering words:
- --user enters a letter & a square is filled with that letter
- --when a user hits delete/backspace it deletes the previous letter
- --when a user hits enter it submits the word
- --if all the squares are not filled then the word id not submitted
- --if the word is already present or used then the word is not submitted
- >--checking the submitted words:
- --each letter is checked to see if it matches the solution
- --each letter is assigned a color based on its position in the solution
- --correct position is the solution is assigned green color
- --partial matches (the words are present in the solution but at incorrect position) are assigned yellow color
- --non matches are assigned grey color
- --the guess is added to the grid with the color
- --the current guess moves to the next row
- --the keypad letters are updated
- >--Ending the game:
- --when the guessed word is fully matched "well done" modal pops
- --When user runs out of guesses modal says 'Better luck next time' 

This is what we are going to build.

We create a `db.json` file which contains all the solutions or the 5 letter words. We need another library to read this json file. We will be using the json-server package to read the json file

After installing the npm package you need to run 
`json-server path-to-db.json --port 3001`
How far off is AI-created music?
Tags: discuss, music, ai
Published: 2022-10-26 13:30:00

Not long ago, I discovered the AI art generator, [Midjourney](https://www.midjourney.com/home/), and wrote the following post:

{% embed https://dev.to/michaeltharrington/i-just-discovered-midjourney-585a %}

Exploring this app got me wondering what the future of AI might hold for music. ~~Luckily~~, I ~~chanced upon~~ was delivered via algorithm a YouTube video that wondered the same:

{% embed https://www.youtube.com/watch?v=QN0DDD7B3oU&ab_channel=DavidBruceComposer %}

Along with this video, I read [an article about the recent Beatles documentary, _Get Back_](https://www.zdnet.com/article/the-beatles-get-back-shows-that-deepfake-tech-isnt-always-evil/) that talked about how they used machine learning to enhance and restore audio from the old 60's footage used in the doc. Peter Jackson noted in interview that they were able to teach the AI what Paul and Johns' voices sound like so that they could remix things more cleanly. It's pretty amazing stuff!

So, my questions to y'all are pretty open-ended:
- What do you think the future of AI holds for music?
- Have you come across other interesting resources talking about this subject?
- How far off is AI created music... and what does that look like anyway? Do you think AI will be composing completely fresh music or do you think AI will be copying the styles and voices of past musicians?
Highlight heading levels
Tags: a11y, css, html, debugging
Published: 2022-10-26 13:27:25

Headings in HTML are important for many reasons. For SEO, accessibility and overall information structure. 

The hierarchy is very important as well. First you **must** have the h1. And if you need another heading the following must be h2 and so on. 

This is an example structure of heading levels. 

```
h1 - Main title  
  h2 - Section title A.
  h2 - Section title B. 
    h3 - Subtitle for Section title B. 
      h4 - Subtitle for the previous h3. 
    h3 - Subtitle for Section title B
  h2 Section title C. 
  h2 Section title D.

```

How you style the headings are of course up to you. There's nothing to say that the h4 can't be the biggest heading. Or the h1 the smallest. Or that different h2 headings can have different design. 

And that is why the following CSS can be used to highlight in your _development_ code what level every heading has. 


```css
h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
  color: red;
  opacity: 1;
  background-color: white;
  z-index: 1;
  position: relative;
  top: -2px;
  left: -2px;
  border: 1px solid red;
  font-size: small;
  padding: 0 1px;
  line-height: 1;
  margin-right: 0;
}
h1:before { content: 'H1'; }
h2:before { content: 'H2'; }
h3:before { content: 'H3'; }
h4:before { content: 'H4'; }
h5:before { content: 'H5'; }
h6:before { content: 'H6'; }
```

The idea is to add an element before every heading and spell out the heading level to make it visible on the page without checking the source code or dev-tools. 

Hope you find this useful. 

Until next time!
What does MuleSoft Composer let you do?
Tags: mulesofthackathon, mulesoftconsultingsupport, mulesoftconsultingservices
Published: 2022-10-26 13:21:17

## What does MuleSoft Composer let you  do? 
 
**Not a fan of coding? Then MuleSoft Composer is only for you.** The tool is developed for SaaS administrators, business analysts, marketers, salespeople and team managers. With Composer, non-programmers can quickly and easily create data flows that connect data sources and automate integration tasks without writing a single line of code. Previously, MuleSoft Composer was only available with Salesforce; now it is in standalone version. MuleSoft Composer and Composer for Salesforce share the same core features and provide a seamless user experience that helps build integrations with "clicks, not code." 
 
 Investing in the Salesforce and [MuleSoft consulting services ](https://cloudodyssey.co/mulesoft-consultancy/
)Anypoint platform is a serious financial commitment. Therefore, it may not be the right choice for small businesses or startups taking their first steps in the integration space. MuleSoft Composer, on the other hand, is easy to use and can  solve various integration problems with just a few clicks. MuleSoft Composer is designed and built with accessibility in mind, providing context-sensitive in-app help every step of the way. 
 
 To automate a process with Composer, you need to create a flow. A flow is a sequence of steps that mimic a process. 

- 
Get data  based on a specific event or schedule from systems like Google Sheets, Tableau, Workday or a Salesforce organization. 
- 
Perform operations on  data, such as filtering and routing data through a flow based on conditions. 
- 
Synchronize data between one or more target systems. 
 
 One of the advantages of MuleSoft Composer is the many ready-made plugins. A wide range of adapters allow integration with various systems, including Salesforce, NetSuite, Stripe, Workday, Slack, Google Sheets, Microsoft Teams, ServiceNow and Jira. MuleSoft is constantly developing and releasing new plugins so  you can quickly meet your business requirements. 
 
 Imagine a sales team that creates and manages sales data in Salesforce and  orders in NetSuite. When an opportunity is scored in Salesforce to change to Closed, the team must manually create the associated sales order in NetSuite. After that, they should notify the sales channel about the order in the Slack channel. In this scenario, the vendor has to use different systems and manually update them. With MuleSoft Composer, a system administrator can easily automate the process by creating a single workflow. The flow includes a step that automatically creates a new order in NetSuite when the opportunity is marked as Closed Won in Salesforce. The next step is to notify the Slack sales channel. Thanks to the composer, everything happens almost in real time. 
 Anyone can automate processes and connect systems with one click. You'll never have to write code again!
Hey, how much memory did that command take?
Published: 2022-10-26 13:19:40

Last week my customer had a problem. Their custom webpack build was working fine on a spiffy developer Mac, but fell over when running on a deployment server. I could see an out of memory error, but how much RAM did this thing really need? Adding more "iron" in the form of a bigger AWS instance was a possible solution, but how much iron exactly?

I knew I could watch the output of the `top` command, and sort it by "resident set size," a fancy technical term for "how much memory this process really needs, not counting shared stuff." But I also knew the webpack build would "fork" a lot of child processes with their own memory requirements, and besides, who wants to stare at the screen for several minutes? Don't blink, you might miss the magic moment!

This made me think of the `time` command. `time` is a classic Unix command that tells you how much time another command takes to run:

```
 ~ $ time sleep 5

real	0m5.012s
user	0m0.001s
sys	0m0.004s
```

`time` is great, but what I really needed was `max-mem`, a command to show me the **peak resident set size** of my command... including all child processes.

I couldn't find it, so I whipped something up. [Here's the max-mem command.](https://www.npmjs.com/package/max-mem)

Now I can type:

```
max-mem npm run build

[Regular output appears here]

Max memory usage: 800MB
```

With the help of `max-mem`, I was able to tell my customer exactly how much it would cost to upgrade the deployment server to ensure enough RAM for the webpack builds. His response: "yes please, upgrade the server! My developers can optimize RAM usage later." Problem solved.

It's written in Node.js, and samples the memory usage every 100 milliseconds by automating the `ps` command. Is there a better way? Maybe! Pull requests are welcome, just remember it should work on both MacOS and Linux.

Check it out and let me know what you think.
C++ Delay() in Timer: how to use correctly?
Tags: cpp, beginners, programming, arduino
Published: 2022-10-26 13:08:16

Hey there!

I'm a first semester software student and for a course I am exploring the world of C++ and Arduino (UNO in my case). 

My assignment is to make a timer counting down from 10 minutes (shown on a 4 digit display). 

The thing I struggled with is how to program a pause functionality on the same button (btnOne) that also starts the timer. When I finally discovered how, I noticed something buggy: the delay() might be causing some trouble. See my code for implementation. 

**When clicking on the start/pause button the button doesn't immediately register it.** Possibly because the delay might be blocking the communication of user input to the button. 

_The delay (of 1 second) is used to limit the execution of the if-statement in timer() to once per second; like a timer._

My question is: how can I improve my code so that the clicks on btnOne are immediately registered?

Thanks so much in advance.

```C++
const int btnOne = 8;
const int btnTwo = 9;
int btnOn = LOW;
int btnOff = HIGH;
const int clockPin = 10;
const int dataPin = 11;
const int buzzer = 3;
int btnOneState = 0;
int btnTwoState = 0;
long time = 600000;
long timeValueState = time;
int timerDisplay = 1000;
bool pause = true;

void setup()
{
  Serial.begin(9600);
  pinMode(clockPin, OUTPUT);
  pinMode(dataPin, OUTPUT);
  pinMode(btnOne, INPUT_PULLUP);
  pinMode(btnTwo, INPUT_PULLUP);
  pinMode(buzzer, OUTPUT);
}

void timer() {
    // Count down from 600000 to 0
    if (timeValueState >= 600 ) {
      timeValueState = timeValueState - 600;
      Display.show(--timerDisplay);
      // When reached last count, display is set to 0 and buzzer turns on for 5 seconds
      if (timeValueState == 600) {
        Display.show(timerDisplay == 0);
        tone(buzzer, 200);
        delay(5000);
        noTone(buzzer);
      }
      Serial.println("time:");
      Serial.println(timeValueState);
      delay(1000);
    }
}

void loop()
{
  btnOneState = digitalRead(btnOne);
  btnTwoState = digitalRead(btnTwo);

  // If button is on, change state of pause (true, false)
  if (btnOneState == btnOn) {
    Serial.println("btnOne pressed");
    pause = !pause;

  }
  // When button is off and pause is not true, activate the timer
  else if (btnOneState == btnOff && pause == false) {
    Serial.println("btnOne NOT pressed");
    timer();
  }

  // Reset time and timerDisplay back to 10 minutes. 
  if (btnTwoState == btnOn) {
    Serial.println("btnTwo pressed");
    timeValueState = time;
    Display.show(timerDisplay = 1000);
  }
}


```
How to dynamic import web components to improve our application performance
Tags: webcomponents
Published: 2022-10-26 12:49:31

If we're building single-page web application with vanilla web components, we can dynamic import web components to improve the performance.

Let's say we have a subscribe button on the page and a newsletter subscription modal will pops up should users click this button. This is a basic `newsletter-modal` web components codes.

```javascript
// components/newsletterModal.js
export default class newsletterModal extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <!-- component html here -->
      <style>
      /* component styles here */
      </style>
    `;
  }

  show() {
    this.classList.add('visible');
  }

  hide() {
    this.classList.remove('visible');
  }
}

customElements.define('newsletter-modal', newsletterModal);
```

Here's codes to achieve dynamic import our `newsletter-modal` component. `50ms` timeout here is when `show()` is called, we want the newsletter-modal to have a slide animation into the viewport. Not sure if this is a bug or I did something wrong there, but if I leave out the `setTimeout` there, there is no CSS animations on that newsletter modal. Possible reason is that -- just me guessing -- our component is not fully ready to animate yet when `show()` is called, this is such an interesting problem that I should revisit in future.

```html
<!-- place our component inside index.html -->
<newsletter-modal></newsletter-modal>
```

```javascript
const button = document.querySelector('#subscribe-button');
button.addEventListener('click', (e) => {
  import('./components/newsletterModal.js')
    .then(() => {
      return customElements.whenDefined('newsletter-modal');
    })
    .then(() => {
      const timeout = setTimeout(() => {
        document.querySelector('newsletter-modal').show();
        clearTimeout(timeout);
      }, 50);
    })
    .catch((error) => {
      // your error handling here
      console.error(error);
    });
});
```

And here's `async/await` version.

```javascript
const button = document.querySelector('#subscribe-button');
button.addEventListener('click', async (e) => {
  try {
    await import('./components/newsletterModal.js');
    await customElements.whenDefined('newsletter-modal');
    const timeout = setTimeout(() => {
      document.querySelector('newsletter-modal').show();
      clearTimeout(timeout);
    }, 50);
  } catch(error) {
    // your error handling here
    console.error(error);
  }
```
5 Alasan Belajar React Languages
Published: 2022-10-26 12:49:30

Here are 5 reasons when you start learning a reaction language. Let’s study together and discuss in the comments column, and save it so you don’t forget💬😝

Follow : https://www.appardana.com/
Stay Young, Be Innovative and Keep Learning

#React #Web #Skills #IT #ReactJS #ReactNative #Developer #Roadmap #SelfImprovement #Growth #Aditria #Pardana #AditriaPardana #appardana #iAppTech ️💻

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ne4mgypnpceo63xdccta.jpg)
Is your package.json safe?
Tags: javascript, opensource, security
Published: 2022-10-26 12:39:55

Let's do a simple check: open any JS project that you have at hand and try to find the `^` symbol in the package versions. If you don't have one, congratulations! Otherwise, I have bad news for you.

## “Compatible” versions

By default NPM saves package versions in `package.json` with `^` prefix in front of the version number.

`^version` is described as “Compatible with version” in [NPM docs](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#dependencies) which means “any minor or patch version equal or higher than specified”.

The problem with such versions is that after removing `node_modules` and `package-lock.json` and running `npm install` some packages may be upgraded to higher patch or minor versions without you knowing it.

This _shouldn't_ break anything because usually package developers follow semantic versioning rule saying that breaking changes can only be introduced in major version updates.

But in reality there is no guarantee that new minor version of a package wouldn't break something in your app. This happens even for well-tested and well-maintained packages with large community like Webpack ([see issue #8082](https://github.com/webpack/webpack/issues/8082)).

## Security

But there is also a much worse problem: security risks. Imagine that a hacker gets access to the NPM account of the owner of some popular package. Publishing a patch version with malicious code would immediately make all the applications using this dependency (or even package that depends on this dependency) vulnerable. You can easily find examples of such attacks by googling 'npm package hack', here is one of them: [DeFi Exchange dYdX NPM User Account Gets Hacked](https://github.com/dydxprotocol/solo/issues/521)

## How to fix the problem
1. Add `save-exact=true` to your package.json. This would make npm install specific versions of the packages that are used in your project.
2. Remove `^` signs from the package versions in package.json. Or replace this inexact versions with actual versions of installed packages. You can find them in package-lock.json.

But there is a simpler solution: a CLI tool called [exactify](https://www.npmjs.com/package/exactify).

I've created it to automate the process of replacing “compatible with” versions with exact versions of installed packages taken from `package-lock.json`. It also adds `save-exact=true` to your `.npmrc` file which forces NPM to save exact versions for further package installations.

Just type `npx exactify` in the root of your project and see what happens!

## Thank you for reading

Let me know if you found this useful. If you have any suggestions, feature requests or bug reports, feel free to fill an issue or open a PR on [GitHub](https://github.com/mlshv/exactify). Stars are kindly appreciated!

Thank you for reading! Don't forget to hit the like button and leave a comment bellow ✨
Create your own Kubernetes Cluster in 15 Minutes on AWS EC2
Tags: ec2, terraform, ansible, automation
Published: 2022-10-26 12:39:50

I was thinking about this project for a long time and finally, I was able to find some time to put things together. I know, these days it’s not a big deal to quickly spin up a Kubernetes cluster with most of the cloud service providers. But we don’t have full control over them as they are managed by cloud providers. Sometimes we all got requirements to change bits and pieces here and there to try new things in Kubernetes clusters. It’s always nice if we can quickly spin up a k8 cluster where we can manage all the pieces as we need.


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

At the time of this article, I managed to complete the Highly Available multi-master Kubernetes cluster as per the above architecture diagram. Once you apply the Terraform code, it will do the infrastructure provisioning and then the cluster configurations with Ansible. Although, I didn’t include the Ingress traffic management part and the post cluster configuration in this repo as I have already discussed them in the article linked [here](https://medium.com/@lkravi/aws-eks-with-terraform-gitops-7c5f3d60525d).

Let me walk you through the code and quick demo.

{% embed https://www.youtube.com/watch?v=Oxv7ZA-iOpc %}

As you can see in the demo, We have full control over all the layers. for example, if we need to try out different container runtime, we can change the ansible-playbook and quickly spin up a new cluster with the required new configuration. One thing to note, I didn’t pay much attention to security hardening at the moment as this is just an experimental cluster. So this is not good for production workloads. But I’m planning to improve the code 😊 as soon as I found more time.

GitHub Repo : https://github.com/lkravi/kube8aws

I know that there are many areas in which we can improve on this repo. If you find anything interesting in this repo. feel free to contribute.
Two ways to handle ltr/rtl on a page.
Tags: css, ltr, rtl, righttoleft
Published: 2022-10-26 12:35:01

When creating a multilingual web page you might need to handle languages written from right to left. This comes with some design issues.

First, you must add the `dir` attribute to your root (`<html>`) element. But the `dir` attribute alone cannot tackle everything. Sometimes you might have an image next to a paragraph, and a `margin-left` spacing them out. When you switch to the rtl language, you end up with a paragraph with a left margin, and an image stuck on the right side of it.

I will show you two ways that I have used to solve this problem.

## Using CSS variables
The first way I thought was using CSS variables and some calculations to play with the left margin.

```css
html[dir="ltr"] {
  --ltr: 1;
  --rtl: 0;
}

html[dir="rtl"] {
  --ltr: 0;
  --rtl: 1;
}

p {
  margin-left: calc(var(--ltr) * 20px);
  margin-right: calc(var(--rtl) * 20px);
}
```
What I do here is assign a number (0, 1) to the "boolean" variables `--ltr` and `--rtl`, declaring which direction is enabled. When the `dir` changes, the variables swap values. Then I calculate the left and right margins by multiplying the variables with the desired pixel value. So in ltr the left margin will be `1 × 20px = 20px`, and the right margin will be `0 × 20px = 0`. When we change to rtl the margins will swap values.

{% codepen https://codepen.io/istavros/pen/zYjgPQe %}

## Using modern CSS

This is a clever way of setting the margins based on a boolean enabled/disabled variable. But, there is a better way by using modern CSS.

```css
p {
  margin-inline-start: 20px;
}
```

And that's it. Way less code, and more elegant. It actually instructs the browser to add a 20px margin at the "start" of the x-axis. The start of the x-axis is relative to the direction set by the `dir` attribute. So in this case the browser will set a 20px left margin on ltr direction, and a 20px right margin on rtl direction.

{% codepen https://codepen.io/istavros/pen/OJZKQOq %}