teleren/devto huggingface dataset:
Functions: The bread and butter of JavaScript programming
Tags: javascript, webdev, beginners
Published: 2020-12-12 18:52:11

#**Function**
A *function* in JavaScript is a piece of code contained within a block with a name associated to it. These are building blocks for almost every program that one tends to write. In simple words a *function* is a subprogram which is capable of performing a specific task. 

There are a couple of ways by which we can create a function in JavaScript and we will go through each one them.

#**Function declaration**
To create a function using function declaration you must use the ***function*** keyword followed by a name, followed by parenthesis which can have zero to any number of parameters and then followed by a pair of curly braces which holds the code to be executed.
**Note:** Function declarations are hoisted.

```
function square(x){
return x*x;
}
```

#**Function expression**
To create a function using function expression you must follow the same steps as function declaration but you assign the function to a variable with a name which is the name of the function.
**Note:** Function expressions are not hoisted.

```
const square = function(x){
return x*x;
}
```

#**Arrow functions**
These were introduced in ES6. Arrow functions helps you write shorter syntax by omitting the function keyword and replacing it with an arrow (=>) symbol which is made up of an equal to and a greater than symbol.

```
const square = (x) => { return x*x; }
```
Just in case if there is only one parameter then you can even omit the parenthesis. If there is only a single expression to be returned then you can even omit the curly braces and the return keyword.
**Note:** There is a difference between an expression and a statement.

```
const square = x => x*x;
```

#**Points to take away**
* Function declaration is declared as a separate statement.
* Function expression is a part of another expression or a syntax.
* Arrow functions are handy for one-liners.

*Reference:* [Eloquent JavaScript](https://eloquentjavascript.net/)
Create and Share beautiful images of your source code with Carbon
Tags: carbon, image, snippets, code
Published: 2020-12-12 18:46:05

Want to share a snippet of code and at the same time want it to look good? Here's brought to you [Carbon](https://carbon.now.sh/)

With Carbon you can just type/paste your code or just drag and drop a file and create wonderful images like this

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1607264001934/pZiJsVBg9.png)

1. You can login to your Github to store your snippets in carbon
1. First of all go to https://carbon.now.sh
2. Select the theme you want. I have used Seti in the above theme
3. Select the language your code is written in
4. You can select a colour or an image for the background of your code
5. Click on the settings button to tweak various configurations, like creating presets for the snippets, font family, size, line height and much more
6. You can copy to clipboard the code snippet in the form of:
  1. Image
  2. Medium
  3. Iframe
  4. Plain URL
7. You can *tweet* your snippet. Pretty cool, hunh?
8. You can export your snippet in the form of **png** or **svg**, change size of the image, and change the file name

Now, no more sharing code as text messages... Just export them to images with carbon!
Code Smell 50 - Object Keys
Tags: oop, codenewbie, tutorial, webdev
Published: 2020-12-12 18:29:02

*Primary keys, IDs, references. The first attribute we add to our objects. They don't exist in the real world.*

# Problems

- Coupling

- Accidental Implementation

