teleren/devto huggingface dataset:
Commenting in JavaScript
Tags: javascript, webdev, beginners, career
Published: 2020-11-15 12:52:47

---
series: JavaScript For Total Novice or Beginners.
title: Commenting in JavaScript
published: true
description: commenting in Javascript, multiple lines commenting, block commenting in javascript. 
tags: JavaScript, webdev, beginner, career
//cover_image: https://direct_url_to_image.jpg
---

Welcome to this lesson, in this lesson, we will talk about commenting in JavaScript.

# What are Comments? 

Comments refer to lines or blocks of inexecutable expressions or explanation about some certain piece of code. 

There are so many reasons to comment your code but below is the basic reason:

It explains the part of the code that may be difficult for fellow developers to understand or for the owner of the codebase to remember its uses after leaving the codebase for a while.

How to use comments in JavaScript?

# Single line commenting

Single line comments start with double forward slashes. Anything written after the double forward slashes will not be executed by JavaScript. E.g 

```js
//call function tick every second.
setInterval(tick, 1000);
```

Or you can put the comment by the side of the code like below:

```js
let name; // declares name
name = "Ayobami"; //the value of name is set to Ayobami
```

This takes us to multi-line comments.

# Multi-line commenting or Block-commenting

What are multi-line comments?

Multi-line comments are written between a star-forward slash and a star-forward slash as in below:

```js
/* Get the element with its id and 
set its content to 5 */
const element = document.getElementById("id");
element.innerHTML = 5;
```

Viola! We are done with commenting.
See you in the next lesson!


# One more thing

Are you having difficulties to learn and understand JavaScript and build projects with it? ***JavaScript for a Total Novice*** teaches JavaScript and Project Making Fundamentals with simple illustrations and examples that make everything so easy. You can now handle any difficult projects without fear.

Don't trust me, get a free previous to judge by yourself: https://bit.ly/3o3TMyg
4 Python automation modules
Published: 2020-11-15 12:33:26

Hello!

Recently I read the book 'Automate the boring stuff with Python'. For me the most interesting content of the book are several useful Python modules. I want to share a few with you:

1. Selenium module
With this module you can control your browser by programming clicking links and filling in information into forms. One important use case of selenium is the test automation for web apps.

2. BeautifulSoup4 module
The beautifulSoup module has functions for extracting information from an HTML page. You can find and select certain HTML elements with it.

3. Openpyxl module
With this module you can create, change and delete Excel files and those of the format xlsx/xlsm/xltx/xltm. This is very useful for saving time, as you can change thousands of cells automatically.

4. Pyautogui module
This module can simulate keypresses and the different actions of the mouse. You can execute all the possible uses of the mouse like double-click, scrolling or dragging something.

Which Python modules for automation purposes do you like or use? Have a nice day. :)

📚Sources:
'Automate the boring stuff with Python' by Al Sweigart
How to get motivated
Tags: productivity
Published: 2020-11-15 12:29:47

Hello! I failed my final law exams in the first try. Why? Because I didn't know how to motivate myself for something that I don't like. Fast-forward 8 years I am now studying Software Engineering and can even motivate myself to learn for the boring Business lectures. ;-) What is different now?

First of all, I am very interested in learning everything about Computers and programming. And I know that to be a successful Software Engineer you should give your best in all of the subjects. Also I know that a lot of people can't even afford to study, let alone going for two study programs. I feel grateful for my opportunities and think that I should make the best out of it.

The next important part is my health. During my law studies I didn't take care of my nutrition and this lead to a lot of tiredness. Now I try my best to eat what I need to feel energized. Another helpful tip I read about is to start small. A lack of motivation can be the result of being intimidated by that big mountain in front of you. You need little portions of success to get the ball rolling. Cut the road into pieces and start small, and learn for example for 10 minutes.

The last tip I want to share is to imagine the outcome that you would have if you didn't do your task. If you have trouble learning think of yourself failing the exam or getting bad grades. On the flipside you will receive good grades when you learn. Which tips for motivation do you want to share? Have a nice day. :)
HTTP vs. Websockets
Tags: webdev
Published: 2020-11-15 12:28:37

