teleren/devto huggingface dataset:
JS IIFEs 
Tags: iifie, javascript, functional, workflow
Published: 2020-12-22 14:39:28

**Hello there guys!**

Today we will speak about IIFEs and why sometimes could be handy for your projects.

IIFEs in javascript stands for immediately invoked function expressions,in simple terms just a function that runs directly after of its statement.

Commonly we declare a function on the stack flow and when we need it we call it lets see a quick example.

Let's imagine that we have a function that we would like to show  us a console message,simple enough?

It could be something like this
```
function showMessage() {
console.log('Hello Dev Community)
};


```
Right?
Right,now if we need to use this function we just say
```
showMessage();
```
with ease we solved our problem.
But what happening if we want to initiate that function instantly.

In this condition it is where IIFEs be useful, lets see this kind of syntax for the exact example above.
```
(function () {
console.log('Hello Dev Community')
}) ();
```
As you can see,we wrap our function declaration inside parentheses and after the addition of functionality (console.log) , we close them and the curly braces as well, we add one more pair of parentheses out of the function scope that does our job, to invoke this function immediately.

Of course we can set parameters,so we can say
```
(function (text) {
console.log('Hello'  + text)
}) (' Dev Community');

```
So that's it guys lets roll,lets code..!
I hope you got an idea for a better usage of IIFEs.

Have a nice workday guys, in case for further explanation do not hesitate to contact me or find me in github or linkedin.
GitHub : https://github.com/feco2019
Linkedin : https://www.linkedin.com/in/dimitris-chitas-930285191/
10 Funny App Loading Messages for App Developers
Tags: node, react, vue
Published: 2020-12-22 14:39:05



1. Discovering new ways of making you wait.
2. Your time is very important to us. Please wait while we ignore you.
3. Still faster than Windows update.
4. We are not liable for any broken screens as a result of waiting.
5. Bored of slow loading spinner?, buy more RAM!
6. Kindly hold on until I finish a cup of coffee.
7. We will be back in 1/0 minutes.
8. Why don't you order a sandwich?
9. Don't panic, Just count to infinite.
10. Please wait, Your PC is not a superman!
On .NET Episode: Deep Dive into Many-to-Many with EF Core 5.0
Published: 2020-12-22 14:21:04

On the surface many-to-many in EF6 and EF Core look very similar. However, under the covers the design in EF Core 5.0 is much more flexible and powerful

In this episode, Arthur Vickers returns to chat some more with Jeremy about some of the new  features in Entity Framework Core 5. In particular, they’ll be diving deep into the building blocks of many-to-many. You’ll see how they can be configured to allow flexible mapping and access to the underlying join table.

{% youtube b2klBzcALJc %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).

#### Useful Links
<ul>
<li><a href="https://docs.microsoft.com/ef/core/what-is-new/ef-core-5.0/whatsnew?WT.mc_id=dotnet-00000-cephilli" target="_blank">What's New in EF Core 5.0</a></li>
<li><a href="https://docs.microsoft.com/learn/modules/persist-data-ef-core/?WT.mc_id=dotnet-00000-cephilli" target="_blank">Persist and retrieve relational data with Entity Framework Core</a></li>
<li><a href="https://devblogs.microsoft.com/dotnet/announcing-the-release-of-ef-core-5-0/?WT.mc_id=dotnet-00000-cephilli" target="_blank">Announcing the Release of EF Core 5.0</a></li>
</ul>
Project 1, Week 4, Day 2
Published: 2020-12-22 13:49:51

Things are spiraling like it's got a mind of it's own. The webRTC project is not what is started out to be. It's not too hard to use a library to set up a service to send messages or videos or whatever for that matter. And for some reason it does not seem to quench my desire for learning.

A simple google search and you'll find tons of help about how to get a webRTC application up and running. The real challenge is setting up the piping server that facilitates the service.

It's a bit scary but I think that's what I am doing 😅. 4 Weeks in and completed the project last week but that's not enough. I gotta go deeper. 

Here goes nothing.🤓 🤞
E-Waste Client Platform
Tags: dohackathon, vue, showdev
Published: 2020-12-22 13:49:18

