teleren/devto huggingface dataset:
Code Smell 86 - Mutable Const Arrays
Tags: javascript, oop, programming, codenewbie
Published: 2021-08-25 03:25:12

*Const declares something to be constant. Can it mutate?*

> TL;DR: Don't rely on languages cheating about directives.

# Problems

- Unexpected side effects.

- Accidental complexity.

# Solutions

1. Use better languages

2. Use [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/03563ad0268ac240336fcab195f8da29)
```javascript
const array = [1, 2];

array.push(3)

//array => [1, 2, 3]
//Wasn't it constant ?
//constant != immutable ?
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/c1610a6305aa2a1f3b9add686652d0b7)
```javascript
const array = [1, 2];

const newArray = [...array,3 ]

//array => [1, 2] Didn't mutate
//newArray = [1, 2, 3]
```

# Detection

Since this is a "language feature", we can explicitly forbid it.

# Tags

- Mutability

- JavaScript

# Conclusion

We should always favour immutability on our designs and take extra care with side effects.

# More Info

- [The evil power of mutants](https://dev.to/mcsee/the-evil-powers-of-mutants-1noo)

# Credits

Photo by <a href="https://unsplash.com/@justzorik">Zorik D</a> on <a href="https://unsplash.com/s/photos/zombie">Unsplash</a>  

Thank you, @oliverjumpertz for this tip.

{% twitter 1430154471921922049 %}

* * *

> Correctness is clearly the prime quality. If a system does not do what it is supposed to do, then everything else about it matters little.

_Bertrand Meyer_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
🧩 State Management in Svelte Applications
Published: 2021-08-24 16:36:12

### 📙 A tutorial on how to use the Svelte state management store to manage state in Svelte applications

### <br>

**TL;DR:** As a Front-end developer, one of the most crucial skills to possess is how to manage state in your applications. The ability to synchronize application state with data changes and manage shared state amongst different components is a strong requirement in building modern frontend applications. Several state management libraries have been developed with certain frameworks having a de-facto state management library that they naturally work well with (e.g., [Redux](https://redux.js.org/) for [Reactjs](https://reactjs.org/)).

In this tutorial, you will learn how to perform state management in [Svelte](https://svelte.dev/) applications using Svelte's built-in state management [Stores](https://svelte.dev/tutorial/writable-stores).

## What We'll Build

In this tutorial, you will be implementing state management in a shopping cart built with Svelte. You will begin with a pre-built e-commerce application that sells different types of wares. However, this application is not yet complete, as its shopping features for adding products to the cart and managing cart items have not been implemented. Using the Svelte store, you will be adding the following features to the application:

- Load the products from a central state store
- Add items to the shopping cart
- Display items added to the shopping cart
- Calculate the total price of items in the cart
- Increase and decrease the quantity of the items in the cart
- Remove items from the cart

## Prerequisites

There are a few requirements to follow along with this exercise:

- [Node.js](https://nodejs.org) installed on your system. You can visit the website and install a suitable version for your operating system [here](https://nodejs.org/).
- Basic knowledge of [Svelte](https://svelte.dev) and using [Svelte components](https://svelte.dev/tutorial/nested-components).

With all these in place, you can proceed with the exercise.


[Read more...](https://auth0.com/blog/state-management-in-svelte-applications/?utm_source=content_synd&utm_medium=sc&utm_campaign=svelte)
How to install rasa in linux server via Putty
Published: 2021-08-25 03:00:20

In the linux server:
   - Python 3.8 was installed
This is what I have done to install rasa in linux via Putty:
  - sudo apt update
  - sudo apt install python3-dev python3-pip
  - mkdir rasabot-facebook
  - cd rasabot-facebook/
  - python3 -m venv ./venv


The virtual environment was not created successfully because ensurepip is not
available.  On Debian/Ubuntu systems, you need to install the python3-venv
package using the following command.

    apt install python3.8-venv

You may need to use sudo with that command.  After installing the python3-venv
package, recreate your virtual environment.

Failing command: ['/home/ubuntu/rasabot-facebook/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']

- sudo apt install python3.8-venv
- again:
  python3 -m venv ./venv
- source ./venv/bin/activate
- pip3 install -U pip
- pip3 install rasa

and then : rasa -h
but there is error : 
    rasa: command not found

please help me with this problem
Update <input> input value via synthetic `Event`
Tags: javascript
Published: 2021-08-25 02:34:45

---
title: Update <input> input value via synthetic `Event`
published: true
description: How do we cause the value of an input element to change using synthetic JS events?
tags: javascript
---

Given any `<input type="text" />` element, is it possible to trigger the value to change using only synthetic event objects and calling `dispatchEvent` directly on the input element?

For example, using only vanilla JS, the following results in nothing changing:
```javascript
const event = new KeyboardEvent('keydown', {
  key: 'e',
  code: 'KeyE',
  keyCode: 69,
});

