teleren/devto huggingface dataset:
Daily Developer Jokes - Monday, Jan 11, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-01-11 13:00:11

---
title: "Daily Developer Jokes - Monday, Jan 11, 2021"
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=Monday%2C%20Jan%2011%2C%202021"
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/5e125905d1ad3.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 do programmers always mix up Halloween and Christmas?

___A:___ Because 31 OCT == 25 DEC
 -->
Let’s Create a Frontend for our e-commerce App with Vue.js
Tags: javascript, java, spring
Published: 2021-01-11 12:37:40

**We are building a complete E-commerce application from scratch. Today we are going to add the Products feature**
![](/api/collection/5948990638522368/5499519291097088/page/6092922659799040/image/5843489464516608)

## Introduction

As part of building an E-Commerce application, previously we built the backend for UserProfiles and created android UI for the same.
Auto Increment using CSS
Tags: html, css
Published: 2021-01-11 12:36:18

I was eager to learn advance css concepts, that made me to know this CSS Counter. This can be helpful knowing, for listing headings and even its sub parts. we have to make a script to maintain the increment order for all the dynamic contents,this made our work easy without a js file.

Let's create a story book View using this Css Counter property. 

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

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

Create a HTML and CSS file for getting a practice to it.

*Css Counter* is a dynamic number incrementer which is used with combination of css pseudo-element.

# Properties for counter

* counter-reset
* counter-increment
* content
* counter() or counters() function

```
body {
  font-size: 1rem;
  margin: 0 auto;
  width: 40%;
  font-family: 'Cormorant Infant', serif;
  counter-reset: heading;
}
```

> counter-reset: creates a counter or resets the counter

```
.table h1::before {
  counter-increment: heading;
  content: "Chapter " counter(heading) ": ";
}
```

> `::` pseudo-element used to define the content along with counter.


> counter-increment: Increments a counter value, by default it increments by one. We can mention the increment value by just adding `counter-increment: heading 2; or any integer instead of 2`



> content: Defines what is prepended to each count item.


> counter: counter () / counters () is the function that adds to an element. Can have two params, first is the name of counter and second is a optional integer.


**Nesting counters**

  We can also nest counters.
```
 .table h1 {
  counter-reset: subchapter;
}
.table h2::before {
  counter-increment: subchapter;
  content: counter(heading) "." counter(subchapter) " ";
}
```

Add the above css to get the nested counter. The code given above will bring the table of contents view. Using this you can try out to bring the second image. 

> Everything has some pros and cons. It is always knowing something new shows the interest to learn. My View on this CSS Property has both perspective, that for a smaller content or just indexing we can use it. To note out the cons, may be use of pseudo-element some may feel it, may cause some accessing difficulties. Thanks !!!.
UnhandledPromiseRejectionWarning: MongoError: Authentication failed
Published: 2021-01-11 12:24:39

Whenever you create a new cluster in mongoDB Atlas and use the connection string for setting up the connection between node.js and mongoDB remember these 2 things:

1. create a new user using Database access option on the left side menu bar and try to use only alphabets in your username and password, because for special characters you need to write something more in a secure manner.

2. replace the <username> and <password> with the credentials which you have created in previous step. Do not use the login credentials here. And remove the <> tag also while replacing.
Share your portfolio if you want feedback! (CLOSED)
Tags: watercooler, portfolio, feedback, tips
Published: 2021-01-11 12:24:39

---
title: Share your portfolio if you want feedback! (CLOSED)
published: true
description: 
tags: watercooler, portfolio, feedback, tips
cover_image: https://www.impactbnd.com/hubfs/8%20smart%20ways%20to%20collect%20customer%20feedback%20%5Binfographic%5D.jpg
---
So I decided to take a bit of a break from coding this afternoon, to relax my mind and create a discussion, where you could share your portfolios and I could give some feedback on what I like and some ideas to improve it.

Keep in mind that these would all be subjective, and coming from an average user. Sorry in advance if I don't reply to someone.

Share your link below, excited to see what you have come up with!
Arrow Functions in JavaScript
Tags: javascript, codenewbie, beginners, computerscience
Published: 2021-01-11 12:21:10

A function is a block of code, self contained, that can be defined once and run any number of times you want. It can optionally accept parameters, and returns one value.
In addition, functions are said to be first class functions because they can be assigned to a value, and they can be passed as arguments and used as a return value.

**pre-ES6 syntax of function declaration:**

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