## How it works

<b>Step 1</b>: Existing customers can log into the system using their emails and passwords and the new customers can quickly sign up using their email address.

<b>Step 2</b>: In the dashboard, you can see the points you've earned, and options to use the e-waste system. Click on the e-waste request.

<b>Step 3</b>: Then you have to fill the quick form about your e-waste item. Then click "Submit".

<b>Step 4</b>: You will see a pending request on your dashboard. Once a collector approves your request, You will see the contact details of the collector as well. 

## Redeem Points
The customers can redeem the points with one of our partners for their loyalty points or similar. This option is currently unavailable and we will implement this in the long run.

## Share Points
Another significant feature of the e-waste system is you can share points among your friends. If you are not interested in any of out partner programs, you still can use e-waste and share your points with your friends!

## Screenshots

<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--d8KRA5Up--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/lh55ny4i1qcctmw61u9n.png">
<img src="https://dev-to-uploads.s3.amazonaws.com/i/bu6bhfn422ixgcgvewff.png">
<img src="https://dev-to-uploads.s3.amazonaws.com/i/rgaod9a3c860z0ocya87.png">
<img src="https://dev-to-uploads.s3.amazonaws.com/i/j5ofe3lpit5fybf0cx57.png">

If you have any concerns or suggestions for improvements, please let us know!
Python Walrus Operator
Tags: python, tutorial, beginners
Published: 2020-12-22 13:44:21

The Walrus operator in Python is pretty straightforward. With it, you can assign a value to a variable and immediately use it. For example:
```
if (sum := 10+5) > 10:
    print("This should be printed)
```
In this example, the variable `sum` is assigned the value `15` and then we use it to evaluate if `15 > 10`. As this is true, we should see the content of the print statement.

Be careful about the parenthesis! If we have something like this:
```
if sum := 10 + 5 > 10:
    print("Is this going to be printed?")
```
We will have the `sum` is equal to `True` and the print statement will be executed but the value of sum won't be `15`.

You can see an explanation of the Walrus operator and more of this content at my YouTube channel: https://www.youtube.com/watch?v=cdD313keRW8&ab_channel=DavidArmend%C3%A1riz
Day 22 of JavaScriptmas - Extract Matrix Column Solution
Tags: 24daysofjavascriptmas, scrimba, javascript
Published: 2020-12-22 13:30:16

Day 22 Challenge is to extract the specific column from a matrix (list of array). 

For example, a matrix with `[[1, 1, 1, 2], [0, 5, 0, 4], [2, 1, 3, 6]]` which is has 3 index with 4 values/columns on each array. 

If I draw it will be like this
```javascript
[
    [1, 1, 1, 2], 
    [0, 5, 0, 4], 
    [2, 1, 3, 6]
]
```
Since this is list of array, if I want to extract ONLY the SECOND column (in this case the THIRD value because an array index always start at `0` index) that will give me an output `[1, 0, 3]`, I will use `.map`.

The way it works is, by looping the `matrix` using `.map`, it will return each array that I called it as `element`, and return the value of each `column` from the array using `element[column]`.

This is the JavaScript solution 
```javascript
function extractMatrixColumn(matrix, column) {
    return matrix.map(element => element[column]);
}
```

The test case
```javascript
const matrix = [[1, 1, 1, 2], [0, 5, 0, 4], [2, 1, 3, 6]];
const column = 2;

extractMatrixColumn(matrix, column); // [1, 0, 3]
```
Getting started with useReducer Hook!
Tags: react, hook, context, webdev
Published: 2020-12-22 13:26:35

*useReducer Hook is also used for state management!*

-> It is an alternative to *useState*  (useState is built using useReducer)

-> What's the difference between the two?

-> When to useReducer v useState?

Have you ever came across the *reduce()* function in JavaScrpt?

Let us make a contrast between *reduce* and *useReducer* hook.

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


**Syntax**

-> **reducer**(currentState,action)
-> **useReducer**(reducer,initialState)

**Roles**

**action**: Action is a plain JavaScript string or object that contains information. Actions tell the reducer what kind of action to perform and all other fields contain information or data.

