teleren/devto huggingface dataset:
Javascript Programming Challenge
Tags: javascript, beginners, challenge, tutorial
Published: 2023-05-03 02:57:01

### Make Array Consecutive

I have been working on some problems on CodeSignal and came across a problem that challenged me a bit. Now that I have solved it I realized the answer was very simple but I had to sit down for some time to really get it and figure it out at first.

#### The Problem (from [CodeSignal](https://app.codesignal.com/))

Ratiorg got `statues` of _different_ sizes as a present from CodeMaster for his birthday, each statue having an non-negative integer size. Since he likes to make things perfect, he wants to arrange them from smallest to largest so that each statue will be bigger than the previous one exactly by `1`. He may need some additional statues to be able to accomplish that. Help him figure out the minimum number of additional statues needed.

#### Example

*   For `statues = [6, 2, 3, 8]`, the output should be `makeArrayConsecutive2(statues) = 3`.
*   Ratiorg needs statues of sizes `4`, `5` and `7`.

#### My initial thought process

My first thought when looking at this problem was to simply iterate through each number and figure out whether the next statue was the number being iterated plus one. This was a sort of brutal force approach to this problem. By iterating I would be able to find the number of statues needed to make the array consecutive. At first I started by sketching some pseudo code on paper until I finally got some code that I was sort of satisfied with. This is what my initial code looked like this.
```javascript
function makeArrayConsecutive2(statues) {

  let num = 0

  statues.sort(function(a, b){return a-b})  
  for (let i = 0; i < statues.length; i++) {  
    if (statues\[i\] + 1 === statues\[i + 1\]) {  
      return num  
    }  
    else {  
      statues.splice((i + 1), 0, (statues\[i\] + 1))  
      return num += 1  
    }  
  }

  return num  
}
```
This code only passed a few test of the 5 needed to complete the challenge. It was pretty messy code but it helped me understand the problem better and realize that I had to go a different direction. I knew there had to be a simpler way. After a few minutes of thinking about the problem I realized that I could just solve the problem using some simple math.

#### The Solution

It came to me that if I subtracted the smallest number in the array for the largest number and added one I would get the number of statues that _should_ be in the array if it were consecutive. After that I could simply subtract the length of the nonconsecutive statues array to that. To get the maximum and minimum I used the Math javascript built in object. So in the end I ended up with a much cleaner and simpler answer.
```javascript
function makeArrayConsecutive2(statues) {

  return (Math.max(...statues) - Math.min(...statues) + 1) - statues.length

}
```
While this seems like a really simple problem it did give me a hard time at first. It was super fun and satisfying to finally see all the tests turn green. It was also nice to know that other users answers were really similar to mine. Thanks for reading and happy coding! 😎
Procrastination
Tags: productivity
Published: 2023-05-03 02:39:05

This month maybe is the worst condition of my work life balance. I wake up tired, after 5 PM my eyes will be heavy and have no interest of doing things. Feel so busy but in the other hand nothing on the to-do list was checked.

My tasks keep flying in my mind, but I just walking around it and avoid it by doing something else. I kept ask my future me to do the tasks. When I want to start doing it, my mind and body already tired and boom I just fell a slept. Repeat that for the next day.

I think I am just a lazy mf, until I watched a video from Matt D’Avella, “Why you always feel so mentally drained”.