- [Bijection Principle](https://maximilianocontieri.com/the-one-and-only-software-design-principle) Violation.

# Solutions

1. Reference *object* to *objects*.

2. Build a [MAPPER](https://maximilianocontieri.com/what-is-wrong-with-software).

3. Only use keys if you need to provide an external (accidental) reference. Databases, APIs, Serializations.

4. Use dark keys or [GUIDs](https://en.wikipedia.org/wiki/Universally_unique_identifier) when possible.

5. If you are afraid of getting a big relation graph use proxies or lazy loading.

6. Don't use DTOs.

{% post https://dev.to/mcsee/code-smell-40-dtos-4426 %}

# Sample Code

## Wrong

{% gist https://gist.github.com/mcsee/388923d775ca893eb1e6ca4c28c3287f %}

## Right

{% gist https://gist.github.com/mcsee/9a0f4f02514f740f3872cbc463d25c8b %}

# Detection

This is a design policy. 

We can enforce business objects to warn us if we define an attribute or function including the sequence *id*.

# Tags

- Accidental

# Conclusion

Ids are not necessary for OOP. You reference objects (essential) and never ids (accidental).

In case you need to provide a reference out of your system's scope (APIs, interfaces, Serializations) use dark and meaningless IDs (GUIDs).

# Relations

{% post https://dev.to/mcsee/code-smell-20-premature-optimization-4moe %}

# More info

{% post https://dev.to/mcsee/what-is-wrong-with-software-5pa %}

{% post https://dev.to/mcsee/the-one-and-only-software-design-principle-3086 %}

# Credits

Photo by <a href="https://unsplash.com/@mauricew98">Maurice Williams</a> on <a href="https://unsplash.com/s/photos/keychain">Unsplash</a>

* * *

> All problems in computer science can be solved by another level of indirection.

_David Wheeler_
Is It Really Necessary to Learn Selenium Grid to Get a Job in Automation
Tags: testing, selenium, beginners, tutorial
Published: 2020-12-12 18:27:37

In this video, We are going to learn if you can get a job if the learn about selenium grid.

What is Selenium Grid?
Selenium Grid is a smart proxy server that makes it easy to run tests in parallel on multiple machines. 

This is done by routing commands to remote web browser instances, where one server acts as the hub.

{% youtube 18ECbVogLFY %}

✅ Join us - https://sendfox.com/thetestingacademy
✅ Master API Testing - https://learnapitesting.com.


-----------------------------------------------------
👪 Join our Community - http://bit.ly/learntesting2019
✅ Automation Tester Community - https://thetestingacademy.com
🐦Follow us on Twitter  - https://twitter.com/itstechmode
📖 Like us on Facebook - https://www.facebook.com/scrolltest
🎤  Listen to our Podcast - https://anchor.fm/thetestingacademy
Values, Types, and Operators
Tags: javascript, ecmascript, jsx
Published: 2020-12-12 18:05:43

Did You know the computer can't understand our language except for machine language?

| binary     | decimal |
| ---------- |:-------:|
| 01000001   | A       |
| 111        | 7       |
| 010        | 2       |

####The binary code is well understood by our computers.
----------
Editor:Vs-code,sublimetext,atom,fiddlejs,codesandbox,Repl,etc.
> #### choose any one of the above mentioned editors.
----------

##VALUES:
 Values comprised of bits, they play different roles. Values can be numbers, pieces of text or function, and so on.
*NUMBERS:*

#####Here we will discuss values of the number type i.e. numeric (12,13..) values.#####
---
##OPERATORS:
**UNARY OPERATOR**

Typeof operator
```javascript
console.log(typedef 34.15);
// *number
console.log(typedef "x");
// * string
```
>_**note: minus operator can be used as a binary as well as >unary operator.**_

```javascript
console.log(-(5-2));
// -> -7
```
**BOOLEAN OPERATOR**

Comparision 
It tells us whether the value is true or false.

```javascript
console.log(10>2);
//->true
console.log(5<9);
//->false
```
*We can also compare length of two strings.*
```javascript
console.log("ANA"<"SOOYA");
//->true
```
Other operators are ==,>=,<=,!=

```javascript
console.log("alpha"!="aphanhso");
//->true
```
>_**Note-There is only one value that is not equal to itself >and that is NaN (not a number)**_
 ```javascript
console.log(NaN==NaN);
//->false
```
**LOGICAL OPERATOR**

>and is written as &&
```javascript
console.log(true && false);
//->false
```
> or is written as ||
```javascript
console.log(false||true);
//-->true
```
>Ternary operator ? or conditional operator
```javascript
console.log(false?3:5);
//-->3
```
---
**Short-circuiting of logical operators**

>|| operator for example will return value to its left when >that can be converted to true and vice versa
```javascript
console.log(null||"user");
//->user
```
---
###Automatic Type Conversion
>At times javascript can accept any program you give it.Even if an operator applied to the "wrong" type of value,Javascript will convert it to that value it needs.This is known as _*type coercion*_.
```javascript
console.log(4*null)
//->0
```
>In the above example, null becomes 0 so we got 0 as output.

```javascript
console.log("2" - 1)
//->1
console.log("2"+1)
//->3
console.log("2"*1)
//->2
console.log("two"*1)
//->NaN
console.log(false==0)
//->true
```

>If null or undefined occurs on either side of the operator >,it produces true. Let's take an example.
```javascript
console.log(null ==undefined);
//->true
```
####*Ref: Eloquent Javascript*
I would advice readers to code on their own and explore more.
If You have any doubts, you can write it in the comments section.

😃 Have an amazing day ahead.
Hope you liked this blog!
Advent of Code 2020 Solution Megathread - Day 12: Rain Risk
Tags: adventofcode, challenge
Published: 2020-12-12 17:59:55

---
title: Advent of Code 2020 Solution Megathread - Day 12: Rain Risk
published: true
description: Another grid, but this time, we’re driving a boat through a storm. 
tags: adventofcode, challenge
series: Advent of Code 2020
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0s4aumgdy67yjo80fhvf.png
---

I’m on mobile today, so putting this together is a little later and a little more interesting today. But here you go! Happy day 12!

## The Puzzle

In [today’s puzzle](https://adventofcode.com/2020/day/12), we're not just sitting on the ferry. We get to drive it! You’re following directions from the navigation system to move the boat around. How is the boat strafing sideways? I don’t know. You’re the boat driver!

## The Leaderboards

As always, this is the spot where I’ll plug any leaderboard codes shared from the community.

```
Ryan's Leaderboard: 224198-25048a19
```

If you want to generate your own leaderboard and signal boost it a little bit, send it to me either in a DEV message or in a comment on one of these posts and I'll add it to the list above.

## Yesterday’s Languages

Updated 03:04PM 12/12/2020 PST.

| Language   | Count |
|------------|-------|
| Ruby       |     2 |
| Haskell    |     2 |
| JavaScript |     2 |
| COBOL      |     1 |
| Go         |     1 |
| Cpp        |     1 |
| C          |     1 |
| Rust       |     1 |

Merry Coding!
#Day 10: Huffman Alogrithm
Tags: 100daysofcode
Published: 2020-12-12 17:51:14

I had no idea about Huffman Algorithm until today. I am glad that I came across this problem while solving Tree problems on HackerRank. The concept is easy. Every time we need to start with the root and go the right if string at given position is right or else left in the same way. 
You should try it too if you haven't yet.
Summon The JSON 3rd Top Trending Card Game
Tags: javascript, programming
Published: 2020-12-12 17:45:04

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zbwdmifgzsae6pct2bxo.jpg)

🔥 Summon The JSON became 3th TOP trending card game on Product Hunt!

[Link](https://www.producthunt.com/posts/summon-the-json-javascript)
Believe in your work, not in the libraries
Tags: node, career, npm, codenewbie
Published: 2020-12-12 17:36:26

Hey Devs, I hope you all are doing great! 

It just passes a long time since my first blog see the lights and I just come back with more content.

Everything starts with a technical challenge I did the last week. The company I applied for asked me to create an API and the requirements asked me to use NestJS or Node with Typescript. 

So I chose NestJS 'cause it's amazing 🤩 haha. 

A requirement asked me to use MySQL as the database so I just read the NestJS docs and I downloaded Sequelize to handle the connection, table creation, models, and so on. At this point, my app ran perfectly before I wrote the code needed to integrate Sequelize. 

So, I wrote the code to integrate Sequelize and I ran `npm run start:dev` to start the app but when I did that.  ¡BOOM💣💣💣💣🚒! Call 911 guys. Everything broke down. 

I started to read the docs again to see if I have written something wrong or so but I couldn't find anything wrong in my code, so what's the problem?🤔

I went to sleep hoping tomorrow I'll find the error. It's tomorrow and I started to debug my code. Again I couldn't find any error in my code because I followed the docs and it was everything all right. 

So I was about to perform "La rendicion" but I said to myself - No!, your code is written well, there's nothing wrong with it, go and google it 'cause you just spent many hours figuring out what's happening -.

So I went and googled it. And to my surprise the same error I had, many developers were facing. There's an issue open with the error I was facing on [GitHub](https://github.com/RobinBuschmann/sequelize-typescript/issues/804) and in it, the people give you a workaround to fix the problem temporally. So I was glad to see that on GitHub. 

To end this post as a happy story, I just want to say that It never cross my mind to look for the error on GitHub and I was doubting my skills as a dev, and I know that many others at some point have felt this. 

So the important takeaway message from this is that you should trust your work and not rely blindly on the libraries you're using on your project. 😋

Well Devs, this is it for today. I hope you can find something valuable in this post.

If you want you can follow me on[Twitter](https://twitter.com/axelespinosadev), like this post, and share it. 

Byeee🌟

P.S.: English is my second language, if you find any errors you can tell me and I'll be glad to fix them.
Meta Tags : All that you need to know
Tags: html, css, beginners
Published: 2020-12-12 17:33:08

_Wondering what the `<meta>` tags are in the `<header>` section of your HTML document, then read ahead & get all your queries resolved._

**Meta tags:**
These are the tags that provide _additional document level_ descriptive information about the content of the html document. 

**Is the meta tag content visible like the body content?** 
**_No_**

**What is the utility of having additional information?**

* Specify important keywords related to the document
* Provide relevant keywords to search engines as well as web crawlers to refer to the html document 
* Indexing and ranking of web pages during search
* Displaying snippets of document as search result


To answer the above questions, lets dive in & understand the meaning of the most commonly visible meta tag. 

```
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
```

The description in the meta tag is defined in a key-value pair. 
As visible above, the key **"charset"** has the value **"UTF-8"** defined to it. This provides details to the searcher that the document has UTF-8 character encoding. Not mentioning this can impact the rendering of the website.

**name**: This meta tag key provides document level information that applies to the whole page.
The value specified to it here is **"viewport"**: this defines that the document is adjustable to be viewed with ease on the mobile screens. Appended with the **"content"** key we can conclude that the content is adjustable to be viewed on mobile handsets having the defined properties of **width** and **initial-scale**.
 Together, the `name="viewport"` can be observed to be the "key" that has the "value" defined by `content = "width=device-width, initial-scale=1.0"`

`charset`, `name`, `content` & `http-equiv` and `itemprop` are known as **attributes** of the meta tag. Using these _attributes_ the additional information about the document can be defined.

**http-equiv**: provides information that can be considered to be quivalent to the information provided by HTTP headers. Also referred to as _pragma directive_ tag. Observe the example below:

```
<meta http-equiv="refresh" content="3;url=https://example.com">
```

This defines the webpage to be refreshed after 3 seconds by directing it to the specified URL. The use of this should be done wisely and only where truly needed to avoid discomfort to readers of your website caused by frequent reloading of the document.

There are several attributes that can be used in the meta tag to append and provide additional information about it. You can have multiple meta tags with each having information represented in a "key"-"value" pair.

If you are more interested in reading up about meta-tags (What makes a meta-tag Good or Bad?) from a SEO perspective, you can refer to this interesting article [Click to Read more](https://moz.com/blog/the-ultimate-guide-to-seo-meta-tags) 

Hope you found this blog valuable.
Thanks for reading!
Why learn rust?
Tags: rust, discuss
Published: 2020-12-12 17:30:57

## Definition

**Rust** is a [multi-paradigm](https://en.wikipedia.org/wiki/Multi-paradigm_programming_language) [programming language](https://en.wikipedia.org/wiki/Programming_language) designed for [performance](https://en.wikipedia.org/wiki/Computer_performance) and [safety](https://en.wikipedia.org/wiki/Memory_safety), especially safe [concurrency](https://en.wikipedia.org/wiki/Concurrency_(computer_science)). Rust is [syntactically](https://en.wikipedia.org/wiki/Syntax_(programming_languages)) similar to [C++](https://en.wikipedia.org/wiki/C%2B%2B), but can guarantee [memory safety](https://en.wikipedia.org/wiki/Memory_safety) by using a borrow checker to validate [references](https://en.wikipedia.org/wiki/Reference_(computer_science)). Rust achieves memory safety without [garbage collection](https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)), and [reference counting](https://en.wikipedia.org/wiki/Reference_counting) is optional.

Rust was originally designed by Graydon Hoare at [Mozilla](https://en.wikipedia.org/wiki/Mozilla) Research, with contributions from Dave Herman, [Brendan Eich](https://en.wikipedia.org/wiki/Brendan_Eich), and others. The designers refined the language while writing the [Servo](https://en.wikipedia.org/wiki/Servo_(layout_engine)) layout or [browser engine](https://en.wikipedia.org/wiki/Browser_engine), and the Rust [compiler](https://en.wikipedia.org/wiki/Compiler).
 It has gained increasing use in industry, and Microsoft has been 
experimenting with the language for secure and safety-critical software 
components.

## Why rust?

Rust has been voted the "most loved programming language" in the [Stack Overflow](https://en.wikipedia.org/wiki/Stack_Overflow) Developer Survey every year since 2016.

rust is a language very loved by those who use it and it causes more and more curiosity in people since it is a language with a somewhat high learning curve but it is worth it because it is a low-level language allows you to do amazing things and even It has come to be considered for use in projects such as the linux kernel or the internal windows system and is already being used in projects such as a [servo](https://github.com/servo/servo) that is intended to be a replacement for v8

Rust has many innovative things such as being an owner, a new way of collecting garbage, little by little it is welcoming more community

> rust discord server in spanish: [https://discord.gg/4ng5HgmaMg](https://discord.gg/4ng5HgmaMg)
How to make a game with python
Tags: python, tutorial, devops
Published: 2020-12-12 17:30:44

##simple game for kid
In maths class it will be more interesting if we have a kind of game that kids could play and still be learning from it. here I am going to show you how to write codes for multiplication game.
The nature of our game 
1. we need the screen to display question and ask the kid to provide the answer
2. the question should be multiplication of two random number from 1 to 20
3. it should state if the kid get it right or wrong
4. repeat the question 10 times
5. print the kids scores. 
     Now that we have known the nature we need to interpret it in code form.
  * we need `randint()` to generate random number
  * `input()` and `int()` for kid to provide answer
  * for loop in range 10 to ask question 10times
  * if function to check if answer right or wrong
  * counter that keep the score record
  * `print()` function to print out the result.
     Now let's code it. 
```python
from random import randint #to import the randint
mark=0
for i in range(10):
    a=randint(1,20)#first number
    b=randint(1,13)#second number
    que=int(input('Question {}: {} x {} ='.format(i+1,a,b))) #format method to insert the question order
    if que==a*b: #check if the answer is correct
        print('Right!')
        mark=mark+1 #counter
    else:#if the answer wrong
        print('Wrong! The answer is', a*b)
print('You scored {}/{}'.format(mark,10)) 
#woow our game has been made
```
Now run the code did you see how interesting it is? good! you can change the multiplication sign to plus,divide or minus to build different kind of game. did you enjoy it yeah, remember to like.

if you have any question don't hesitate to ask. chat me up on [WhatsApp](https://wa.me/2349153036869?text=Hey!%%20Maxwizard%20l=I%20need%20your%20assistance%20from%20dev) or [Mail](mailto:aoladejo382@stu.ui.edu.ng?Subject=Hey!%%20Maxwizard%20l=I%20need%20your%20assistance%20from%20dev). Don't forget to follow me on [Twitter](https://twitter.com/oladejoabdulla7) so that you don't miss any of my articles.
Python3 Programming - Exercise 5 b - Design Solution
Tags: python, beginners, tutorial, programming
Published: 2020-12-12 17:11:00

## Design a solution
> continuation of `exercise 5 a (Analysis of a solution)`

In this phase, we try to put together the information we gathered from the analysis we made. Here we may provide a human-readable solution that would be used to implement the solution. Again, we decide what data types and data structures that would be used. So here, we could let the average score be an integer or a float and keep all the test scores in an array ( here a list). What should come in mind is pseudo code ( a.k.a false code). From the analysis we can say:

![Solution design with false code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oypf1r9kzund7oh91vhz.png)


> `label: type` we used is what we discussed in `Exercise 2 ( Datatypes) - Type hinting`

## Note

- Most of these stages are done together because this is a small problem - which we could even implement straight forward
- Remember, it is easier to implement a solution after we have analyzed and chose which approach of the solution gave us the desired outcome, efficiently. This means, there could be more than one solution to solve the problem.

## Practicals

> Tip: look out for the given inputs ( the available parameters), the desired outputs ( what is expected), and the process ( how to get the output).

**Analyze and design a solution for the following problems.**

1. Given that a quadratic equation is of the form, `Ax^2 + Bx + C = 0` , where `A` , `B` , `C` are real parameters such that `A` , `B` is not zero. `A` and `B` are the coefficients of `x`, of second and first degrees respectively and `c` a constant. Find and output the roots of the quadratic equation.

1. Find the Area of a circle of radius, `r`, given that `PI` is `3.143`.

1. A shop keeper sold an item of cost, `$340.00` at `$372.99` including a tax of `$2.99` .find the
   - selling price
   - profit made
   - profit percentage
   - tax percentage

## Summary

- To analyze the problem, look out for the input, output and the process
- In the design stage, we choose what data type a value should be or be returned and a data structure, suitable to hold these values
- We choose a solution that best gives the desired outcome
- The best design is simple and readable