**initialState**: defines the initial state of the component.

**currentState**: defines the current state of the component

**reducer**: reducer() function accepts the currentState and action and then returns a new state based on that action
 
*useReducer* hook returns the currentState and the dispatch method.

**dispatch**: dispatch method is capable of accepting an action to execute the code specified in the render function i.e. it accepts the action and transfers it to the reducer function.

Now, let us have a look at our code!

First of all, let's make the *reducer()* function and initialize an *initialState*.
**Note**: initialization of *initialState* and *reducer()* is always made outside the functional component.

![reducer fnction](https://dev-to-uploads.s3.amazonaws.com/i/dueqdh4c0fk8no2oxqvz.JPG)

Now let's make use of the *useReducer* hook.

Call a *useReducer* hook inside the functional component and pass *reducer* and *initialState* as arguments in it. 

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

let's have a look at the complete code:

![complete](https://dev-to-uploads.s3.amazonaws.com/i/urv0wbs6k06ziksqqfyx.JPG)


Following is the output for the above code,

![output](https://dev-to-uploads.s3.amazonaws.com/i/fmcvwnvp5ocv1dlo89tp.JPG)

*We will see two more ways to use* **useReducer** *hook in the upcoming posts*.
*Stay Tuned!*

*Happy Coding!*

*Thank you!*

*-Jayant Khandelwal*
Website JS Help
Published: 2020-12-22 13:17:55

---
title: Website JS Help
published: true
description: 
tags: 
//cover_image: https://ibb.co/hKBWY7m
---

Hi, 

I'd like to achieve something like this on my website. When the cursor hover over text, an image appears. One thing I don't understand is how do you make the image look like this. Hover on text on the footer.

https://angelamilosevic.com/?ref=uijarcom
Web Scraping with Ruby
Tags: ruby, webdev, tutorial
Published: 2020-12-22 13:15:03

Hi guys 👋, 

I spend the last week writing a super in-depth Ruby web scraping guide.

I show step-by-step how to build an indeed.com scraper using Ruby. 

[You can find the article here](https://scraperbox.com/blog/web-scraping-with-ruby)

Any feedback would be appreciated! :)
Mehrere Schreiber: wp-login.php vor Brute-Force Angriffen sichern
Tags: wordpress, htaccess
Published: 2021-01-03 21:43:44

---
title: Mehrere Schreiber: wp-login.php vor Brute-Force Angriffen sichern
published: true
date: 2020-12-22 13:13:00 UTC
tags: Wordpress,htaccess
canonical_url: https://j0e.org/wp-login-sichern/
---

![WordPress wp-login.php schützen](https://j0e.org/wp-content/uploads/2020/09/wp-login-schutz.png)

 In den letzten Monaten ist es echt schlimm mit den Brute-Force Angriffen geworden. So richtig …

[Mehrere Schreiber: wp-login.php vor Brute-Force Angriffen sichern Weiter Lesen »](https://j0e.org/wp-login-sichern/)
Challenges of a Junior Developer
Published: 2020-12-22 13:03:27

I think we can all agree on that imposter syndrome hits even the best of the developers, It is just challenging, And the other thing is not knowing what you are supposed to learn first, The fear of asking what you think is "stupid questions", They keep saying there is no stupid question...but is that really true, The fear of pointing out the methods that works for you, because well, I think you should trust your leaders. Methods they use they have been using long before you, And the COVID19 regulations are not making it easy at all. Everyone is working from home, Who is going to mentor you hold your hand and show you.
I sat there the whole day looking at a  code written by over 6 different people and thinking...'maybe coding is not for me'. 

Luckily I have a good leader, he kept saying "Its okay if you don't understand , I don't expect you to understand everything so quick"."可以慢慢来"。 In my mind I just wanna feel useful. I wanna work. I want to do something, give me something to do, Ask me to change a textbox, a label, ask me to change the color...anything. 

I had a talk with my mentor I told him to make use of me, I told him to give me something to do, anything, I said even If I get it wrong its okay just give me something. He did, well...I didn't understand anything, I called him on Teams and we did it together. We changed 3 lines of code but I understood a whole lot more than that. 

I realized that if I could sit with this guy when he's doing this I could understand much better, well not just him. The rest of the team...But people are busy with deadlines and some going on leave...Which I understand...but still, I also want to do my own projects soon. Well...Udemy...is family...and YouTube is a friend.

I don't know...But if you can give advise please do. What am I doing wrong? and what can I do different. How else can I better this situation?
System Design Basics: Getting Started With the Client-Server Architecture
Tags: technology, programming, systemdesignintervie, architecture
Published: 2020-12-22 13:22:13

---
title: System Design Basics: Getting Started With the Client-Server Architecture
published: true
date: 2020-12-22 13:02:58 UTC
tags: technology,programming,systemdesignintervie,softwarearchitecture
canonical_url: https://towardsdatascience.com/system-design-basics-getting-started-with-the-client-server-architecture-b02f9c9daae8
---

[![](https://cdn-images-1.medium.com/max/2600/0*vfToqLq03qmw45MG)](https://towardsdatascience.com/system-design-basics-getting-started-with-the-client-server-architecture-b02f9c9daae8?source=rss-577e2119c7f2------2)

###Client-Server architecture
Client/server architecture is an important concept for system design newbies. You may think it like the foundation of how the modern internet works. Nowadays, digital devices like computers, laptops, mobile devices are everywhere. Client-server architecture is the foundation of knowing how these computers talk to one another.

What do client and server mean in the client-server model? For simplification, we may say that a client is a machine that requests some data or service. And the server returns some service or data to the client. Servers listen to the incoming network requests. So, the client-server model is a modern system designed in such a way that clients request data or service from the server, and the servers provide data or service to the client.

Now we may check how this architecture works with an example. For example, what happens when we type www.medium.com in our browser and press the enter button. The client device, our own laptop or computer, does not really know what the medium.com URL means. The browser needs to communicate with the server machine where the medium URL is located.

The users who type a specific URL in this system are clients. The server provides information through the internet. So, these computers can be in different parts of the world.

A specific set of rules are needed for the interaction of two systems. The most popular are the HTTP and HTTPS.

The client computers request the required information from the server. That could be in any structure of formatted data. Mainly implemented and popular formats are in XML and JSON. Server and client request and respond mostly using these formats.

Now, we are going a bit into detail into what happens after the user types a URL in a browser. How does the browser know where the server is located? The browser performs a DNS query.

[Continue reading on Towards Data Science »](https://towardsdatascience.com/system-design-basics-getting-started-with-the-client-server-architecture-b02f9c9daae8?source=rss-577e2119c7f2------2)
If you don't have a medium account check [this link](https://towardsdatascience.com/system-design-basics-getting-started-with-the-client-server-architecture-b02f9c9daae8?sk=d186470a4df5355b9f405010e8c4150e)
Daily Developer Jokes - Tuesday, Dec 22, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-12-22 13:00:02

---
title: "Daily Developer Jokes - Tuesday, Dec 22, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20Dec%2022%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258ca137e1.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why was the computer freezing?

___A:___ It left its Windows open!
 -->
Head start CSS Positions with examples
Tags: css, html, beginners
Published: 2020-12-22 12:52:44

If you are frontend developer, know to position elements with css is critical knowledge. CSS have 5 position types, I will try to write a small example with each of them.

Every CSS Position example use the following HTML structure
```html
<main>
	<div class="card card-1">
		card 1
	</div>
	<div class="card card-2">
		card-2
	</div>
	<div class="card card-3">
		card-3
	</div>
</main>
```

##static 

Static is based to document flow and is by default for elements, every element will be position based in the document flow.

{% jsfiddle https://jsfiddle.net/danywalls4/xdmynj0a/31/ result,html,css %}


## relative
The element can be moved relative to his current position, using use top, left right and bottom. 

Example: Move the current card 50px from left, it takes his current position as reference.
{% jsfiddle https://jsfiddle.net/danywalls4/xdmynj0a/33/ result,html,css %}


## absolute
The element jump from the normal flow but without break other elements positions, you can move everywhere because it as reference the body as default.

Example, the main have a size like 250px and `.card-3` with absolute position is top 0 it will get out from parent.

{% jsfiddle https://jsfiddle.net/danywalls4/xdmynj0a/48/ result,html,css %}

If want to move close to parent, set the position the use relative or absolute to parent.

{% jsfiddle https://jsfiddle.net/danywalls4/xdmynj0a/49/ result,html,css %}

The .card-3 keep the position related to the parent, but the .card-3 is over .card-1 how to move card-1 to top ?

The z-index help us to move element over elements, just set a higher value and move it to the top.

{% jsfiddle https://jsfiddle.net/danywalls4/xdmynj0a/51/ result,html,css %}

## fixed

The element with position fixed it jump from normal flow but is relative to the viewport, 

Example: You want to have a message on top or modal don't care if the use scroll page is a use case.

First increment body height to 150vh and set position fixed to main and top:100px from top, don't care use scroll the main with position fixed it will stay.

{% jsfiddle https://jsfiddle.net/danywalls4/xdmynj0a/53/ result,html,css %}

## sticky
The element with position sticky keep the position relative to the user scroll position. 

Example: The card with position sticky inside the main will keep his position his container is visible.

{% jsfiddle https://jsfiddle.net/danywalls4/xdmynj0a/60/ result,html,css %}

## That's it!
This is a quick overview of position in CSS, I hope example to help you to understand a little CSS positions.
Advent of code - Day 21
Tags: javascript, typescript, adventofcode
Published: 2020-12-22 12:37:51

Are you participating in the [Advent of code](http://adventofcode.com) this year?

If you don't know what the advent of code is, it's a website where you'll find a daily challenge (every day it gets harder). It's a really fun event, you should participate!

I try to solve the exercises using either JavaScript or TypeScript and will share my solutions daily (with one day delay so no one can cheat!). I only share the solution for the second part.

______________

Thank you for the break after Day #20 horrors 🙏
This one was clear, easy to work with and just challenging enough for a Monday!

Part 2 was actually free if you anticipated a little bit while doing the first part, so after reading the subject, it only took me 30 seconds to adapt the return value (since I already knew which allergens and ingredients were linked).

Anyway, here is my solution for day #21:
```js
const lines = input.split('\n').map((line) => {
    const [_ingredients, _allergens] = line.split(' (')
    return {
      ingredients: _ingredients.split(' '),
      allergens: _allergens.slice(9, -1).split(', '),
    }
  })

  const allAllergens = Array.from(new Set(lines.reduce((acc, line) => [...acc, ...line.allergens], [])))
  const allIngredients = Array.from(new Set(lines.reduce((acc, line) => [...acc, ...line.ingredients], [])))

  const struct = allAllergens.reduce((acc, allergen) => {
    acc[allergen] = [...allIngredients]
    return acc
  }, {})

  lines.map((line) => {
    allAllergens.map((allergen) => {
      if (line.allergens.includes(allergen)) {
        struct[allergen] = struct[allergen].filter((ingredient) => line.ingredients.includes(ingredient))
      }
    })
  })

  while (true) {
    let found = false

    allAllergens.map((foundAllergen) => {
      if (struct[foundAllergen].length === 1) {
        const foundIngredient = struct[foundAllergen][0]
        allAllergens.map((allergen) => {
          if (allergen === foundAllergen) return
          if (struct[allergen].includes(foundIngredient)) {
            found = true
            const index = struct[allergen].indexOf(foundIngredient)
            struct[allergen].splice(index, 1)
          }
        })
      }
    })

    if (!found) break
  }

  console.log(
    allAllergens
      .sort()
      .map((allergen) => struct[allergen][0])
      .join(),
  )
```

Feel free to share your solution in the comments!

________________________

Photo by [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
Mapbox Cordova plugin for offline maps in hybrid apps
Tags: ionic, typescript, mapbox, cordova
Published: 2020-12-22 12:35:30

cleaned up my #cordova plugin for #Mapbox. Android only for now.
Mainly done to get offline maps in hybrid apps.
Supports overlapping UI HTML elements.
Written in #typescript. Try it here :

https://github.com/dagatsoin/cordova-plugin-mapbox