// doesn't work, nothing changes
document.getElementById('my-input').dispatchEvent(event);
```

UPDATE:
Even if we capture a native KeyboardEvent and store a reference to it, passing it into `dispatchEvent` still causes no change to the value.
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 30
Tags: php, javascript, webdev, tutorial
Published: 2021-08-25 02:31:50

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will be creating logout functionalities

{% youtube RDiQ5Bid3Wo %}

In this video,we will be creating menu for admin Dashboard

{% youtube hgNwYLrvT60 %}



If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Apa itu WA RTE CTE dan TLE 
Published: 2021-08-25 00:35:17

Ketika submit solusi kita di platform competitve programming kita pasti disuguhkan istilah-istilah memusingkan tersebut, tapi apakah artinya singkatan tersebut?

## WA: Wrong Answer
Keadaan jika solusi kalian mendapatkan output yang berbeda dengan yang diharapkan oleh soal dan tidak lolos test case.

## RTE: Run Time Error
Kondisi error ketika program sedang dalan runtime, contohnya ketika program kita membagi bilangan dengan 0.

## CTE: Compile Time Error
Kondisi error ketika program kita menyalahi aturan dari bahasa pemrograman, contohnya ketika kurang titik koma(;)

## TLE: Time Limit Exceed
Kondisi ketika program terlalu lama, biasannya terjadi karena algoritma yang tidak efisien atau ketika menggunakan bahasa pemrograman *uhuk* ular.
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2021-08-25 00:25:52

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 


## "Interview Often"

Thanks to @molly for this insightful post about the value of being well-prepared for your next interview — and how exactly to accomplish that. 

{% link https://dev.to/molly/setting-yourself-up-for-interview-success-15b7 %}

## The road to being a developer is paved with mystery — but it shouldn't be! 

@ruppysuppy is here to demystify the oftentimes winding road of becoming a developer. Thanks for these signposts, Tapajyoti!

{% link https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf %}


## "#1. No one can stop you when you master the basics."

Thanks to @tyaga001 for this veritable treasure trove of learnings from over a decade in software development. Solid gold!

{% link https://dev.to/tyaga001/top-9-lessons-learned-in-12-years-as-a-software-developer-4o9h %}

## 1 app, 5 ways.

I can't get over how _good_ this idea is, @sammyshear. Thanks for sharing your learnings of building the same app five different ways! More of this!

{% link https://dev.to/sammyshear/building-the-same-app-5-times-5d8l %}

## Defense against the dark arts

... of cybersecurity threats! Thanks for sharing your thoughts on how to defend against these attacks and how to secure our online experience, @ms_74   

{% link https://dev.to/ms_74/authentication-vulnerabilities-15po %}

## Show-and-Tell: App Store Edition 

Huge props to @patrickweb for building their own store for ElectronJS apps. Appreciate the showcase on DEV!

{% link https://dev.to/patrickweb/i-made-an-app-store-283m %}

## Journey to the Center of Vim 🔥 

@phantas0s describes their series on Vim as a look "inside the Vim caves, helping you discover the finest diamonds." Sounds _pretty_ compelling to me! In this installment, you'll get a glimpse at some Vim "treasures for the mind" — specifically for those more advanced with Vim. 

{% link https://dev.to/phantas0s/a-vim-guide-for-veteran-users-3p50 %}



_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
How to get the hash value from the browser URL using JavaScript?
Tags: javascript
Published: 2021-08-25 00:00:00

---
  title: How to get the hash value from the browser URL using JavaScript?
  published: true
  tags: JavaScript
  date: Wed Aug 25 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-hash-value-from-browser-url-using-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-9ab5a4d7a0f73c1765b1631e323a907f.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-hash-value-from-browser-url-using-javascript)
  
To get the hash value from the browser URL, you can use the `location.hash` property from the global `window` object using JavaScript.

For example, let's say we have a URL called `https://mywebsite.com#portfolio` in the browser.

