teleren/devto huggingface dataset:
JS: Maps can store any type of key
Tags: codenewbie, webdev, beginners, javascript
Published: 2020-11-13 11:16:00

```js
const myMap = new Map([]);

const numberKey = 1;
const stringKey = "str";
const arrayKey = [1, 2, 3];
const objectKey = { name: "abc" };

myMap.set(numberKey, "Number Key");
myMap.set(stringKey, "String Key");
myMap.set(arrayKey, "Array Key");
myMap.set(objectKey, "Object Key");

myMap.forEach((value, key) => console.log(`${key} : ${value}`));

/*
Output:
1 : Number Key
str : String Key
1,2,3 : Array Key
[object Object] : Object Key
*/

```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Monitoror - Gitlab
Tags: monitoring, devops, gitlab
Published: 2020-11-13 11:15:04

This post describe how to add gitlab pipeline jobs to monitoror dashboard
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6ddieunniujpoqbkjup6.png)

##GITLAB-PIPELINE

###Add configs to env
```
MO_CONFIG_GITLAB=/monitoror/config_gitlab.json
MO_MONITORABLE_GITLAB_URL=https://gitlab.com
MO_MONITORABLE_GITLAB_TOKEN=GwLzYzJh4bezFctgwQDY
MO_MONITORABLE_GITLAB_TIMEOUT=5000
How to generate gitlab token
```

###Create config_gitlab.json
- Group a project as a tile group and branches are its element
- Add HTTP-RAW for site demo to monitoring its version (meta.txt)


```
{
   "version":"2.0",
   "columns":2,
   "tiles":[
      {
         "type":"GROUP",
         "label":"MyProject - CI Jobs Running",
         "rowSpan":4,
         "tiles":[
            {
               "type":"GITLAB-PIPELINE",
               "label":"MyProject",
               "params":{
                  "projectId":21808445,
                  "ref":"master"
               }
            },
            {
               "type":"GITLAB-PIPELINE",
               "label":"MyProject",
               "params":{
                  "projectId":144,
                  "ref":"develop"
               }
            }
         ]
      },
      {
         "type":"GROUP",
         "label":"Serverless - CI Jobs Running",
         "rowSpan":4,
         "tiles":[
            {
               "type":"GITLAB-PIPELINE",
               "label":"Serverless",
               "params":{
                  "projectId":167,
                  "ref":"master"
               }
            },
            {
               "type":"GITLAB-PIPELINE",
               "label":"Serverless",
               "params":{
                  "projectId":167,
                  "ref":"develop"
               }
            }
         ]
      }
   ]
}
```

{% github vumdao/monitoror %}
###Generate config_gitlab.json with multiple projects and multiple branches
* Use script to auto generate
`python gen_conf.py`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e85yyzhww2fokf1lyzbf.png)

Mirror:
- https://github.com/vumdao/monitoror-gitlab
- https://vumdao.hashnode.dev/monitoror-gitlab
Pickle Rick Maze Game
Tags: codepen
Published: 2020-11-13 11:06:53

<p>A Simple maze game that uses recursive back tracking to generate a new random Maze every time. 
Use Arrow keys or WASD to control the Sprite movements.
Now works on mobile!</p>

<p><a href="https://github.com/TheCodeDepository/PickleRick-MazeGame" target="_blank">https://github.com/TheCodeDepository/PickleRick-MazeGame</a></p>

