teleren/devto huggingface dataset:
Code Smell 176 - Changes in Essence
Tags: webdev, javascript, beginners, programming
Published: 2022-11-02 21:36:56

*Mutation is good. Things change*

> TL;DR: Don't change essential attributes or behavior

# Problems

- [Bijection](https://dev.to/mcsee/the-one-and-only-software-design-principle-3086) violation

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

- [Ripple Effect](https://dev.to/mcsee/code-smell-16-ripple-effect-3881)

# Solutions

1. Protect essential attributes from change.

2. [Remove setters](https://dev.to/mcsee/refactoring-001-remove-setters-26cg)

# Refactorings

{% post https://dev.to/mcsee/refactoring-001-remove-setters-26cg %}

# Context

Heraclitus said:

> “No man ever steps in the same river twice. For it’s not the same river and he’s not the same man.”

The man stays the same in essence. But his body evolves.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/7c1ee7181f403225470c90c2f4668f99)
```javascript
const date = new Date();
date.setMonth(4);
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/c758d376a61469d8ce4266b6e9fbe115)
```javascript
const date = new Date("2022-03-25");
```

# Detection

[X] Manual

This is a semantic smell. We need to model which attributes/behaviors are [essential](https://dev.to/mcsee/coupling-the-one-and-only-software-design-problem-2pd7) and which are accidental.

# Tags

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

# Conclusion

We need to favor immutable objects.

Objects can mutate in [accidental](https://dev.to/mcsee/coupling-the-one-and-only-software-design-problem-2pd7) ways, not in essential ones.

# Relations

{% post https://dev.to/mcsee/code-smell-16-ripple-effect-3881 %}

# More Info

{% post https://dev.to/mcsee/the-evil-powers-of-mutants-1noo %}

# Disclaimer

Code Smells are just my [opinion](https://dev.to/mcsee/i-wrote-more-than-90-articles-on-2021-here-is-what-i-learned-1n3a).

# Credits

Photo by [Nick Fewings](https://unsplash.com/@jannerboy62) on [Unsplash](https://unsplash.com/s/photos/heart-arrow)    

* * *

> Changes in software design will eventually mean "one step forward, two steps back". It is inevitable.

_Salman Arshad_
 
{% 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 %}
Fix "NO FILE" Migrations in Rails
Tags: rails, ruby
Published: 2022-11-02 21:24:56

You may find yourself in the situation where running...
```
rails db:migrate:status
```
...and notice some entries that look like:

```
up     20230902123456  ********** NO FILE **********
```

It means that you switched to a branch with a migration in it, ran `rails db:migrate`, and then switched to another branch. The migration changed your database, but because you switched branches, the migration file is no longer in your code.

To correct this problem, you may try the following:

1\. Find the branch that where the missing migration lives. Use this, replacing the timestamp in this example with the one from `rails db:migrate:status`.

```
git log --all -- '**/20230902123456*'
```

2\. Switch to the branch that is returned with `git checkout <branch>`. (You may need to either commit or stash any unsaved local changes.)

3\. Reverse the migration (if reversible) with the following (again, using the timestamp from `status`):

```
rails db:migrate:down VERSION=20230902123456
```

4\. Abandon the change to the schema it just made with `git checkout db\schema.rb`.

5\. Switch back to your original branch. If you used stash before, restore your stash with `git stash pop`.
Destructing Assignment w/ Rest Parameter to Reassign Array Elements
Tags: freecodecamp, beginners, codenewbie
Published: 2022-11-02 21:08:34

## Destructing Assignment w/ Rest Parameter to Reassign Array Elements
[MDN Destructing Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
So this was yet another dumb thing that seemed easy at first, but I’m not sure how I keep getting lost. 
I thought that I had to create a new variable to break the source array into arr and list. But what I actually had to do was using the Destructing Assignment Parameter[a, b, …arr] which would automatically take the values in slot A and slot B and drop them off the face of the earth, resulting in just the remaining or THE REST of the array thereafter. 

The function `removeFirstTwo(list)` says there is a const[a, b, …arr] = list; which will seperate slots a, and b just as intended, but I’m not clear on how those two and …arr are not included within list. Why does `removeFirstTwo(list)`  not also show slots a and b?
I think this is due to the return only including arr, which again, confuses me, because why does the function use the parameter of list instead of arr if it is returning arr.
The function uses the parameter of `list` instead of the returned arr, because list refers to what was gathered within arr. We’re not creating a new array, we’re just modifying the array that was given to the function `removeFirstTwo`. 

I think the MDN example on [Destructing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#destructuring_patterns_with_other_syntaxes) seems to explain this a bit clearer

### MDN Example - Array Destructing - Basic Variable Assignment
```javascript
const foo = ['one', 'two', 'three'];

const [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

```
### My submitted code
```Javascript
const source = [1,2,3,4,5,6,7,8,9,10];

function removeFirstTwo(list) {

  // Only change code below this line
  
  const [a,b, ...arr] = list; // Change this line

  // Only change code above this line

  return arr;

}

const arr = removeFirstTwo(source);
```
Starting this again
Tags: javascript, beginners, codenewbie, freecodecamp
Published: 2022-11-02 20:48:11

# Goals:

- Become proficient enough to be an open source machine
- Eat, Drink, and be merry by having a real developer job.
- Be a Fullstack Omnipresent being
- Destroying Capitalism

## How will I get there?
- I'm restarting my freecodecamp projects, I'll see them to completion this time
- Maintain my Dev.to with my project logs
- Find a mentor or sponsor of some kind

### What will I do after FCC is complete?
- Evaluate what I have completed
- Establish an understanding of what I'm capable with the knowledge I have gained from completing FCC.
- Understand what I need to learn next

### What kind of Dev.to project logs will I have?
- I'll post my project logs that I maintain in my Obsidian Vault so that others may understand how I learn and function. Particularly, any potential mentor who happens to observe my work.

### How will I find a mentor?
- I will see what I can find via Discord or Dev.to over the next month or so

## Are there any limitations?
- Not necessarily a limitation, but neurological issues; adhd, autism, social panic, ...rest.
- Daily physical fatigue and mental fog due to chronic pain.
How to Raise Your Prices
Tags: podcast, freelance
Published: 2022-11-02 19:44:50

{% spotify spotify:episode:6KBAtFl87INsKIA1kvbBGN %}

## What is HTML All The Things?

HTML All The Things is a [web development podcast](https://www.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.

---





## What's This One About?

Raising your prices as a freelancer, or web dev agency can be a challenging process. You have to weigh the possibility that some of your existing customers may leave for cheaper options, while trying to convince new customers that your pricing is worth it. This week we discuss how to raise your prices and how to justify them with the value your customer will receive from all the work you do.  

## Show Notes/Timestamps 

#### Introduction | 00:02:06

- Project pricing seems to be all over the place, some people charge $200 for a job someone else claims they were paid $20,000 for
- Are people claiming such high rates lying? 
- How valuable are the projects you're making?

#### Identifying Value | 00:03:59

- Is the customer established?
- Does the website perform a task for their business?
- Does the website have a substitute?
- Does the website have a dual-function? 
- What is your value as an agency/freelancer (skillset, customer experience)?

#### What Does Value Mean for Your Invoice? | 00:33:20

- How does the value of your agency and the value of the project you're working on affect the invoice for your work?
The Valuable Facets of a Web Project | 00:58:23
- The various areas of expertise that a web project encompasses such as: branding, marketing, design, data-entry, development, sales, and much more
Cheap Clients | 01:13:10
- How to handle clients that refuse to pay more money even though they can, or ones that cannot afford the services that they're trying to commission




## Thank you!

If you're enjoying the podcast consider giving us a review on [Apple Podcasts](https://podcasts.apple.com/us/podcast/html-all-things-web-development-web-design-small-business/id1412209136) or checking out our Patreon to get a shoutout on the podcast. 

**[Support us on Patreon](https://www.patreon.com/htmlallthethings)**


You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[TikTok](Html All The Things)
SimpleVideo - The simple, flexible, affordable video capture solution
Tags: video, healthcare, psychology, education
Published: 2022-11-02 19:39:49

When professionals require an embedded video recording solution for interviews, lessons, or interrogations, they need a system that readily embeds into their workflow, offers excellent video recording, and is easy to use. SimpleVideo does exactly that! 

Streamlined Software: SimpleVideo’s software architecture is reliable and modernized, built for longevity and supportability. 
Production-Grade Hardware: Production-grade, HD cameras and high-quality microphones that make sure no detail is lost. 
Headache-Free Installation: Self-install or work with us. 

Our project management approach means less time in meetings.

[https://www.simplevideo.io](https://www.simplevideo.io)
Higher-order functions and lambdas in Kotlin
Tags: kotlin, programming, beginners, functions
Published: 2022-11-02 19:32:20

![Functions in Kotlin By Amandeep](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrodzieg3w6anulwmmr1.png)

## Higher-Order Functions:
Functions that return a function as their result, and function types which enable you to define functions as values. Some programming languages are purely functional, meaning the entire application is structured in this
style. 
While Kotlin is not a pure functional programming language, it does provide many functional tools to allow developers to express logic in a functional paradigm. Here, we write our code-part after `->` sign where type annotation is optional.
We must explicitly declare the type of our lambda expression. If lambda returns no value then we can use Unit 
pattern : **(Input) -> Output** 

But to understand Higher-Order functions with examples we need to learn about lambda expressions.

## Lambda Expression:
A lambda expression is always surrounded by curly braces `{}` and arguments are declared inside the curly braces.
**Syntax of lambda functions:** 
```
val lambda_name : Data_type = { variable -> body_of_function }
```
It will be easy to understand with an example:
We can use lambda functions to simply add to numbers 'a' and 'b'.

example with type annotation:
```
val add = { a: Int, b: Int ->
     val num = a + b 
}
```
example without type annotation:
```
val add:(Int,Int)-> Int  = { a , b -> 
       val num = a + b
}
```
**Adding two numbers using lambda-functions:**
```

val add = { a: Int, b: Int ->
    val num = a + b
    num.toString()     //convert Integer to String
}
fun main() {
    val result = add(2,3)
    println("The sum of two numbers is: $result")
}
```
**Output:**
```
The sum of two numbers is: 5
```

We can pass a lambda expression as a parameter to Higher-Order Function. Now we will go through **Higher-Order functions:**
```
var greeting = {println("Hello, My name is Amandeep Singh") }

      // using higher-order function
fun higherfunction( greet: () -> Unit ) {     // use of lambda as a parameter

    greet()                               //invokes lambda function

}

fun main() {

     //call higher-order function
    higherfunction(greeting)                 // passing lambda as parameter

}
```
**Output:**
```
Hello, My name is Amandeep Singh
```

That's it for lambda and Higher-Order functions. Now you have a tight grip over them.

If you have any doubt or suggestion you can share it in the discussion section.
Wanna connect? connect with me on [LinkedIn](https://www.linkedin.com/in/amandeep-singh-452949246/)


![Thank You Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4rt65w2vb1o4dx7ccqu.png)
My website image doesn't load on Facebook App
Tags: react, python, webdev, help
Published: 2022-11-02 19:20:51

Hello,

Hope you all are doing great.

I've recently published a website (e-shop) and it seems to be working fine on every browser; except for when I try to open it using Facebook App. Whenever I visit the site's FB page using the FB app and click on any [post that has a link to the main site](https://www.facebook.com/amboronline/posts/pfbid05UXTjmx86Q5aKXAYHDnPeDiAUAU4fCu8AhY91LsZakgdSdeyLF8xcCpeNRZkpifql) or even the main site link from the info section, it loads the site within the app, but doesn't load any image from the database. Only the images used for design purposes are visible, rest of the image areas show empty with a cross sign.

I've tried the FB developer debugger tools, clearing cache data, browser history, reinstalling the app etc methods, but nothing worked.

The site is designed using Python and React.

Did any of you come across such an issue? It would be a great help if you can suggest me a solution.

Many thanks in advance.
Welcome Thread - v198
Tags: welcome
Published: 2022-11-02 19:19:25

---
title: Welcome Thread - v198
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Cartoon dancer breaking it down... there are colors flowing off the dancer and it's a real 70's vibe. The dancer has an afro and bell bottoms.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c88zkdmtmsb1g19qiqtz.gif)

### Welcome to DEV! 🎃

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
8 Types of Co-curricular Activities In School You must Choose
Published: 2022-11-02 19:15:48

The various types of co-curricular activities in school are chosen to help students develop their overall personalities. The right extracurricular activities at [CBSE Schools in north Bangalore ](https://www.soundaryacentralschool.com/)can help your child's skills and keep him engaged.

Co-curricular activities allow students to focus better in class and teach them valuable life lessons. Many types of research have demonstrated the value of extracurricular activities at school.

1. Co-curricular Academic Activities
Book groups
Editor of the school magazine
Recitation of poetry
Story-writing \sDebates
Putting on exhibitions
Making charts
2. Leisure-Related Co-curricular Activities
Model making
Coin collection
Stamp collection
Train enthusiast
Museum
Monument excursion
Gardening
 3. Social development Related Co-curricular Activities
The CBSE Schools in north Bangalore are encouraging students to go for NGO programs and NSS etc
Scouting and guiding
School council activities
 4. Picnics and excursions Related Co-curricular Activities
Hiking
Special visits
Trekking
Visiting places of historical and geographical importance
 5. Physical-Related Co-curricular Activities
Outdoor and indoor games
Mass drill
Mass P.T
N.C.C
 




6. Cultural Development Related Co-curricular Activities
The CBSE Schools in north Bangalore are sending students to competition in co-curricular activities 
Dance
Music
Folk dance
Folk songs
Fancy-dress competitions

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


 7. Civic Values Related Co-curricular Activities
Organizing camps, such as first aid camp, and cleanliness week.
A celebration of the special day
 8. Arts and Craft Related Co-curricular Activities
The CBSE Schools in north Bangalore are encouraging the students to attend all the activities held in the school
Album making
Doll making
Cooking
Photography
Flower decoration
Clay modeling
Collage making
Basket making
Knitting
 
Conclusion 
Children should participate in at least two co-curricular activities to fully utilize their energy and explore their talents. You should create a balanced program of co-curricular activities that will engage a child's mind and body. I would highly recommend soundarya central school is the best [CBSE Schools in north Bangalore](https://www.soundaryacentralschool.com/)
CSS — Centralizando componentes HTML
Tags: css, html, programming, tutorial
Published: 2022-11-02 19:10:45

Aprenda a centralizar qualquer componente HTML

Para iniciar nosso post, vou começar dizendo que todos os componentes da tela para ser posicionados precisam de uma referência. Eles precisam ser configurados dentro de outro componente para entender onde serão posicionados.

**Por exemplo:** vejamos o código abaixo.

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Centralizar Componente</title>
    <style>
        .corpo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #eeeeee;
        }
        
        .conteudo {
            width: 80%;
            height: 100%;
            position: relative;
            margin: auto;
            background-color: #FFFFFF;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="corpo">
        <div class="conteudo">
            Ola mundo!
        </div>
    </div>
</body>

</html>
```

A div corpo é o componente que receberá todos os outros, ela precisa estar configurada com largura de 100% e precisa ser posicionada com absolute. o width:100% faz com que o conteúdo seja responsivo. Qualquer div que criar dentro da div corpo pode ser centralizada e e se você colocar o width nelas e trabalhar com porcentagem (%) este conteúdo vai se tornar responsivo e muito mais elegante.

Para centralizar as divs filhas na div corpo é simples, as principais configurações do CSS são: position: relative; o width:80% e o margin:auto que é responsável por centralizar o componente. Para ver isto funcionando copie o código acima para seu computador e teste o script.

**Conclusão**
Muitos desenvolvedores precisam usar este recurso do css mas nem sempre sabemos o como fazer. Nunca use a tag html <center></center> isto é muito velho e não deixará seu código responsivo. Este é um outro tema para outro post.

Espero que este post possa ter passado um pouco de conhecimento para sua carreira. Até a próxima.
Javascript — Template String
Tags: javascript, algorithms, react
Published: 2022-11-02 18:58:40

Oi pessoal este post pode parecer simples, mas vai ajudar muita gente que ainda fica concatenando strings no javascript.

Todos os dias você se vê concatenando strings no javascript, seja por interpolação de strings ou multiplas linhas.

Vamos fazer aqui abaixo um exemplo interpolando a string.

```
function dadosCliente(nome, telefone, email){
 return 'Nome: '+nome+' Telefone: '+telefone+' Email: '+email;
}
dadosCliente('Cleyton', '99999–9999','cleyton@medium.com');
```

**Interpolação de String**
Isto funciona perfeitamente do jeito que espera, porém podemos melhorar e deixar o código muito mais elegante. Vamos fazer abaixo usando template string ( Template String é da especificação do ECMAScript2015).

```
function dadosCliente(nome, telefone, email){
 return `Nome: ${nome} Telefone: ${telefone} Email: ${email}`;
}
dadosCliente('Cleyton', '99999–9999','cleyton@medium.com');
```

**Multiplas Linhas**
Muitos usam isto principalmente para montar códigos html. A grande questão é que da muito trabalho e o código começa a ficar ruim para dar manutenção. Vamos colocar abaixo um exemplo usando concatenação com o +

```
function viewDadosCliente(nome, email){
    return '<table>'+
    '<tr>'+
    '<th>Nome</th>'+
    '<th>Email</th>'+ 
    '</tr>'+
    '<tr>'+
    '<td>'+nome+'</td>'+
    '<td>'+email+'</td>'+
    '</tr>'+
    '</table>';
}
viewDadosCliente('Cleyton', 'cleyton@medium.com');
```

Funciona muito bem, porém é trabalhoso dar manutenção com códigos assim, imagine muitas linhas fazendo as concatenações.

Vamos fazer abaixo usando Template String:

```
function viewDadosCliente(nome, email){
     return `<table>
     <tr>
     <th>Nome</th>
     <th>Email</th>
     </tr>
     <tr>
     <td>${nome}</td>
     <td>${email}</td>
     </tr>
     </table>`;
}
viewDadosCliente('Cleyton', 'cleyton@medium.com');
```

**Conclusão**
Template String é a forma mais elegante para trabalhar com concatenação de strings e deixar o código bonito, e também pode ser explorado com outras formas, inclusive pode usar com arrays, etc.

**Espero ter ajudado com esta informação.**
Webpack 3
Tags: webpack, javascript, typescript, react
Published: 2022-11-02 18:55:31

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


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

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tga3nt5gqku6ug3h5r65.png)
Javascript — Como saber se um objeto está vazio
Tags: javascript, programming, algorithms, react
Published: 2022-11-02 18:47:37

Trabalhar com objetos é muito legal e fácil, é empolgante. Porém a propriedade .length retorna undefined quando tentamos contar quantos itens temos em um objeto.

Uma ótima forma de contar ítens em um objeto é usar a função Object.entries(objeto) esta função converte o objeto em um array, assim possibilitando o uso da função .length, veja o exemplo abaixo:

```
const clientes = {}
const contador = Object.entries(clientes).length;

if(contador === 0){
  console.log(`O Objeto está vazio`)
}
```

O que você pode fazer também é verificar se o tipo é um Object ou Array e fazer diferentes abordagens.

```
const clientes = {}
console.log(clientes.constructor);

const novoCliente = Object.entries(clientes);
console.log(novoCliente.constructor);

if(clientes.constructor === Object){
  console.log(`É um Objeto`)
}

if(novoCliente.constructor === Array){
  console.log(`É um Array`)
}
```