**Arrow Functions** were introduced in the ES6/ES2015 and are very widely used. It allows us to write functions with a shorter functions. They are particularly nice to use when working with inline functions, as parameters or callbacks.
They cannot be used as constructors. When instantiating an object, they will generate a TypeError.

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

**EXAMPLES:**

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

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

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

Arrow functions allow you to have an implicit return, i.e. you can return values without using the keyword **return**.

###**Benefits of using arrow functions**
1.They make the ' this ' keyword more manageable.

2.They are easier to read and write.

3.We do not need to worry about call, apply, bind and new. They have no effect on arrow functions.

In a normal function, the ' this ' keyword may be bound to different values based upon the context in which the function was called.
Arrow functions use their **lexical scope** for this.

###**Lexical ' this '**
Arrow functions do not have their own ‘ this ’. That’s why they use the ‘ this ’ value of the scope they are enclosed in. This is very useful for Object-Oriented style of programming in JavaScript.

**Normal function using ' this ':**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3llbcqei2s7kp0pprp1p.png)

**Arrow function using ' this ':**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4myqnkv7ujm99j0gyfku.png)

Unlike regular functions, arrow functions do not have their own this. The value of this inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of this in the closest non-arrow parent function.

I hope you found this article helpful. Don’t forget to post your queries, doubts in the comment section below. I will be more than glad to help!

Thank You!
Why you should use Vue.js
Tags: vue, javascript, html, webdev
Published: 2021-01-11 12:17:11

You might have heard about vue.js. People will recommend you to use vue.js to simplify single page application coding. So, how does it actually simplify it?

# How does it actually simplify it

It simplifies it by dividing different parts of app into what we call components. These components have different code; and hence are stored in separate files for compartmentalization of code. Why have all the components in a single HTML file when we can have it in different files. Now what Vue or any other JS framework will do under the hood is it will converge all the components into a single file based on what you need. If you need Login page then you can insert a login page. Then after the user has logged in, you can remove the login page and instead of moving to another page it remains on the same page and just remove the component and updates it with a new component.

# Computation within a component
Now you'll ask that why do we need a JS framework to do that because JS will take a lot more time to render than to simply request a new HTML page.
Here comes the computations that you can do under the hood in the component. You can make dynamic pages. Whenever the user has submitted a form then you can push the new content or remove the previous content of the page without reloading the whole page. Also, you can define several functions that can be performed on the data entered by the user.

# The wonders of state management
Now, you will ask that we can add onsubmit function and we can make a function in normal JS. Then why should we use Vue.js. Here comes the state management.
All components have a state. By state what we mean is the state of an element at that current time. For example: an empty input field, user has pressed submitted button, now on submit we will update the database at the server and on the client side. Over here you can save the data at the place of one component and use that anywhere in your app, in any component. This will lead to update of the data in every component's HTML without reloading the whole page.

Now this will lead to a simpler codebase in the long run if you have to scale the app. Else it will lead to a very long JS file that will be so difficult to understand that after a year you yourself will not understand what you have written. This is from my own experience. I made a single page application that had so many functions that even after naming the functions properly, after a month only I was unable to understand the code myself. And ended up leaving it.

At all, devs love Vue for several reasons. Concluding the discussion, I want to provide you with four key strengths of Vue.js and its community:

1. An easy learning curve with perfect guides for beginners. It’s enough to know a bit of JavaScript and HTML to create your own application with Vue.
2. Great flexibility which facilitates interaction with different libraries and suits different strategies, such as the development of PWAs.
4. Optimal performance that is available thanks to the minimalism of the tool. Actually, Vue.js is even smaller than 20 KB.
What's your New Year Resolution? 🚀🎉
Tags: discuss, productivity, watercooler
Published: 2021-01-11 12:15:57

---
title: What's your New Year Resolution? 🚀🎉
published: true
description: As an annual ritual, I ask you again what's your New Year Resolution.
tags: discuss, productivity, watercooler
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/sb7pegghyp3bns3vbkk4.jpg
---

Holidays allow us to calm down and reflect on ourselves. Self-reflection not only benefits you to achieve your goals but also encourages you to become a heedful person. After reflection comes the resolution to improve on the shortcomings of last year.
 
So like every year, here is the updated New Year Resolution board.

{% github sarthology/ResolutionBoard %}