As you can see that after the `.com` there is a string after the `#` symbol (hash symbol). To get that value from the browser URL we can use the `window.location.hash` property in JavaScript.

It can be done like this,

```js
// Get the hash value from the browser URL
const hashValue = window.location.hash;

console.log(hashValue); // #portfolio
```

- The property returns the `hash` value with the hash symbol as its prefix.

See the above code live in this [codesandbox](https://codesandbox.io/s/get-hash-value-from-browser-url-using-javascript-gwbem?file=/index.js).

That's all 😃!

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

---
DevOps doesn't mean you can't specialize
Tags: devops, frontend, backend, specialization
Published: 2021-08-27 11:46:19

---
title: DevOps doesn't mean you can't specialize
published: true
date: 2021-08-25 00:00:00 UTC
tags: DevOps,frontend,backend,specialization
canonical_url: https://jhall.io/archive/2021/08/25/devops-doesnt-mean-you-cant-specialize/
---

“We don’t want to do DevOps, because we aren’t interested in becoming full-stack developers and learning Kubernetes.”

Have you ever heard (or felt) this?

It’s sadly a common misconception about DevOps.

![](https://jhall.io/archive/images/clones.jpg)

But DevOps doesn’t mean everyone on the team has to behave like clones, with the same Dev and Ops responsibilities, let alone frontend, backend, UX design, and QA testing responsibilities.

DevOps simply means that Dev and Ops (and everyone else) have a common goal, rather than being set up as opposing each other. [DevOps means cooperation](https://jhall.io/archive/2021/02/11/devops-is-just-cooperation/).

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
A very simple introduction to Functional Programming
Tags: functional, javascript, lodash
Published: 2021-08-24 23:54:33

---
title: A very simple introduction to Functional Programming 
published: true
description: A brief introduction to Functional Programming
tags: functional, javascript, lodash
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ziw308sl6syhg9kpt5n.jpg
---

If you’ve heard the "buzzwords" _Functional Programming_ (FP), _composition_, _point free_, etc, and you were completely lost… you’re NOT alone. Here’s a sneak peak of the things you can do if you compose things and follow a functional and point free style of programming.

```js
const _ = require('lodash/fp')

const lines = [
  {
    name: "We're the eggmen",
    order: 2,
  },
  {
    name: "I'm the eggman",
    order: 1
  },
  {
    name: "I'm the walrus",
    order: 3
  }
]

function main(lines) {
  // generateSelectObject :: Object -> Object
  const generateSelectObject = ({ name, order }) => ({
    value: `${name}_${order},
    label: name,
  })

  const sortAndMapLines = _.compose(
    _.map(generateSelectObject),
    _.sortBy(['order'])
  )

  const orderedLines = sortAndMapLines(lines)

  orderedLines.unshift({
    label: 'All lines',
    value: 'All lines'
  })

  return orderedLines
}

const res = main(lines)
console.log(res)
```

I’ll argue that the most interesting part of this boring code is this one:

```js
const sortAndMapLines = _.compose(
  _.map(generateSelectObject),
  _.sortBy(['order'])
)
```

This is what *FP* is all about, you define the steps you need in order to achieve something, in this case the sorted and then mapped results of `lines`. Notice we’re composing two functions there, the `sort` and the `map` from [Lodash](https://github.com/lodash/lodash/wiki/FP-Guide) and it’s *point free* because neither function declares explicitly with what data they will work with.

Hopefully this rambling is helpful and it will whet your appetite to search for better ways to do your work and improve the overall quality of our code. A very good place to start with is Prof. Frisby's [Mostly Adequate Guide to Functional Programming](https://mostly-adequate.gitbook.io/mostly-adequate-guide/) which I very much recommend.
How to create sticky headers and footers with CSS
Tags: html, css, webdev
Published: 2021-08-24 23:50:29

CSS offers a native way to create headers and footers that fix at the top (or at the bottom) of the screen.

Both ways, your elements have to be placed like this:

```html
<div id="container">
  <header>...</header>
  ...
  <footer>...</footer>