Good morning! Whats the difference between a Websocket connection and an HTTP connection?

A WebSocket enables a bidirectional communication that can send the data between the client and the server by reusing the established connection channel, meaning the connection doesnt get closed. In contrast when you use an HTTP connection you have a unidirectional communication and after each response to a request the HTTP connection gets closed.

Bidirectional means, that either the client or server can send messages to the other party, while in HTTP, the request is always initiated by the client and the response by the server. Websockets also enable full-duplex communication, which implies that the client and the server can send data to each other at the same time.

Websockets are used for example by chat apps and games. The HTTP protocol is used by RESTful APIs. If you need an explanation for REST Apis, check out my video:

www.youtube.com/watch?v=BkfNHbD2Nx4

Have a nice Sunday! :)
LeetCode Problems 11-20
Tags: java, javascript, python, leetcode
Published: 2020-11-15 12:13:33

---
title: LeetCode Problems 11-20
published: true
description: LeetCode problems from 11 to 20
tags: [Java, JavaScript, Python, LeetCode]
cover_image: https://assets.leetcode.com/static_assets/public/images/LeetCode_Sharing.png
---

Howdy happy people :wave:! In the [previous post](https://dev.to/ani03sha/leetcode-problems-1-10-19im), we looked at the first ten problems from LeetCode.

In this post, we will continue to make ourselves better by looking at the next ten problems.

[11] [Container With Most Water](https://redquark.org/leetcode/0011-container-with-most-water)
[12] [Integer To Roman](https://redquark.org/leetcode/0012-integer-to-roman)
[13] [Roman To Integer](https://redquark.org/leetcode/0013-roman-to-integer)
[14] [Longest Common Prefix](https://redquark.org/leetcode/0014-longest-common-prefix)
[15] [3 Sum](https://redquark.org/leetcode/0015-3-sum)
[16] [3 Sum Closest](https://redquark.org/leetcode/0016-3-sum-closest)
[17] [Letter Combinations Of A Phone Number](https://redquark.org/leetcode/0017-letter-combinations)
[18] [4 Sum](https://redquark.org/leetcode/0018-4-sum)
[19] [Remove Nth Node From End Of List](https://redquark.org/leetcode/0019-remove-nth-node)
[20] [Valid Parentheses](https://redquark.org/leetcode/0020-valid-parentheses)

I hope you will find them useful. I have implemented the solutions to these problems in four programming languages - Java, Python, JavaScript and Kotlin.

You can find the complete source code on my [GitHub](https://github.com/ani03sha/RedQuarkTutorials/tree/master/LeetCode) repository. If you like what you learn, feel free to fork 🔪 and star ⭐ it.

Keep practicing... keep coding... stay safe and Namaste :pray:.

<br />
Follow me on [Twitter](https://twitter.com/I_am_Anirudh) to be in touch.
Python Data Structures: Lists, Tuples, Sets, Dictionaries and Compound Data Structures
Tags: python, datastructures, developer, coding
Published: 2020-11-15 12:11:42

##Lists

List is a collection which is ordered.
Lists are mutable (changeable) .
Allows duplicate members
Brackets used to represent: []
Lists are like arrays declared in other languages.

```python
list_of_random_things = [1, 3.4, 'a string', True]
```

```python
>>> list_of_random_things[0]
1
```

##Tuples

Collection of items which is ordered.
Tuples are immutable (unchangeable) .
Brackets used to represent: ()
Only difference between tuples and lists are that lists can be changed.
Tuples are faster than lists as they are immutable.

```python
location = (13.4125, 103.866667)
print("Latitude:", location[0])
print("Longitude:", location[1])
```

##Sets

Collection of Unordered and Unindexed items.
Sets are mutable (changeable).
Does not take duplicate Values.
Sets are unordered, so you cannot be sure in which order the items will appear.
Brackets used to represent: { }.
Sets are not faster than lists however they have a upper hand when it comes to membership testing.

```python
numbers = [1, 2, 6, 3, 1, 1, 6]
unique_nums = set(numbers)
print(unique_nums)
```

output:
```python
{1, 2, 3, 6}
```

##Dictionaries

Key:Value Pair in Python
A dictionary is a collection which is unordered, changeable and indexed.
In Python dictionaries are written with curly brackets, and they have keys and values.
Brackets used to represent: {}.

```python
elements = {"hydrogen": 1, "helium": 2, "carbon": 6}
```

```python
print(elements["helium"])  # print the value mapped to "helium"
elements["lithium"] = 3  # insert "lithium" with a value of 3 into the dictionary
```

##Compound Data Structures

We can include containers in other containers to create compound data structures. For example, this dictionary maps keys to values that are also dictionaries!

```python
elements = {"hydrogen": {"number": 1,
                         "weight": 1.00794,
                         "symbol": "H"},
              "helium": {"number": 2,
                         "weight": 4.002602,
                         "symbol": "He"}}
```

We can access elements in this nested dictionary like this.

```python
helium = elements["helium"]  # get the helium dictionary
hydrogen_weight = elements["hydrogen"]["weight"]  # get hydrogen's weight
```

You can also add a new key to the element dictionary.

```python
oxygen = {"number":8,"weight":15.999,"symbol":"O"}  # create a new oxygen dictionary 
elements["oxygen"] = oxygen  # assign 'oxygen' as a key to the elements dictionary
print('elements = ', elements)
```

Output is:

```python
elements = {"hydrogen": {"number": 1, "weight": 1.00794, "symbol": 'H'}, "helium": {"number": 2, "weight": 4.002602, "symbol": "He"}, "oxygen": {"number": 8, "weight": 15.999, "symbol": "O"}}
```
Maintaining a company culture while working from home?
Tags: discuss, workfromhome, officeculture
Published: 2020-11-15 11:54:29

#Company culture at home.
Has your company switched to remote work?
Have you made any changes to your company culture to fit in with a remote environment?
Do you find your life-work balance has shifted as a result of remote work?

I will start :D.
Our company values our work culture and has spent time supporting us whether with assistance to set up a home office or with increased social interactions 'online'.
We moved out weekly happy hour online and try to spend some time catching up with each other outside of our regular meetings.
A big one for me was encouraging everyone to have their videos on during meetings, it helps you feel like you are talking with colleagues and humans, not just talking to a computer. Even if it means you have to get more formal looking PJ's!
Being at home especially during lockdown has meant that putting in a full work day can sometimes not be so easy, especially with little kids around. Work being flexible and allowing for make up hours in the evenings is a big help.
This one line CSS can centre object easily: Putting end to your Google search
Tags: css, webdev, google, html
Published: 2020-11-15 11:24:12

It's hard to centre thing in CSS. Most of the newbie web dev students face the problem and often search every time when on any project. 
Here is the last and final solution to it. That is centring the object with just one line of CSS code.   
<hr>

**The `place-items` property.**                    
->The `place-items` property in CSS is shorthand for the `align-items and` `justify-items` properties, combining them into a single declaration. These properties have gained use with the introduction of Flexbox and Grid layouts 

First, make sure to set the `display` property to `grid` and then, set the `place-items` property to `centre`.

```css
div {
   display: grid; 
   place-items: center;
}
```

**Ta-Da DONE✨🎉🎉🎊  !!!** 
 
Thanks For Reading. 
> I mostly do my project using this only. I hope you will find this helpful as I did. Sorry if it doesn't work with you. (it will work chill ✨🎉)
Open ID protocol
Tags: auth
Published: 2020-11-15 11:15:47

Authentication is a very important part of any project. The open id is an open standard and decentralized protocol. It allows users to be authenticated by cooperating sites using third party service, eliminating the need for webmasters to provide their own ad hoc login. Open Id is about authentication (ie. providing who you are).

This protocol provides a way for a site to redirect a user somewhere else and come back with a verifiable assertion. OpenID provides an identity assertion.
The most important feature of OpenID is its discovery process. OpenID does not require hard coding each the providers you want to use ahead of time. Using discovery, the user can choose any third-party provider they want to authenticate. This discovery feature has also caused most of OpenID's problems because the way it is implemented is by using HTTP URIs as identifiers which most web users just don't get.

The scenario for use of OpenID:
1) The user wants to access his account on example.com
2) example.com asks the user for his OpenID
3) The user enters his OpenID
4) example.com redirects the user to his OpenID provider
5) User authenticates himself to the OpenID provider
6) OpenID provider redirects the user back to example.com
7) example.com allows the user to access his account.
search for OAuth or OpenID connect which will help you to know more.
You don't have to use Webpack
Tags: webpack, webdev, startup
Published: 2020-11-15 11:12:14

Nowadays, webpack seems inevitable for a web developer.

But for a conventional, i.e., not a single-page application, using webpack can feel awkward because:

- there's no need to have a single JS file: each page is independent and their JS code needs to be isolated.

- there isn't much JS code for a conventional web app. 

As a web developer, I sometimes feel the urge of adding Webpack to our flow but I just can't justify the utility. Don't get me wrong, I have been using Webpack since its beginning for several SPA projects but it just doesn't add any major productivity boost for our conventional web app.

Sure, with the right configuration, Webpack will help writing the code a bit easier but I'd rather spend the setup and config time on adding features that actually bring values for users. This is even more important for a new project where you want to quickly validate the idea.

Our [open-source web app](https://github.com/simple-login/app/) doesn't use Webpack and we never felt the lack of it slows down the development nor affect the code quality.

In fact, we use inline JS and the JS code lives in the [same file](https://github.com/simple-login/app/blob/master/app/dashboard/templates/dashboard/index.html) as the HTML and CSS. That config is nice to work with as you know changes are isolated. In this regard, our page is similar to a VueJS single-file component. And yeah, we use jQuery 😱.

So if you don't find the need of using Webpack in your project and somehow feel shameful about it, don't as you aren't alone!
Running shell commands as sudo using packer
Tags: packer, shell, sudo
Published: 2020-11-15 10:51:24

#Problem Statement:
How do I run shell commands as sudo when creating an AMI using packer.

#Solution:
Create a separate file with your shell script in it, and run that script as sudo.

#Example:
* Create a file you wish to run, for example, if I'm using an operating system that uses [yum](https://wiki.centos.org/PackageManagement/Yum) and I want to update my operating system on launch and then create a folder for my application called *my-app* and assign relevant permissions, I would create a *startup.sh* like so, and save it in the folder where I run packer from:

*startup.sh*
```
sudo yum update -y
sudo mkdir -p /my-app
sudo chmod 755 -R /my-app
```
* Then I create my [packer.io](https://packer.io) config file like so (I'm using [AWS](https://aws.amazon.com) for this example, so I've pre-setup a VPC, subnet and IAM role to run this):

*builder.json*
```
{
    "variables": {
        "base_ami": "ami-xxxxxxxxxxx"
    },
    "builders": [
        {
            "type": "amazon-ebs",
            "region": "eu-west-1",
            "source_ami": "{{user `base_ami`}}",
            "instance_type": "t2.micro",
            "ssh_username": "ec2-user",
            "ami_name": "my-ami {{timestamp}}",
            "vpc_id": "vpc-xxxxxxxx",
            "subnet_id": "subnet-xxxxxxx",
            "iam_instance_profile": "MyAwsServerRole"
        }
    ],
    "provisioners": [
        {
            "type": "file",
            "source": "startup.sh",
            "destination": "~/startup.sh"
        },
        {
            "type": "shell",
            "remote_folder": "~",
            "inline": [
                "sudo bash ~/startup.sh",
                "rm ~/startup.sh"
            ]
        }
    ]
}
```
* Once I've setup my *startup.sh* script and my *builder.json* configuration, I validate them and then run the script. 
```
packer validate builder.json
packer build builder.json
```
* This packer config file creates an instance, copies the *startup.sh* file over to the home folder of the user on the instance, runs the script as *sudo* and then deletes the *startup.sh* file (to clean up).
Using the "tab" button with linux to autofill.
Tags: linux, ubuntu
Published: 2020-11-15 10:21:47

One of the great shortcuts when working in the linux terminal is using the "tab" button to autofill in the directory/file you want to navigate too. 

Enter "ls" , then press the first letter of directory/file you want to go to and hit the "tab" button, this will autofill the rest.
Or press "tab" button twice to bring up the options of which directory/file are available.

Works wonders on long named directory/files! ...helps against repetitive finger strain! :)
....and also works in the mac terminal too :)
Expose data from Application Insights
Tags: kusto, applicationinsights
Published: 2020-11-15 10:05:18

<sub><span>Photo by <a href="https://unsplash.com/@isaacmsmith">Isaac Smith</a> on <a href="https://unsplash.com/s/photos/graph">Unsplash</a></span></sub>

Application Insights is great for collecting metrics and even traces (even from [Serilog](https://github.com/serilog/serilog-sinks-applicationinsights)).

But now, how can we mine all this data and expose all of this data ?

# Azure DevOps

We can use Dashboard by adding dedicated [Application Insights widgets](https://marketplace.visualstudio.com/items?itemName=ms-appinsights.ApplicationInsightsWidgets). 

Authentication will use API Key.

But it will only display metrics.
It seems impossible to use Kusto query. 

# Power BI

Power BI Desktop without any connector [let you use Kusto query](https://docs.microsoft.com/en-us/azure/azure-monitor/app/export-power-bi#export-analytics-queries) !

You will need to publish it to share the data.

# Azure Shared Dashboard

[Azure Dashboard](https://docs.microsoft.com/en-us/azure/azure-portal/azure-portal-dashboards) let you add tiles from various sources including Application Insights. At first, it seems impossible to use Kusto query, but there is a way [directly from Application Insights](https://docs.microsoft.com/en-us/azure/azure-monitor/learn/tutorial-app-dashboards#add-logs-query) !

# Azure Data Explorer

Azure Data Explorer can display Kusto query, if you have an Azure Data Explorer Cluster.

It can integrate with Power BI (with 2 modes : [Directly](https://docs.microsoft.com/en-us/azure/data-explorer/power-bi-connector) or through [Imported Query](https://docs.microsoft.com/en-us/azure/data-explorer/power-bi-imported-query)), or with [Grafana](https://docs.microsoft.com/en-us/azure/data-explorer/grafana) .


Hope this helps !
Optional Chaining in javascript.
Tags: javascript, node
Published: 2020-11-15 09:56:57

Imagine we have a deeply nested object of level "N" and we want to check the "Mth" level if it exists or not. Let me put an example in front of you.

```
Let customer={
name:'Foo',
cars:{
carOne:'Audi',
carTwo:'BMW'
 }
}
```

If I have to say lets check "carOne" property is present or not in customer object, I can do this,

```
if(customer && customer.cars && customer.cars.carOne) {
// do your stuff
}
```

It's easy, right? 

But if we observe the code above carefully, What we have found?

* Duplicate Code - To check a property exists or not, we are re-writing some conditions of the code again and again. Means some part of the code is executing many times. Thereby increasing code execution time. 
* Longer version - If we are writing multiple conditions to check for a property, The code becomes lengthy and if we skip some validation in between, we can get an error.

```

let customer={
  name:'Foo',
  }

  if(customer  && customer.cars.carOne) { // will result in TypeError:Cannot read property 'carOne' of undefined
    // do your stuff
    }
```

How about we fix this guy into a one-liner statement. And here's the code for your rescue.

```
if( customer?.cars?.carOne ) {
// do your stuff
}

```

Boom!! All your problems just got vanished. 

Here's How.

The expression "?." is called **Optional Chaining** and it's evaluating whether an expression before the "?" statement is **Nullable** and/or **Undefined**. If it is, The whole expression will stop executing, or in a technical term, it's called "Short-Circuiting" and the code execution will just be carried on afterward. 

Benefits?

* No Duplicate code - The optional chaining expression is **not** checking the same condition again and again if it's already been examined. Here's, Kind of continuous chaining is happening. So no object property will be traversed multiple times. Thereby, Saving code execution time.

* Shorter and simplified version - This is of course shorter and easy to read, unlike the vanilla code. As optional chaining is also checking **Nullable** and/or **Undefined** throughout the way, it will not result in "TypeError". In this case, execution still continues.

I hope you find this blog interesting. Until next time, Adios amigos.