If want to know how and why this works check [this]({% link https://dev.to/teamxenox/how-i-crushed-all-of-my-2019-resolutions-and-you-can-too-11if %}) article. 

***This Year*** I'm also creating a Notion Template which will be slightly more advance. So If you like the idea and wanted to have early access tweet me [@sarthology](https://twitter.com/Sarthology)

***For the rest of you folks, what's your new year's resolution and why?*** 

![](https://media.giphy.com/media/S2wAes3xRCu4PBFyHB/giphy.gif)
Basic Web Scraping with Nodejs and Cheerio
Tags: learningtowebscrape, axios, cheerio, javascript
Published: 2021-01-29 12:51:10

---
title: Basic Web Scraping with Nodejs and Cheerio
published: true
date: 2021-01-11 12:15:00 UTC
tags: LearningtoWebScrape,Axios,cheerio,Javascript
canonical_url: https://javascriptwebscrapingguy.com/web-scraping-with-nodejs-axios-and-cheerio/?utm_source=rss&utm_medium=rss&utm_campaign=web-scraping-with-nodejs-axios-and-cheerio
---

[Sample code here](https://github.com/aarmora/web-scraping-with-nodejs-cheerio)

Very basic code showing how to web scrape with Nodejs and Cheerio.

https://youtube.com/watch?v=Y8rIcqtgDpw

## Looking for business leads?

Using the techniques talked about here at [javascriptwebscrapingguy.com](https://javascriptwebscrapingguy.com), we’ve been able to launch a way to access awesome web data. Learn more at [Cobalt Intelligence](https://cobaltintelligence.com)!

The post [Basic Web Scraping with Nodejs and Cheerio](https://javascriptwebscrapingguy.com/web-scraping-with-nodejs-axios-and-cheerio/) appeared first on [Javascript Web Scraping Guy](https://javascriptwebscrapingguy.com).
Easiest way to convert HTMLCollection into an Array!
Tags: javascript, node, html, algorithms
Published: 2021-01-11 12:03:02

There are two ways in which you can convert an HTMLCollection or a NodeList into an array.

If you don't know what an HTMLCollection and a NodeList is, or why you would need to convert them into a normal Array, hold tight, I'll explain them soon enough! 🐢

```javascript
// First, pre-ES6 way.
var htmlCollection = document.getElementsByClassName('btn');
htmlCollection = Array.prototype.slice.call(elements);

// Or you could do the same thing using ES6 syntax.
var nodeList = document.querySelectorAll('.btn');
nodeList = [...nodeList];

// Or use Array.from method as suggested by Traek Wells in comments. 😎
var imageHtmlCollection = document.getElementsByTagName('img');
imageHtmlCollection = Array.from(htmlCollection);

// 🎉🎉
```

## What is HTMLCollection and NodeList?

When you use methods like `getElementsByClassName` or `querySelectorAll` they return an HTMLCollection or NodeList respectively instead of an Array.

HTMLCollection contains HTML elements whereas NodeList goes a few steps further, it not only returns a list of HTML elements but can also return Nodes like TextNode and has additional methods list NodeList.forEach.

For a more detailed discussion on the topic, you may read this stackoverflow post called: [The difference between HTMLCollection, NodeList and Array](https://stackoverflow.com/questions/15763358/difference-between-htmlcollection-nodelists-and-arrays-of-objects).

## Why convert them into an Array?

The only reason to convert an HTMLCollection and NodeList to an Array is, if you want to use higher order functions like forEach, map, filter and reduce.

There are a lot of use cases, for instance, let's say you have elements that contain a `data-src` property along with `lazy-load` class. If you want to access the `data-src` and filter out all the elements that don't have `data-src` or are empty, you may do the following.

## Use Case

```javascript
var lazyLoadables = [...document.querySelectorAll('.lazy-load')]
  .filter((element) => element.getAttribute('data-src').trim());

lazyLoadImages(lazyLoadables);
```

By doing this, you made sure only to pass the elements that have a source that needs to be loaded when it is required.
How Time Tracking Software can Benefit Your Remote Business
Tags: productivity
Published: 2021-01-11 12:00:30

The corporate world is well aware of the benefits of time management. As one of the most significant growth metrics, time management enables the company’s management to make wise decisions regarding how every employee will spend time. In today’s challenging and competitive business scenario, good time management has become a need of the hour. 

Thankfully, technology lends a helping hand in achieving this objective effectively in the form of time tracking software. The software can effectively monitor the remote employee’s work and productivity. It is possible to keep a record of hours an employee has spent on the given task. The software can not only assist employees to remain highly productive but also enable the company to meet all the deadlines by streamlining the workflow. 

In this pandemic age, many companies have implemented work from home or remote working practice. In such a situation, time tracking software can play a crucial role in streamlining remote processes and managing time for every activity being done by remote employees. Read on to know the importance of time tracking in remote teams and the role of <b> <a href="https://www.taskopad.com/">task management software</a></b> in time management.   

<b>Also Read- <a href="https://www.taskopad.com/blog/top-seven-tips-to-increase-collaboration-in-your-workplace/">  7 Tips to Enhance Workflow Management to Improve Productivity</a></b>


This Blog is Originally Published On <b> <a href="https://www.taskopad.com/blog/how-time-tracking-software-can-benefit-remote-business/">Time Tracking Software</a></b>
Top Benefits of online ordering systems for restaurants
Tags: android, ios, app
Published: 2021-01-11 11:57:10

Even before the advent of the COVID-19 pandemic, people preferred to place orders online for their favorite dishes. Many diners, especially millennials tend to use technology for accessing various services of restaurants including ordering and table booking. Today, as the world still struggles with the coronavirus outbreak, it is necessary for restaurants and takeaways to integrate an online food ordering system.

It is fair to mention that no restaurant can ignore the trend of online ordering in today’s competitive scenario. Be it eliminating the slightest chance of human errors in order booking or giving your customers a personalized order booking experience, restaurant food ordering software can meet all the objectives effectively while offering your restaurant an edge over competitors.

Let’s make a list of the top seven benefits of restaurant online ordering software.

Top Benefits of Online Food Ordering Systems for Restaurants and Takeaways

More convenience for diners- In today’s fast-paced life, people just want to save time and effort in daily activities including order booking. A readymade restaurant online ordering system not only saves time but also offers the convenience of placing orders in an easy and quick way. With such a comfort and convenience of order booking, your customers will tend to come back again to your restaurants.

Let’s take an example of the US. A survey has revealed that 60% of customers order food delivery or takeout at least once a week online. What’s more, over 30% of all orders are given online in the USA alone. It shows the growing popularity of online ordering.

https://www.suriainternational.com/top-benefits-of-online-ordering-systems-for-restaurants/
Is M1 a good choice for developers?
Tags: mac, m1, applesilicon, apple
Published: 2021-01-11 11:53:19

Being an Apple fanboy I decided to buy the new MacBook Pro M1 when my old Intel model gave up on me. I ended up with the 13" 8GB RAM version. So far it has been a smooth transition apart from a few hindrances. 

🖥️ **No support for two external monitors**

That there is not support for multiple external monitors is stated on Apple's website so it shouldn't be a surprise to anyone. I've always had just one external monitor and have used the MacBook on a dock, so this won't trouble me at all. 

📦 **Homebrew**

Homebrew is one of those tools that without a doubt make your life easier but isn't essential to have. There are ways to make Homebrew work on M1 based Macs, but I didn't bother going through the trouble. 

🐳 **Docker**

Docker offers a beta version for M1 so I decided to download it. At first, it got stuck in the "Docker Desktop is starting" phase but after a simple quit & relaunch it started up nicely. So I decided to deploy a new update to our backend in our QA environment (a deployment in our Kubernetes cluster on GKE) and that's where I ran into the first serious issue. 

🐛 *standard_init_linux.go:211: exec user process caused “exec format error”*

I'm no expert on low-level engineering so I'm not going to pretend that I know exactly what this means but I believe it has something to do with the Docker image being built with a different architecture than the machine trying to run the image. I haven't spent time finding a workaround, so I let my colleague build the backend for me 🤷‍♂️ 

🕸️ **A safety net**

Rosetta lets you run applications using the Intel architecture that eases the transition from Intel to Apple Silicon processors. To enable Rosetta for an app simply right-click the app icon → Get Info → Open using Rosetta. 

📈 **Chrome vs Safari**

I noticed my computer was getting immensely slow so I opened up the Activity Monitor. There I saw Chrome was eating up so much CPU & Memory so I decided to open the same tabs in Safari - the difference was gigantic! I went from barely being able to type to my computer not breaking a sweat. 

**Conclusion**

Everything feels more snappy on the M1 than it did on my previous Intel model that in my opinion makes up for the troubles described in this post. I'm excited about the future of the M chips and how the competitors will answer with this great innovation from Apple. 

Do you own a Mac with the M1 chip? How is your experience so far in terms of compatibility?

Have any questions? Hit me up on Twitter [🐦 gunnarthedev](https://twitter.com/gunnarthedev)