</div>
```

Where the `#container` element is the one that users will scroll by. In other words, your header or footer will not be sticky to the screen if it has another element surrounding them.

At your CSS, you will just have to do this:

```css
header {
  position: sticky;
  top: 0;
}

footer {
  position: sticky;
  bottom: 0;
}
```

Result:


{% codepen https://codepen.io/juanbelieni/pen/bGRNEbp %}
Live stream: Best Practices using Adobe PDF Services SDK
Tags: node, podcast, cloudnative
Published: 2021-08-24 23:28:30

Join us for Papercuts LIVE at 9:00AM PST on Wednesday, August 24th 2021, our monthly livestream to learn how you can get the most out of Adobe Document Services APIs. The main topic of this month will be tips and best practices for using Adobe PDF Services SDK. Come join to learn, ask any of your questions with our live experts, or just stop by to say hi.
[View here](https://www.linkedin.com/events/papercutslive-bestpracticesusin6833136298669293568/about/)
Ever used Hash Maps to pass headers in the API requests.❓
Tags: httpclient, java, automation, testing
Published: 2021-08-24 22:47:35

Well, this article is your opportunity to do so 😃

https://medium.com/@prathore28647/apis-and-http-client-get-call-with-headers-c150982eaa8f

Please provide the necessary feedback in case of missing information and, don't forget to hit the clap👏 on the go.

Prost 🍻
Poor man's file watcher
Tags: ruby, linux
Published: 2021-08-24 22:35:42

[Image source](https://unsplash.com/photos/L9EV3OogLh0)

Suppose you want to perform a certain action each time one or more files change, for example running a spec each time they're updated.

You should definitely use something more polished like [Guard](https://github.com/guard/guard) but you could also experiment with a "simpler" approach.

First of all create the Ruby script `check_event.rb`:


```ruby
# frozen_string_literal: true

last_mod = Time.now
loop do
  path_parts = gets.split
  path = "#{path_parts[0]}#{path_parts[2]}"
  next unless path.include?('_spec.rb')
  
  now = Time.now
  # Debounce: skip if another event has been notified less than a second ago.
  next if now - last_mod < 1

  last_mod = now
  puts `rspec "#{path}"`
end
```

Make sure the command `inotifywait` is installed:

```shell
sudo apt install inotify-tools
```

And then you can combine `inotifywait` with our Ruby script:

```shell
inotifywait --monitor --event modify --recursive ./spec | ruby check_event.rb
```

Note: I added a debounce in the Ruby script. This is because a _modify_ event is called twice upon file save (tested with Vim on Ubuntu).
Angular Bundle Size Optimization
Published: 2021-08-24 21:56:45

Application optimization is important in enabling fast load time in your application. This could be achieved with the following steps

1. gzipper
gzipper is an NPM package which provides a CLI for compressing files using the popular compress algorithms like Brotli and Gzip. Also this module works great with many CLI UI tools (Angular CLI, Vue CLI, create-react-app) and supports few option flags for each algorithm.
I. Install zipper as a Dev Dependency to your project.

```npm i -D gzipper```
2.Build your project with --prod, --aot, and --build-optimizer flags. If you are not familiarized with --build-optimizer, it enables ‘@angular-devkit/build-optimizer’ optimizations when using the ‘aot’ option.

```ng build --prod --aot --build-optimizer ```

3.Lazyloading 

Separating modules into different chucks and using the right preloading strategies to load a module.

4.Angular Universal
   A technology that renders Angular applications on the server.
A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

Thanks for reading
7 Segment Display using PHP
Published: 2021-08-24 21:42:14

Using seven segment display, you can write down any digit from 0 to 9 using at most seven segments. You will be given a positive number N and then a number of N digits. You have to rearrange the segments in this N digit number to get the smallest possible N digit number. This number can have leading zeros. You can not waste any segment or add any segment from your own. You have to use all of the segments of the given N digits.

Input:
First line of input consist of a single integer T denoting the total number of test case. Then T test cases follow. Each test case consists of two lines. The first line consists of N. The second line consists of an N digit number.

Output:
For each test case, print the smallest possible N digit number in a new line which can be made using all of the segments given.


Constraints:
1<=T<=400
1<=N<=10^4


Example:
Input:
2
6
234567
3
011

Output:
000011
011

Explanation:
First Test Case
234567 has a total of 28 segments and we can rearrange them to form 000011 which has 28 segments too. 000011 is the smallest possible number which can be formed on rearrangement.
Second Test Case 
011 has a total of 10 segments and this is the smallest number with 10 segments.
#100daysofcode [Day - 03]
Tags: html, css, javascript, bootstrap
Published: 2021-08-24 21:29:05

Hey Guys This is the third day of my 100 days coding challenge, and today i make a site where you can generate pin as well as you can type the input . if the pin and the input you you will be write if they matched then it will shows a message of success if it didn't matched then it will show a message of error ! 

Here is the code link : https://github.com/thekawsarhossain/100-days-of-code

And here is the link of the site : https://pin-matcher-03.netlify.app/
5 tips in PHP 🐘
Tags: php, webdev, tutorial, news
Published: 2021-08-24 20:17:58

In this article, I’ll show you 10 tips that can improve your PHP code 🔍 🐘
In order to make this article easier to read, I’ll write some pieces of code that I’ve encountered and introduce a commented solution if needed, as you know there are 4242424242424 ways to do the same thing ✨ and It’s OK to disagree with my solution 😅

👀 For my examples I use PHP 7.4
🏁 🔥

### 1 - In this use case, just return the expression 👌
```php
if($foo === 42) {
    return true;
}
return false;

// can be
return $foo === 42;
```

### 2 - [Null coalescing operator] (https://www.php.net/manual/en/migration70.new-features.php#migration70.new-features.null-coalesce-op) for the win 😍
```php
if($foo !== null) {
    return $foo;
}
return $bar;

// can be
return $foo ?? $bar;
```
💡 It’s very handy to avoid exceptions when you want to access a key that doesn’t exist

### 3 - Straight to the point 🥅
```php
$this->user = ['firstname' => 'smaine', 'mail' => 'contact@smaine.me'];

return $this->user;

// can be
return $this->user = ['firstname' => 'smaine', 'mail' => 'contact@smaine.me'];
```

### 4 - Initialize your helper once 😛
```php
class FooTransformer
{
    private $propertyAccessor;

    public function transform(array $data): Foo
    {
        $accessor = $this->getAccessor();
        // stuff
    }

    private function getAccessor(): PropertyAccess
    {
        return $this->propertyAccessor ??= PropertyAccess::createPropertyAccessor(); // @lito 
    }
}
```

### 5 - Unpack an array 🎩
```php
$users = [
    ['smaone', 'php'],
    ['baptounet', 'javascript'],
];

foreach($users as [$username, $language]) {
    // $username contains the 1st key "smaone" for the 1st iteration
    // $language contains the 2nd key "php" for the 1st iteration
}
```
In the same way, we can also assign variables from an array, it is useful if a function returns an array 🚀
```php
function getFullname(int $id): array
{
    $statement = $pdo->prepare("SELECT id, lastname, firstname FROM user WHERE id = ?");
    $statement->execute([$id]);
    $result = $statement->fetch();

    // suppose $result contains [42, 'luke', 'lucky'];
    return $result;
}

// main.php 
[$id, $lastname, $firstname] = getFullname(42);
// $id contains 42
// $lastname contains luke
// $firstname contains lucky
```

* * *
I hope you enjoyed the read!

Feel free to follow me on [GitHub](https://github.com/saymontavares), [LinkedIn](https://www.linkedin.com/in/saymon-tavares/) and [DEV](https://dev.to/saymontavares) for more!