{% codepen https://codepen.io/TheCodeDepository/pen/jKBaoN %}
Job-Searchin' (and a New Mini-Project!)
Tags: devjournal, career, sideprojects
Published: 2020-11-13 10:45:06

_This post was originally published on November 13, 2020 [my blog] (https://alexlsalt.github.io/blog)._

It's Friday and we're feelin' good, folks! I just had a wonderful informational interview and got a bit of clarity on which direction I want to head along my coding journey.

I'm in the process of applying to front-end developer jobs, and I'm actually surprised to find that the transition from constant learning and building to job-searching is very *not* intuitive.

It definitely makes sense though, since we use completely different faculties for each.

Regardless, I'm committed to keeping the focus on making connections and building relationships along the job search.

Hinging too much on any one outcome can become demoralizing and demotivating.

Plus! A lot of job postings I've seen lately for React developers also come with a helping of being familiar with developing with Ruby on Rails, so I think I might dabble into a tutorial today and start in on getting familiar with Rails.

I think it'll be fun!

Lastly! I build a fun mini-app this week: Reddit Dog! It's a React app that fetches data from Reddit based on the user-input of a type of dog.

It then sorts the top posts based on number of upvotes and displays the list on the app from highest votes to lowest.

[You can check the project out here >>](https://reddit-dog.netlify.app/)
Among Us - Walking/Idle/Hat/Arrow Controls ( Click on the Screen to Start ) [WIP]
Tags: codepen
Published: 2020-11-13 10:34:28

<p>Hi! This is an experiment using AmongUs style.</p>

<p>Controls:</p>

<p>Walk: ↑  ↓ → ← W A S D</p>

<p>Special thanks for <a href="http://innersloth.com/" target="_blank">http://innersloth.com/</a></p>

{% codepen https://codepen.io/kidsmohamed/pen/GRqzKdd %}
Recurring Lottery game SmartContract deployed on XinFin XDC Network
Tags: blockchain, xinfin, xdc, smartcontract
Published: 2020-11-13 10:26:38

Deployed a recurring lottery smartcontract on XinFin XDC Network, and it is very easy and cheap to deploy on XinFin Network. The stable network where the new generation Developers should deploy their #DAPPS and #SmartContracts.

Check the Solidity Contract for Lottery:

`pragma solidity ^0.4.18;
contract RecurringLottery {
    struct Round {
        uint endBlock;
        uint drawBlock;
        Entry[] entries;
        uint totalQuantity;
        address winner;
    }
    struct Entry {
        address buyer;
        uint quantity;
    }
    uint constant public TICKET_PRICE = 1e15;
    mapping(uint => Round) public rounds;
    uint public round;
    uint public duration;
    mapping (address => uint) public balances;
    // duration is in blocks. 1 day = ~5500 blocks
    function RecurringLottery (uint _duration) public {
        duration = _duration;
        round = 1;
        rounds[round].endBlock = block.number + duration;
        rounds[round].drawBlock = block.number + duration + 5;
    }
    function buy () payable public {
        require(msg.value % TICKET_PRICE == 0);
        if (block.number > rounds[round].endBlock) {
            round += 1;
            rounds[round].endBlock = block.number + duration;
            rounds[round].drawBlock = block.number + duration + 5;
        }
        uint quantity = msg.value / TICKET_PRICE;
        Entry memory entry = Entry(msg.sender, quantity);
        rounds[round].entries.push(entry);
        rounds[round].totalQuantity += quantity;
    }
    function drawWinner (uint roundNumber) public {
        Round storage drawing = rounds[roundNumber];
        require(drawing.winner ==  address(0));
        require(block.number > drawing.drawBlock);
        require(drawing.entries.length > 0);
        // pick winner
        bytes32 rand = keccak256(
            block.blockhash(drawing.drawBlock)
        );
        uint counter = uint(rand) % drawing.totalQuantity;
        for (uint i=0; i < drawing.entries.length; i++) {
            uint quantity = drawing.entries[i].quantity;
            if (quantity > counter) {
                drawing.winner = drawing.entries[i].buyer;
                break;
            }
            else
                counter -= quantity;
        }
        balances[drawing.winner] += TICKET_PRICE * drawing.totalQuantity;
    }
    function withdraw () public {
        uint amount = balances[msg.sender];
        balances[msg.sender] = 0;
        msg.sender.transfer(amount);
    }
    function deleteRound (uint _round) public {
        require(block.number > rounds[_round].drawBlock + 100);
        require(rounds[_round].winner != address(0));
        delete rounds[_round];
    }
    function () payable public {
        buy();
    }
}`
Planning the best online auction website: introducing the major steps
Tags: webdev, startup
Published: 2020-11-13 10:16:26

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6oawjizfue6xxgawbce5.png)
Right strategy is a key to success. Sounds banal, but when you stand on the verge of a new project, this thing is not always so obvious. Failure considering is a method of its prevention. For this reason every moment should be carefully thought out. Such approach relates to online auction website creation too. This article tends to give a hint regarding the major steps of online auction website building.

*Hint #1*. **Prefer local online auctions at the very beginning**. Don’t try to follow a plan maximum instead. Local audience is a good indicator to enter your preferable niche in the correct way. Be patient with defining your goals and opportunities;

*Hint #2*. **Make plans for development**. Create a picture in your head of how your ideal online auction website should look like. It will help to avoid any unpleasant surprises along the way. However, match your needs with your budget. There are two main options in website development: a ready-made website or totally customized ones. Each option differs with price variation and benefits it gives;

*Hint #3*. **Get a domain name**. Investigate, which domain name can help you to attract customers and make your website unforgettable. Note, two factors matter in domain name selection: rating and authenticity. It should definitely reflect your company values and show your business specificity;

*Hint #4*. **Choose a web hosting**. As it’s one of the most important components, as it sustains your website. At the start you won’t need a lot of bandwidth, anyhow pay attention to hosting available space and traffic load capabilities;

*Hint #5*. **Start out the development cycle**. Once everything has been prepared, initiate your website development. If you are a single project worker, you can rely on software documentation, community and user recommendations;

*Hint #6*. **Select a secure payment gateway**. Your future website reputation completely depends on its security. Provide your clients with safe payment options, and they will entrust you their payment information again and again;

*Hint #7*. **Diversify it with content**. When all primary actions were made, add to your website descriptions and offers. You can engage professionals, like copywriter or photographer, so you can introduce your website with pride after;

*Hint #8*. **Test your website**. Testing is a must have phase, as bugs are something that should be got rid of before a full-fledged website performance;

*Hint #9*. **Advertise your online auction website**. Make everyone know about it. It’s possible by means of social networks, in case you are in search of a cheaper variant. Additionally, your website can be served by an agency, which will be a little bit more expensive for sure.

Hope it became clearer, so now you’re more ready for big achievements. [Welcome to the full blog article](https://dinarys.com/blog/how-to-start-your-own-online-auction-site-software), where you will discover some extra tips.
How to add Ajax functionality to a form for replacing a DOM element with a partial?
Tags: ruby, ajax
Published: 2020-11-13 10:14:18

---
title: How to add Ajax functionality to a form for replacing a DOM element with a partial?
published: true
description: 
tags: ruby, ajax
//cover_image: https://direct_url_to_image.jpg
---
### How to add Ajax functionality to a form for replacing a DOM element with a partial?

Add to form `remote: true` or refactor to [form_with](https://apidock.com/rails/ActionView/Helpers/FormHelper/form_with)

In your controller action, e.g. foobar, add:

```
def foobar

  respond_to do | format |
    format.js
    format.html
  end

end
```

Create the same file name as the controller action:

`foobar.js.erb`

Content of `foobar.js.erb`:

`$("#id").replaceWith("<%= j render('partial_name') %>");`

Perhaps possible to extract partial from current view

`_partial_name.html.erb`

Add this back in the view with

`<%= render "partial_name" %>`

Done.
La mejor gestión de bienes inmuebles

Tags: sitges, inmobiliria, barcelona, livingsitges
Published: 2020-11-13 10:10:39

En Living Sitges estamos a tu disposición para atender las necesidades que tengas con respecto a una gestión o proceso de un negocio inmobiliario, porque de toda inmobiliaria Sitges, nosotros contamos con los servicios más completos para poder hacerlo todo de la mejor manera. livingsitges.com
Como inmobiliaria Sitges te podemos ayudar para todo lo referente a una compra, venta o alquiler de un inmueble, pero no es solo eso, porque tenemos para ti la mejor gestión realizado de la mano de expertos, debido a que nos preocupamos por satisfacer tus necesidades, y nos cercioramos de que tus pendientes con negocios de inmuebles siempre se hagan de la mejor manera.
No por nada Living Sitges es conocida como la mejor inmobiliaria Sitges, porque todas las personas que ponen su negocio en nuestras manos garantizan que este se hará de la manera perfecta, y no habrá ningún tipo de problemas, ya que conocemos como se maneja el mercado inmobiliario y todo lo que se debe hacer, asegurando siempre que todo esté bajo las normativas y exigencia de la Ley.
Con nosotros consigues una buena gestión de lo que necesites, y por supuesto ganas la tranquilidad que tanto quieres porque lo dejas en buenas manos. Quienes han utilizado nuestros servicios son la mejor referencia de que puedes confiar en nosotros, no te defraudaremos y ni te arrepentirás de buscarnos, porque somos más que una inmobiliaria Sitges, en Living Sitges nos convertimos en tu mejor aliado y guía para que hagas el negocio correctamente.
try..catch..finally - Real example
Tags: javascript, codenewbie, webdev, beginners
Published: 2020-11-13 10:05:33

```js
const getData = async () => {
  try {
    setLoading(true);
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/posts"
    );
    // if error occurs here, then all the statements 
    //in the try block below this wont run.
    // Hence cannot turn off loading here.
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.log(error);
    setToastMessage(error);
  } finally {
    setLoading(false); // Turn off loading irrespective of the status.
  }
};

getData();
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Square a number: awful answers only
Tags: challenge, jokes, programming
Published: 2020-11-13 10:03:51

---
title: Square a number: awful answers only
published: true
description: Write code to square an integer, but your code should be highly suboptimal.
tags: challenge, jokes, programming
series: awful answers only
//cover_image: https://direct_url_to_image.jpg
---

Today's challenge is deceptively simple. Square a number. Given the input of an integer, output that integer multiplied by itself.

E.g.
```javascript
square(3);
//output: 9
square(15);
//output: 225
```
Of course, I only want to see the worst ways to do this. Don't hold back. Make the compiler beg for mercy! You might find inspiration in the [Wikipedia article on squaring](https://en.wikipedia.org/wiki/Square_(algebra)).

### Tests
``` javascript
square(4) == 16;
square(16) == 256;
square(51) == 2601;
```
IT Help Desk Là Gì- Những Điều Bạn Nên Biết Về IT Help Desk?
Published: 2020-11-13 09:40:16

IT helpdesk là gì? Đây là một công việc với mức lương hấp dẫn mà các công ty hàng đầu cần tuyển dụng. Đọc bài viết sau để tìm hiểu nhé! Xem chi tiết tại: http://nghelaptrinh.net/it-help-desk-la-gi/
What is the Difference between Ruby Blocks, Procs and Lambdas

Tags: ruby, rails
Published: 2020-11-13 09:20:36

Having a problem understanding the difference between ruby blocks, procs and lamdas. What are the blocks? What is the difference between procs and lambdas? Let's break this down.

#### BLOCKS:

A block is a collection of code enclosed in a do/end statement or between braces { }. They are chunks of code that you can pick up and drop into another method as input or chunk of code that you associate with a method call. If you have used each before to loop through an Enumerable then you have used blocks.

#### Defining a block
```
def block_method
  puts "we are in the method"
end

block_method { puts "The block is called"}
```

#### PROCS

So what if you want to pass two blocks to your function. How can you save your block into a variable?
Ruby introduces procs so that we are able to pass blocks around. Proc objects are blocks of code that have been bound to a set of local variables.Once bound, the code may be called in different contexts and still access those variables.

#### Defining procs

You can call new on the Proc class to create a proc . You can use the kernel object proc. Proc method is simply an alias for Proc.new. This can be assigned into a variable.

```
factor = Proc.new {|n| print n*2 }

or 

factor = proc {|n| print n*2}

//using the proc value

[3,2,1].each(&factor)

>642
```

#### LAMBDAS

##### Can be defined using the method lambda or can be defined as stuby lambda

```
lamb = lambda {|n| puts 'I am a lambda' }
lamb = -> (n) { puts 'I am a stuby lambda' }
```

#### Difference between Procs and Lambdas

Procs don’t care about the correct number of arguments, while lambdas will raise an exception.

Return and break behaves differently in procs and lambdas
Next behaves same way in both procs and lambdas

### References

rubyguides.com : [Click Here!!!!](http://www.rubyguides.com/2016/02/ruby-procs-and-lambdas/)	 

I hope that helps someone. Thanks :).

Thanks for reading. 🙂

I’d love to hear thoughts or comments around this. Feel free to email me at ronakabhattrz@gmail.com or hit me up on twitter, @ronakabhattrz .
APPLICATION PROGRAMMING INTERFACE (APIS)
Published: 2020-11-13 09:03:22

Using a life scenario to explain the existence of APIs is the best way to communicate with someone that needs an extensive understanding of APIs.

Taking a standard restaurant as an example.We have the waiter, kitchen, client, and menu.

As the client(interface), you make an order(request) from the menu on your table, the waiter(API) comes around to pick your order and send it to the kitchen(database) to prepare and return your order(response). APIs are the intermediary between frontend and backend and the main purpose is for sending requests and receiving responses.


 **   THE ANATOMY OF URL(Unified resources locator)**
Understanding the anatomy of URL is the key to know how HTTPS, domains, APIs, endpoints, and query parameters work.

api.themoviedb.org/3/movie/upcoming?api_key..

Using the above URL for explanation :

HTTPS is a secured protocol and the security of this protocol can be identified by a padlock icon that is locked while HTTP is an unsecured protocol.

api.themoviedb.org is the domain name

movie is the API that has an endpoint "/upcoming/" (an example of endpoint/path you wish to collect data from)

?api_key=229c849a6b383c4b10bad6a2aa48ab90 In some cases, we have query parameters. A query parameter is a key value pair of query name and query value . It comes after the endpoint and starts with ?, they're displayed like this (? query name = query value).We can have as many query parameters as possible. The way to add query parameter is by appending an and(&) sign.

Documentation is the only way to have enough understanding on how to access other web server APIs endpoint.
The NEAR Protocol — Scalability rethought
Tags: technology, bitcoin, blockchaindevelopmen, blockchain
Published: 2020-11-18 19:16:16

---
title: The NEAR Protocol — Scalability rethought
published: true
date: 2020-11-13 08:57:37 UTC
tags: technology,bitcoin,blockchaindevelopmen,blockchain
canonical_url: https://medium.com/coinmonks/the-near-protocol-scalability-rethought-d39b13538eb3
---

[![](https://cdn-images-1.medium.com/max/1140/0*BimXGGrGaRFuQipU.png)](https://medium.com/coinmonks/the-near-protocol-scalability-rethought-d39b13538eb3?source=rss----721b17443fd5---4)

Scalability, user and developer focus: NEAR should be the basis of the modern Internet

[Continue reading on Coinmonks »](https://medium.com/coinmonks/the-near-protocol-scalability-rethought-d39b13538eb3?source=rss----721b17443fd5---4)
Front-End Technologies you need to know as a front-end Developer!
Tags: webdev, frontend, javascript
Published: 2020-11-13 08:56:38

With the drastic movement of technologies over this past decade, there is no running away from the fact that front-end technologies have really advanced and catching the world of web development in surprise.

> “Great web design without functionality is like a sports car with no engine.”

> – Paul Cookson

So in order to be able to stay in the loop of this emerging technologies and be relevant in the world of web development a front-end developer has to be able to comprehend and understand how the user thinks, what they love, what they want to see, the trends in the world of web development and finally the best front-end technologies that best suits this tasks

Here is a list of front-end technologies a front-end developer needs to know:
## Vue.js


Vue.js has turned out to be a competitor for Angular and React, and that may be quite a surprise for some. It is easy to understand their surprise, too. Vue.js was developed and launched by an ex-Google employee, Evan You; it doesn’t have any large IT companies (like Facebook or Google) behind it to provide support, thus it is often referred to as a one-man project.

Vue.js has one purpose: it exists to make the user interface development easier and simpler, and it completely fulfills this task; however, just like any other framework, it has its advantages and disadvantages.

## Next.js

Next.js is backed by Zeit company. It was developed for server-rendering React applications. The number of such web apps tends to be growing, which is another web development trend. The Next.js web framework is a response to Vue.js on React’s behalf. If you combine React with Next.js, you get as close to what Vue.js offers you as possible in terms of development simplicity.

## Angular

Even though we started this list with Vue.js, Angular remains one of the most popular front end frameworks. It is not going to disappear anytime soon, so let’s take a look at what Angular is going to bring us this year.

December 2017 brought us a long-awaited Christmas present: Angular 5. It included such new features as the support of PWAs, build optimizer, and some improvements to Material Design implementation. Many experts say it is the best frontend framework 2020.

## Gatsby


Gatsby is a reflection of the new front end 2020 trends that have arrived. It is a framework built by Kyle Matthews for developing static websites. Gatsby is a perfect fit for those who aim to use the latest technologies but have a restriction on budget.

## React
React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Thanks for reading, if you have great suggestions about other front-end technologies that are not listed yet in this blog post kindly comment them