teleren/devto huggingface dataset:
How to convert each character in the string to an array using the Object.assign() method in JavaScript?
Tags: javascript
Published: 2021-07-09 00:00:00

---
  title: How to convert each character in the string to an array using the Object.assign() method in JavaScript?
  published: true
  tags: JavaScript
  date: Fri Jul 09 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/convert-each-characters-in-string-to-array-using-object-assign-method-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-eabb5b1be98cd013a7d88b8e1f0aacba.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/convert-each-characters-in-string-to-array-using-object-assign-method-javascript)
  
To convert each character in a string into an array, we can use the `assign()` method from the global `Object` object in JavaScript.

Consider a string called `Hello!` like this,

```js
// random string
const str = "Hello!";
```

Now to convert each character in this string into an array, let's use the `Object.assign()` method and

- pass an empty array `[]` as the first argument to the method
- and the string as the second argument to the method
- the method returns a new array.

It can be done like this,

```js
// random string
const str = "Hello!";

// convert each characters in string to array
const strArr = Object.assign([], str);

console.log(strArr); // ["H", "e", "l", "l", "o", "!"]
```

Now if you look at the output of the `strArr`, we can see that the string is successfully converted to an array.

See the above code live in [JSBin](https://jsbin.com/napajoliva/2/edit?js,console).

That's all 😃!

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

---
Using String.Replace() with RegEx
Tags: replace, javascript, strings
Published: 2021-07-08 23:10:11

The `replace()` method is often used in JavaScript to replace parts of a string. You may have been using it as follows:

```js
const str = 'I like cats'
const newStr = str.replace('I', 'We')
console.log(newStr)
//We like cats
```

As you can see, the method basically accepts two parameters: the string to be replaced and the replacement.

In reality, that's actually a little more complicated. The first parameter accepts two options:

1. A string to be replaced, as mentioned above
2. A RegEx object or literal. The match will be replaced with the second parameter

The second parameter also accepts two options:

1. The replacement string
2. A function that will be invoked to create the replacement string

In most real-world cases you will be looking for patterns instead of fixed strings, so using a RegEx as the first parameter will be the solution to our problems.

## Using Regex with replace()

Let's start with an example and then explain how it works:

```js
const reg = / \((.*?)\)/
const str = 'The quick brown (some unwanted string) fox jumps over the (another unwanted string) lazy dog.'
const newStr = str.replace(reg, '')
console.log(newStr)
//The quick brown fox jumps over the (another unwanted string) lazy dog.
```

So what's happening? Well, in our case, anything between parenthesis (including the parenthesis) will match with our RegEx, so the `replace()` method will replace that with our replacement string `''`.

There's still one flaw with our code. It's just replacing the first match, so in the case that we want to replace everything that matches our RegEx, we would just have to use the `g` flag in our RegEx:

```js
const reg = / \((.*?)\)/g //<-- notice the flag
const str = 'The quick brown (some unwanted string) fox jumps over the (another unwanted string) lazy dog.'
const newStr = str.replace(reg, '')
console.log(newStr)
//The quick brown fox jumps over the lazy dog.
```

## Wrapping Up
RegEx is a POWERFUL tool and it makes replacing strings in JavaScript a more effective task, to say the least.

---

This article was first published on [devcore.io](https://devcore.io/en/javascript/using-string-replace-with-regex/). go check it out!
Things you must know about MVC architecture
Tags: mobile, webdev, mvc, design
Published: 2021-07-08 23:03:25

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

MVC is an architectural pattern which has three parts Model, View and Controller.it was used for desktop graphical user interfaces but nowadays is used in designing mobile and web apps.

This architectural pattern was invented by Trgve Reenskaug and in that time it was called "Thing Model View Editor" but rapidly change it to "Model View Controller".The goal was Trygve Reenskaug was to solve the problem of users controlling a large and complex data set.Currently MVC is used for designing web applications.some web frameworks that use MVC concept: Ruby on Rails, Laravel, Zend framework, CherryPy, Symphony, etc.

In this architectural pattern there are three main components and each of them has specific responsibilities,

-Model
Model is responsible for maintaining data.The model is connected to the database so anything you do with data , adding or retrieving data is done in the model component.It responds to the controller requests because the controller never talks to the database by itself.The model talks to the database back and forth an then it gives the needed data to the controller.
Note:The model never communicated with the view directly.

-View
It actually user interface.Data representation is by the View.

-Controller
Controller is the main part of these three components because controller is the component that enables the interconnection between the View and Model it act as an intermediary.The controller doesn't have to worry about worry about handling data logic,it just tells the model to what to do.
Note:View and Model can't talk directly.
How to use Lodash debounce method?
Tags: debounce, lodash, javascript
Published: 2021-07-08 23:01:29

Recently I was applying for a react developer position at some company. In the process, I had to solve three tasks, which, surprisingly, were not so hard as people implied in some reviews I read.

For a React dev position, in almost every interview you may take for any company, you will be asked to fetch data from an API and use it somehow, which was no exception on this occasion.

The catch for me was that I was required to use the `debounce()` method from the lodash library, and to be honest, I’ve heard of the library, but I’ve never used it before.

Let me tell you what I learned from this interview.

## What is lodash?

So, basically, lodash is a utility library that simplifies common programming tasks and gives us more capabilities when executing them.

I would love to give you a lot of examples but let me save that for future articles.

## What is a debounced function?

A debounced function is a function that delays its execution a certain amount of milliseconds after the last call was received.

Let’s separate the three types of functions involved in this:

1. Your normal function: this is the function that you want to debounce
2. The debounced function: your same function but debounced, which means that it will work as the definition above says.
3. The debounce function: a function that will receive two parameters, a function to debounce and some time in milliseconds. This function will return the debounced function.

Lodash debounce() method is that debounce function mentioned in point 3.

Let’s see it with a simple example:

```js
const logHi = () => console.log('Hi')

const debouncedLogHi = _.debounce(logHi, 1500)

debouncedLogHi()
debouncedLogHi()
debouncedLogHi()

//console: Hi
```

In this case, the timer will start running from the last call of the `debouncedLogHi()` function. After 1500 milliseconds, the function will run.

Passing parameters to a debounced function
You can also pass parameters to a debounced function:

```js
const logMessage = message => console.log(message)

const debouncedLogMessage = _.debounce(logMessage, 1500)

debouncedLogMessage('first message')
debouncedLogMessage('second message')
debouncedLogMessage('third message')

//console: third message
```

As you can see, once the timer ends after the last call to the debounced function, the invoked function will be the last.

## Wrapping Up
So yeah, lodash is awesome, and I'll definitely write more about it in the future. Subscribe to my newsletter if you want to be posted about future posts.

---

This article was first published on [devcore.io](https://devcore.io/en/javascript/how-to-use-lodash-debounce-method/). go check it out!
Writing code block highlighting to a CSS file with Rouge.
Tags: rouge, ruby, bridgetown, css
Published: 2021-07-08 22:41:45

## Purpose

To remind myself how to do this again in the future.

## How to do it?

To append a Rouge theme to an existing file you can do the following:

```rb
gem install rouge
irb

require "rouge"
theme = Rouge::Themes::Github.new.render
File.open("<path-to-file>", "a+") { |f| f.write(theme) }
```

## All themes

https://github.com/rouge-ruby/rouge/tree/master/lib/rouge/themes
Laravel package for every project
Tags: php, laravel
Published: 2021-07-08 22:31:43

## Here a list of packages that I use/suggest for every Laravel project:

### Laravel Ide Helper

```php
composer require --dev barryvdh/laravel-ide-helper
```

### Laravel Debugbar

```php
composer require barryvdh/laravel-debugbar --dev
```

### Laravel Jetstream (Teams feature is very useful but not mandatory for all the projects)

```php
composer require laravel/jetstream
php artisan jetstream:install inertia --teams
npm install
npm run dev
php artisan migrate
```

### Laravel Query Builder

```php
composer require spatie/laravel-query-builder
```

### PHP Code Standards Fixer

```php
$ composer global require friendsofphp/php-cs-fixer
vendor/bin/php-cs-fixer fix
```

### PHP Insights

```php
composer require nunomaduro/phpinsights --dev
php artisan vendor:publish --provider="NunoMaduro\PhpInsights\Application\Adapters\Laravel\InsightsServiceProvider"
php artisan insights
```

### Ray

```php
composer require spatie/laravel-ray --dev
php artisan ray:publish-config
```

### Laravel Macro IDE

Add the package as a dev dependency

```json
"tutorigo/laravel-ide-macros": "*"
```

On terminal

```
php artisan vendor:publish --provider="Tutorigo\LaravelMacroHelper\IdeMacrosServiceProvider"
php artisan ide-helper:macros
```

Those are the most useful packages to work on almost every project.

If you like to use PHPInsights or PHP-CS-Fixer there is a reading list about <a href="https://dev.to/arielmejiadev/series/13049" target="_blank">"Laravel profesional setup"</a> that would guide you to customize this packages behavior with a lot of detail.

Thanks for reading
Day 404 : Hurricane
Tags: hiphop, code, coding, lifelongdev
Published: 2021-07-08 22:26:55

_liner notes_:
- Professional : Not a bad day. Started off kind of slow with a couple of meetings. Once those were over, I was able to get some work done. Had a horrible time with logging into that social media site from yesterday. Apparently by me just logging in and creating a test group page some how may have got against their community guidelines and I had a notification on the page and couldn't do anything. It asked me to verify my account so all it did was send a code to my phone and I had to type it in. i don't know. Can't wait to finish up this integration so I can go back to not using it again. haha. Made some updates to a blog post I'm writing. Put together a nice to have list of functionalities for a new project I'll be helping out with. Not too bad of a day.

- Personal : So, I was able to get a picture and not a black screen for the thumbnail of the video. There's still 2 seconds of black in the beginning of the clip I'm using to take the thumbnail from, not sure why, I'll have to look into it. Also, I decided to add an ending screen to the highlight videos users can make. For some reason, the ending clip is show in the beginning and end of the highlight video. Need to figure out why. Also, with the same API, I did manage to figure out why I was having issues when I switched from the testing API key to the production API key. The endpoint to send the information is different. I only found that out in an email that was sent to me late last year when I first signed up that I was going to reply to asking what was happening. haha They should probably have it on the site somewhere. Maybe i missed it. As long as I got it working. I was also able to figure out the endpoint to call to retrieve all the videos that have thumbnails so I can show them on the videos archive page that a user can click to see the actual video. I'm going to need to have a section on the dashboard where I'll be able to view, edit and delete archived videos and add thumbnails to older videos. I also went through tracks for the radio show and watched the latest episode of "Loki".

![View from inside an ice cave in Baden, Switzerland looking out into the night sky full of stars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7uo5e6kunoc3psnfj0nn.jpg)

Going to see if I can get those weird issues I ran into worked out. Can't believe it's already Thursday! Going to go through more tracks for this week's radio show and some articles for the Sunday show. Think that's it. Oh and it looks like the Hurricane or whatever missed us. Just some rain and wind. Thank goodness.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube FqNYLe3_7d0 %}
Running our of memory when running `react-scripts build` on bitbucket pipline

Tags: react
Published: 2021-07-08 22:07:11

Running our of memory when running `react-scripts build` on bitbucket pipline even with size=2 and a 3070MBx2 memory allocated = that means a little over 6gb of memory and its still not enough to build the script.

**So far i've tried the following:**
    
- added `max_old_space_size=6000` to build script (`react-scripts --max_old_space_size=6000 build`)
- adding `"resolutions": { "eslint-webpack-plugin": "2.3.0"}` to my package.json(https://github.com/facebook/create-react-app/issues/10119#issuecomment-734184155)
- added ` "devDependencies": { "@babel/core": "^7.7.7",`  to my package.json(https://github.com/facebook/create-react-app/issues/8096#issuecomment-571717268)

So far the only thing that worked was either removing big packages or adding: `cross-env GENERATE_SOURCEMAP=false ` to my run script. which is not ideal because I want source maps.

**Logs from bitbucket**
```
> react-scripts --max_old_space_size=6000 build
Creating an optimized production build...
The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! xxxxxx0.1.0 build: `react-scripts --max_old_space_size=6000 build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the xxxxxx0.1.0 @0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-07-08T17_05_53_040Z-debug.log
The command '/bin/sh -c npm run build' returned a non-zero code: 1
2021-07-08T17:05:53.326849634Z stdout P 
```

Would love some help.
🎬Amazing Hover Effect On Social Media Buttons | HTML & CSS✨
Tags: html, css, webdev, beginners
Published: 2021-07-08 21:44:58

Hey DEVs in today's episode we’re going to create “Amazing Hover Effect On Social Media Buttons | HTML & CSS”. Let’s do it step-by-step, buy the end of this tutorial you will know how to make it on your own.

---

Live Version 👀:
https://bit.ly/3hnDAHZ

---

{% youtube E8r3f4HhuPI %}

---

🧠 Concepts covered in this project:
* CSS - pseudo-class 
* CSS - Positions Absolute & Relative 
* CSS - Hover Effects

---
Execuion context, Event Loop, callback queue
Published: 2021-07-07 16:49:36

# Explained Async JS in 4min read. ( callback queue & Event Loop )



Post is distributed in 3 parts->

1. Execution Context

2. callback Queue

3. Event Loop



example :
```js
function hireMe(){
  console.log(`you are hired`);
}

setTimeout(hireMe, 0)

console.log(`Me First!`)
```

(1) **execution context**

- As execution starts it will declare a placeholder for hireMe in a global execution context and will store the function definition in it...



- As it reaches to setTimeout, it will create a timer in the browser with the given amount of time.



- Remember as we invoke a function first it goes to call stack then its execution context is created and it gets destroyed as the function returns something.



The interesting things start from here

(2). **Callback queue - let's understand how it works**



- So what setTimeout will do is, it will add the hireMe function in the callback queue as the timer finishes, which is specifically made for async calls.



- Note the function will not be added directly to the call stack as the timer finishes.



- callback queue is specifically made for Asynchronous calls



- It doesn't matter what time you have specified in setTimeout



(3). **Event Loop**



Now comes the `Event Loop`, which checks the call stack if it's empty or not. If nothing is inside the call stack then the function from the callback queue gets pushed in the call stack.



- `Event Loop` is an infinite loop which is consistently checking the call stack if it is empty or not.



- From what we have seen till We can say, functions that are in the `callback` queue need to wait until the whole Global execution gets finished and whether the call stack is empty or not...



- so you can also have millions of `console.logs()` in the global context and they all will run before the `hireMe()`




There is one more thing called Microtask queue i will explain it in next post ♥
JOKER123
Tags: joker123
Published: 2021-07-08 21:17:37

Joker123, http://68.65.123.39/joker123/, joker123 download, login joker123, joker123 login, joker123 net, agen joker123 terpercaya, joker123 casino, link alternatif joker123, joker123 deposit pulsa, joker123 slot, download joker123, agen joker123, tembak ikan joker123, joker123 apk, joker123 online, game joker123, agen slot joker123, judi joker123, joker123 deposit pulsa 10rb, slot joker123, download aplikasi joker123, joker123 apk download, daftar joker123, judi tembak ikan joker123, joker123 gaming, joker123 pulsa, joker123 deposit, deposit joker123, joker123 deposit pulsa tanpa potongan, joker123.net, joker123 terbaru, joker123 mobile, apk joker123, situs joker123, link login joker123, link joker123, cara daftar joker123, live chat joker123, download apk joker123, joker123 pc download, joker123 download apk, download joker123 apk, download slot joker123, joker123.com, joker123 download pc, super joker123, main joker123, www joker123, joker123\, aplikasi joker123, joker123 download apk joker123 android, joker123 terpercaya, slot joker123 online. #joker123
Wault: The future of password managers
Tags: showdev, nextjs, typescript, security
Published: 2021-07-08 21:05:03

Password managers are becoming more common these days as we are using an increasing number of sites each day. I have used several password managers for about 4 years, but I've never found the one that fits me. Everyone had some major flaws like it felt outdated or it was too expensive. Then it hit me... why shouldn't I create the next Facebook of password storage?

### What were the main goals of the project?

**1. The app must have a generous free tier.** I wanted a personal plan, where you can store your passwords safely across multiple devices without hassle.

**2. The app must feel new and responsive.** When I used Lastpass and Bitwarden I felt like I was using a slightly outdated piece of software. I think the best and easiest way to achieve this is by 

**3. Be open-source.** I think this one is obvious. If you make an application open source, then it means that there is nothing to hide.


### How can this app compete? What can it give to users, that other managers can't?

**1. The password manager without passwords.** The most common security threat for an application is user exploitation. You can easily create a clone of the original website and start phishing for passwords. But when you have no you don't have a way to gain access to a user's account.

**2. Free for the people, paid for organizations.** I have been using WinRAR and I love the idea behind it. My take on this idea is to give the free plan the ability to create **2 people** teams (I haven't seen any other password manager do this) and when you want to add more users, then you must pay for the excess number of people. 

**3. The ability to store crypto wallets.** I must admit: the crypto hype train got me too, but when you consider it, then it will look like a good idea. You can store crypto wallets in the application, check your balance, send and receive money. It is easy to implement and also it is unique for this application.

**4. Rich customization for secure notes.** I have been using Google Keep through my entire high school years, so I got used to it. But when I want to write a note in my Bitwarden Vault, I cannot format my text, nor can I create a checklist, so it is not convenient enough for everyday use.

**5. Zero trackings.** A password manager must be a private space. You don't want to be tracked when you are managing confidential information. 

### Want to help?

The project is already in a very early stage of development (as the application is only good enough to log in on the web interface), but any contribution is welcome.

Github organization: [github.com/wault-app](https://github.com/wault-app)
Discord: [discord.gg/NxhdAf4azz](https://discord.gg/NxhdAf4azz)