{% embed https://www.youtube.com/watch?v=4EbItW7r3-s&embeds_euri=https://tonys.pro/&source_ve_path=MzY4NDIsMjg2NjY %}

We made +/- 35.000 decisions everyday. That’s a fuckin’ lot. That’s lead to decision fatigue. All tasks will be feel like so difficult to tackle, even a simple bug or changing font color will be feel so difficult. Too lazy to think about it. Even worst we don’t know what to do next, so we do nothing.

Decision avoidance can keep us stuck to in a state of analysis-paralysis and stop us from taking action on the important things.

Knowing what my problem is is the beginning. So I re-prioritize my day and try to reduce the number of decisions I have to make. I took too many side jobs at the same time, yeah I know, please don’t judge me. So I filtered them and try to say no to some of them.

A magic happened, my task that sat for several weeks on my to-do list was checked in just a few hours. The task actually not so difficult. Maybe the story point is just 5, I thought it was 34.

My mind is clearer now just like Saitama’s head.


![Saitama](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uilieecdv4088lc4jmf0.png)
What are JavaScript Cookies?
Tags: beginners, javascript, cookies, flatiron
Published: 2023-05-03 02:34:42


JavaScript cookies are small data files that a web server stores on a user's computer. They can be used to store data like user preferences, login details, and goods from shopping carts. In this article, we'll examine JavaScript cookies in more detail and give several usage examples.



**Cookie Creation:**

The document.cookie attribute in JavaScript can be used to create cookies. The following is the syntax for creating a cookie:


```
document.cookie = "cookieName=cookieValue; expires=cookieExpiryDate;
path=cookiePath";
```





- cookieName: The name of the cookie you want to create.

- cookieValue: The value you want to assign to the cookie.

- cookieExpiryDate: The cookie's expiration date and time (optional).

- cookiePath: The cookie's availability path (optional).

Let's take the example of wanting to build a cookie to remember a user's name. To accomplish this, set "username" as the cookieName and "username" as the cookieValue:

```
document.cookie = "username=Elyas";
```


**Reading a Cookie:**


The document.cookie property can be used to read a cookie in JavaScript. The cookie property of the document returns a string containing all of the cookies for the current document. This text can then be parsed to find the value of a specific cookie.


Assume you want to get the value of the "username" cookie we created earlier. This can be accomplished as follows:

```
let cookies = document.cookie.split(';');
for(let i=0; i < cookies.length; i++) {
  let cookie = cookies[i].trim();
  if (cookie.startsWith("username=")) {
    let username = cookie.substring("username=".length, cookie.length);
    console.log("Username is " + username);
  }
}
```



In this code, we use semicolons to separate the document.cookie string into individual cookies. Then we loop through each cookie and see if it begins with "username=". If it does, we extract the cookie value and log it to the console.



**Deleting a Cookie:**


To delete a cookie in JavaScript, change the cookie's expiry date to a date in the past. This will result in the cookie being erased.


Assume you want to get rid of the "username" cookie. You can accomplish this by doing the following:

```
document.cookie = "username=;
expires=Thu, 01 Jan 1990 00:00:00 UTC; path=/;";
```

We set the "username" cookie's value to an empty string, set the expiration date to a date in the past, and set the path to "/" to ensure that the cookie is erased from all pathways.


**Conclusion:**


JavaScript cookies are a valuable resource for web developers. They can be used to save user information, preferences, and goods from the shopping cart. Cookies allow you to deliver a personalized experience for your users while also improving the functionality of your website. In this blog, we demonstrated how cookies may be generated, read, and removed in JavaScript.
Simple Action: YAML Replacement
Tags: githubhack23, github, githubactions, javascript
Published: 2023-05-03 02:26:28

## What I built 

I build a GitHub Action called "YAML Replacement"  that allows you yto replace specific values in a YAML file.

### Category Submission: 

Wacky Wildcards

### App Link

[Repository](https://github.com/iisyos/yaml-replacement-action)
[Marketplace](https://github.com/marketplace/actions/yaml-replacement)

### Screenshots 

N/A

### Description 

When you want to update a file cached in the browser, you change the URL of the file, like this:

```html
<script src="production.min.js?ver=1"></script>
```
to
```html
<script src="production.min.js?ver=2"></script>
```
The tails of url is often managed in YAML file. So when you deploy application, you need update the phrase 1 to 2. This action update the phrase to current date formatted YYYYMMDDhhmm.

The version number at the end of the URL is often managed in a YAML file. So, when you deploy your application, you need to update the version number from 1 to 2. This action updates the version number to the current date formatted as YYYYMMDDhhmm.

### Link to Source Code 

You can find the source code for the YAML Replacement action on GitHub: https://github.com/iisyos/yaml-replacement-action

### Permissive License 

This action is released under the MIT License.

## Background (What made you decide to build this particular app? What inspired you?) 

I decided to build GitHub Action because I often encountered scenarios where I needed to update the version number in a YAML file when deploying applications for updating browser cached files or just maintaining versions. Manually updating the version number was time-consuming and error-prone, so I wanted to automate this process to improve efficiency and accuracy.

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?) 

I built the YAML Replacement action using JavaScript and the GitHub Actions framework. The action takes inputs such as the path to the YAML file, the target key of the value to be replaced, and an optional flag indicating whether the changes should be pushed.

During the execution of the action, it reads the YAML file, identifies the target key, and replaces the corresponding value with the current date formatted as YYYYMMDDhhmm. If the "need-push" flag is set to true, the action commits and pushes the changes to the repository.

Along the way, I gained a deeper understanding of GitHub Actions, because it was my first time building actions😉.



### Additional Resources/Info

N/A
Is GPT4 good for security checklists?
Tags: devops, security, gpt3, rails
Published: 2023-05-03 01:01:35

How good can be a security checklist generated by GTP-4?

I recently tested GPT-4 to see if it could generate a decent security checklist, so I made an app for that and I want to share my findings with you.

Check out the result for Ruby on Rails: https://checklist.devops.security/ruby-on-rails.pdf.

If you want to make your own, go to https://checklist.devops.security/

The good stuff
GPT4 can cover much more ground than GPT3 for security requirements. Now we can have security checklists much more specific than before and nicely grouped into sections. Compared to previously seen resources from industry standards, e.g., OWASP, I guess AI is helping us to step up.

The other side
GPT-4, like its predecessor GPT-3, isn't always 100% accurate or point to the latest libraries. Still better than what's out there. So, if you're using one of these checklists, it's still super important to have a human review it to make sure everything's on point.

And then there's the cost. GPT-4 API calls ain't cheap, especially when compared to GPT-3. So, if you're on a budget, this might not be the most practical solution. In the future things may change, though.

All in all, GPT-4-generated security checklists can be a handy resource, but make sure you double-check everything or ask someone to double-check for you.

Happy devsecops!
Dig Commands Cheat Sheet
Tags: devops, linux, domain, devjournal
Published: 2023-05-03 02:14:00

Dig is a powerful CLI tool for looking up DNS records and troubleshooting DNS issues. 

## The 20 Commands You Need To Know 


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


Thanks for reading this.

If you have an idea and want to build your product around it, schedule a call with [me](https://calendly.com/pragyanatvade).

If you want to learn more about DevOps and Backend space, [follow me](https://dev.to/pragyanatvade).

If you want to connect, reach out to me on [Twitter](https://twitter.com/pragyanatvade) and [LinkedIn](https://www.linkedin.com/in/pragyanatvade/).
Using Intl.NumberFormat to transform number notation
Tags: webdev, javascript
Published: 2023-05-03 02:04:19

## Problem

You want to transform thousand numbers into their compact version (1,000 -> 1k). 

## Solution

Use `Intl.NumberFormat` with the `compact` notation as option

```js
const formatter = new Intl.NumberFormat("en-US", { notation: "compact" });

const number = 12_000;

const formattedNumber = formatter.format(number) // -> will return '12k'
```

[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)
Day 92 of #100DaysOfCode: Displaying Matches and Working on Chat Feature
Tags: webdev, javascript, programming, react
Published: 2023-05-03 01:18:01

Day 92 of #100DaysOfCode

Hey everyone! I wanted to update you on my progress. Today, I continued working on the component that displays matches, regardless of the type of user who is signed in. It was a bit tricky, but I managed to make it work!

In addition to that, I spent some time improving the chat/messaging feature. I even created a brief demo video that I shared on my latest tweet. The UI may not be perfect yet, but I'm still happy with how far I've come, especially considering this is my first project.

Looking ahead, there are still plenty of features I want to add. I'm considering making the heart and undo buttons functional or improving the UI. But for now, I'm pleased with the progress I've made and the learning opportunities this project has provided.

Thanks for following along on my journey, and I hope you're all making progress on your coding challenges as well!
Large gap between opening a PR and submitted reviews...
Tags: codereviewvillains, programming, productivity, discuss
Published: 2023-05-03 00:57:33

We've noticed interesting trends...Tuesdays have the most code reviews.  Wednesdays have the most PRs created.  If we are supposed to get code reviewed fast, why is there such a large gap?  (Note that not everyone is opening PRs right when they start work on a new task)
How to Choose the Best Laptop for Your Needs?
Published: 2023-05-03 00:43:05

As the world becomes increasingly digitized, having a laptop that meets your needs is more important than ever. Whether you’re a student, a professional, a gamer, or simply someone who needs to stay connected, choosing the right laptop can make a huge difference in your daily life. But with so many options available, how do you choose the best laptop for your needs? In this article, we’ll walk you through everything you need to know to make an informed decision.

## How to Choose the Best Laptop for Your Needs?

### DETERMINE YOUR NEEDS
The first step in choosing the right laptop is to assess your needs and requirements. What will you primarily use your laptop for? Do you need a powerful processor for gaming or video editing? Or do you need a lightweight laptop for traveling? [Read more!](https://sharktune.com/how-to-choose-the-best-laptop-for-your-needs/)
Expanding My Skills: From HTML, CSS, and JS to Full-Stack Development
Tags: webdev, mern, react, node
Published: 2023-05-02 23:29:19

Exciting news!  I'm thrilled to announce that I'm taking my web development skills to the next level. While I already know the basics of how the web works and how websites are developed, I'm eager to dive deeper and learn more.

As I embark on this journey, I'd love to hear your thoughts and advice on the best ways to approach learning web development. I plan to explore a variety of technologies such as React, Angular and other front-end libraries to Django, Spring-Boot, Node.js and other backend technologies. I also plan to improve my design skills by learning and applying different web design principles and user experience design.

I'm prepared to take on this new experience and broaden my knowledge and talents, even though it might be difficult. If you have any tips, guidance or resources to share, I would greatly appreciate it. Follow me on this journey as I share my progress and insights along the way! Thankyou!
TCP ports and sockets
Published: 2023-05-02 23:12:08

Network services are run by listening to specific ports for incoming data requests. 

- Ports are represented by a single 16-bit number (65535 different port ids)
- Ports are split up by the IANA (Internet Assigned Numbers Authority) into three categories: System Ports (ports 1-1023), User Ports (ports 1024-49151), and Ephemeral (Dynamic) Ports (ports 59152-65535).
- A socket is a port that a TCP segment has activated to listen for data requests.
- Ports allow services to send data to your computer but can also send malware into a client program. It's important to secure your ports
Day 742 : The Deep
Tags: hiphop, code, coding, lifelongdev
Published: 2023-05-02 22:19:21

_liner notes_:
- Professional : Had a meeting with my manager to plan out the week. Went through some documentation to take note of where to do some updates for an upcoming new version. Filled out a form for a conference I was asked to speak at. Pretty chill day.

- Personal : Didn't do much coding last night. Basically paid my bills for the month, went through some tracks for the radio show and spent most of the night looking at land. I really got into the deep of researching a bunch of listings.

![Waterfall surrounded by gray stone walls and some small vegetation in Punchbowl Falls, AB Canada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3polsma84c1197c3ypuu.jpg)

Going to go through some more land listings. Also want to start implementing the View Transitions API x Prefetch x Preload experimentation into my side project. Probably go through some tracks for the radio show. I've been slacking on my anime watching also.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube o0K5zfsijHc %}
Setting up TailwindCSS + SASS with EmberJS
Tags: tailwindcss, ember, sass, scss
Published: 2023-05-02 22:09:11

Let's get started!

## Creating an EmberJS project
*See [https://guides.emberjs.com/release/getting-started/quick-start/](https://guides.emberjs.com/release/getting-started/quick-start/) for more information.*

If you haven't already, you can install the [Ember CLI](https://cli.emberjs.com/) using the following command:

```bash
npm install -g ember-cli
```

Then, create a fresh new Ember application:

```bash
ember new my-ember-app --lang en
```

Navigate into the directory of your new Ember app (`cd my-ember-app`) before running any of the commands in the next section.

## Adding TailwindCSS + SASS

First, let's begin by installing the necessary dependencies:

```bash
npm i -D ember-cli-postcss postcss-scss autoprefixer tailwindcss
```

Next, create your `tailwind.config.js` file in the root directory:

```bash
npx tailwind init
```

Update `module.exports` to reflect something like this:

```js
// tailwind.config.js

module.exports = {
    content: ["./app/**/*.{gjs,gts,hbs,html,js,ts}"],
    // ...
}
```

Add the following options to `ember-cli-build.js`:

```diff
// ember-cli-build.js

// ...

module.exports = function (defaults) {
    const app = new EmberApp(defaults, {
+       postcssOptions: {
+           compile: {
+               extension: "scss",
+               enabled: true,
+               parser: require("postcss-scss"),
+               plugins: [
+                   {
+                       module: require("autoprefixer"),
+                       options: {},
+                   },
+                   {
+                       module: require("tailwindcss"),
+                       options: {
+                           config: "./tailwind.config.js",
+                       },
+                   },
+               ],
+           },
+       },
    });

    return app.toTree();
};
```

Note that you will need to restart the server (run `npm start` again) to see changes after making edits to `ember-cli-build.js`.

Rename `app/styles/app.css` to `app/styles/app.scss`.

## Conclusion

And that's it! If you have any questions or comments, feel free to let me know.

If you would like to see the full code for this tutorial, check out [klickers/embertwscss](https://github.com/klickers/embertwscss).
I am getting a CORS error while accessing api in react
Published: 2023-05-02 21:24:37

Error- Access to fetch at 'http://......' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

The header already contains- Access-Control-Allow-Origin': '*'. I can see that in postman. still i am getting the above error. How do I solve this issue?
Why Pinia??
Tags: webdev, pinia, vue, frontend
Published: 2023-05-02 21:08:23

For Vue.js apps, Pinia is a state management library that has grown in popularity. The advantages of using Pinia over alternative state management libraries on the market will be covered in this post.

Pinia is first and foremost a simple-to-use and comprehended reactive store. Because it already updates whenever its data changes, the store is responsive. As a result, each time something in your application changes, you don't need to manually update the data in your store. This increases the effectiveness and maintainability of your code.

Utilizing Pinia has the added advantage of being easy and light. Pinia has a smaller footprint and requires less setup and configuration than competing state management libraries. Because of this, it's perfect for small- to medium-sized applications where you want to keep things straightforward.

Additionally, Pinia offers a robust collection of features that make it simple to manage complex states in your application. For instance, you may divide your business into smaller, easier-to-manage portions thanks to the built-in support for modules. This increases your application's overall efficiency and makes it simpler to maintain and test your code.

Pinia is also incredibly versatile and adaptable. By developing unique plugins or hooks, you can quickly modify them to match your unique requirements. As opposed to previous state management libraries, Pinia may now be customized to fit your unique use case.


![Pinia doc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sq0f0q86clrbo2xggrnx.jpg)

Pinia has a helpful community and excellent documentation as well. Even if you are unfamiliar with Vue.js, Pinia's documentation is straightforward, short, and simple to understand, making it simple to get started. The community is also lively and supportive, so you can always find assistance and support when you need it.

For teams looking to work together on a Vue.js project, Pinia is a fantastic option. It is simple to comprehend, and the store's modular architecture enables various team members to concentrate on different areas of the business without infringing on each other's rights. This may be especially useful for bigger projects if several people are contributing to the same codebase.

Therefore, Pinia is a fantastic option for state management in Vue.js applications. With a variety of features that make it simple to manage complicated states, it is straightforward, light, and strong. A helpful community and excellent documentation make it even easier to get started and receive assistance when you need it. Pinia is unquestionably a library to think about if you're searching for a state management solution for your Vue.js application.