teleren/devto huggingface dataset:
How to create multiline strings in JavaScript?
Tags: javascript
Published: 2020-12-11 00:00:00

---
  title: How to create multiline strings in JavaScript?
  published: true
  tags: JavaScript
  date: Fri Dec 11 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/create-multiline-strings-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-1b57c0b4007bfd7893f1bf7a32e55360.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/create-multiline-strings-javascript)
  
To create multiline strings in JavaScript, you can use the backticks in JavaScript.

Consider this HTML string,

```js
const htmlStr = "<div><h1>Heading</h1><p>A paragrapgh</p></div>";
```

This string looks super ugly and very hard to read 😱.

Even if we try to make a new line in the above string by pushing the contents to a new line, JavaScript will throw an error because here we are using double quotes to wrap the string.

```js
// This is an error in JavaScript
// You can't do this ❌
const htmlStr = "<div>
<h1>Heading</h1>
<p>A paragrapgh</p>
</div>";

console.log(htmlStr); // Error: Invalid or unexpected token
```

This is where backticks come into play.

All we have to do is switch the double quotes (`""`) with backticks like this,

```js
// Switch double quotes with backticks
// Now you can create strings that strechtes to
// Multi lines ✅
const htmlStr = `
<div>
    <h1>Heading</h1>
    <p>A paragrapgh</p>
</div>
`;

console.log(htmlStr);

/*

<div>
    <h1>Heading</h1>
    <p>A paragrapgh</p>
</div>

*/
```

Now we have a clean, readable string that stretches to multiple lines.

See this example live in [JSBin](https://jsbin.com/kizotoroga/2/edit?js,console).

### Feel free to share if you found this useful 😃.

---
Why learn software fundamentals?
Tags: webdev, career, culture, devops
Published: 2020-12-10 23:48:08

Eric Silverman, CEO and cofounder of FeaturePeek, discusses why it's important for new developers to learn software engineering fundamentals, the things he knew when he got started as a new software developer, and strategies for overcoming impostor syndrome.

Eric's GitHub: https://github.com/eric-silverman

Learn more about FeaturePeek: https://featurepeek.com/
Learn more about the Mintbean developer community: https://mintbean.io/
Monitoring stack for your frontend application
Tags: monitoring, logging, hotjar
Published: 2020-12-10 23:34:01

---
title: Monitoring stack for your frontend application
published: true
description: 
tags: Monitoring, Logging, Hotjar
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/r5rij0y889bhf1zgfn32.png
---

You and your team had been working hard to meet the deadline for launching your app. Now comes the part where you need to analyze the user's behavior. The next step is to iterate on your product to increase your sales or conversion rate. Apart from that, you need to also maintain your application and do bug fixes. To achieve that, we need some proper tools.

I will share with you the monitoring stack which I'm using in my projects. These tools helped me to increased sales and I was able to catch all the bugs in the applications.

### Google analytics

This is the most popular and free digital known out there. It provides you with tracking and understanding of your website. Thanks to it, you know who is visiting your site and where they come from. I use it for tracking the users and analyzing the flows but it has also a ton of other features.

### Hotjar

This is my favorite one. It makes video recording per each visitor to record the user behavior. It is like you can watch users using your website by standing behind their back. Now you have a clear and visual understanding of what is happening on your website. With that knowledge, you know exactly what is preventing the conversion rate. Other features worth mentioning are heatmaps, form analysis, feedback polls.

### Google optimize

A tool that helps you to do AB testing quick and easy. You can set in percentage the ratio for the split test. I used to test our new features measure which brings more revenue or has a better conversion rate.

### Sentry

My go-to monitoring and error tracking application. Without that, I won't be able to identify issues in realtime. Also, it can give you error traceback so it makes it easier for debugging.

### Logentries

This is a log management tool. Sometimes, when sentry is not even enough. You need to dig deeper into the bug, the logs will serve you as a UI search and do some piping

### Drift

This is your live chat tool for support and sales. Many of you know Intercom as an alternative. But Intercom can be quite expensive and that's is why I prefer Drift which offers the free version.

### Conclusion
These tools can give you a better understanding of your product. Where the goal is to figure out the weak points to improve them and to achieve your goals. I would definitely tell you to use some of these tools. By having these insights, it can save you money and development time.

What is your monitoring stack? Are there any other tools worth mentioning? Drop me a comment on what you are using in your company.
How do you test your code?
Tags: testing, specification, codequality
Published: 2020-12-10 23:20:59

Hello, everyone!

I am sometimes tired to write a specification.
I am also tired to write a test code.
Don't you think so?

# SpecTest

That is why I setup a test system that I named **SpecTest**.

Look at the following site.

https://kray-g.github.io/kinx/

This is published as a specification of my scripting language, but it will also become a test code as is.

This means that to write a specification with **examples** is that you can get a test code.

In almost all cases, there are many examples when people write a document.
SpecTest will test those examples as is.

# What do you get?

There are 2 good points for developpers.

1. Reduce your cost for creating 2 different documents . All you have to do is to create just 1 document.
2. You can check if your examples you write in a document is correct. Sometimes there is an example which does not work correctly in the world.

If you think it is good, push a star on Github. It will make me happy. :smile:

And also any pull request, issue, or suggestion will be welcome anytime.

Thanks for reading this article until the end.

See you!
Simple but powerful Coding Practices that you can adopt immediately: Consistent naming conventions
Tags: swift, ios, cleancode, bestpractices
Published: 2020-12-10 23:20:12

I already wrote about naming conventions in a [past article](/blog/simple-but-powerful-coding-practices-that-you-can-adopt-immediately-naming-and-dry) but I wanna explore a little more because I think this topic is very important for every developer.

## The "One word per concept" rule

Consider the following code:

```swift
class UserManager {
    func getData() { ... }
}
class CategoryController {
    func requestData() { ... }
}
class PostStore {
    func retrieveData() { ... }
}
```

Can you see any difference between `get`, `request`, and `retrieve` in such a scenario?
And how about the `Manager`, `Controller`, and `Store`? What is the essential difference between them?

Essentially they are all the same and you must stick with just one word for each concept in the whole project to create a consistent naming throughout the project. Let's refactor it:

```swift
class UserStore {
    func getData() { ... }
}
class CategoryStore {
    func getData() { ... }
}
class PostStore {
    func getData() { ... }
}
```

Using the same word for each concept will save you tons of time for thoughts like "should I call `get` or `request` function now?". Time is money, you know!

## Don't confuse the reader

You are a reader from your own code. In fact, as developers we are constantly reading old code to write new code. And if you're not working alone on the project, you have other developers who constantly read your code as well.

As authors, our goal is to write code that is easy to read and understand code all the time.

> **We want our code to be a quick skim, not an intense study**. - Robert C. Martin

Using the same term for two different purposes is essentially a pun and can lead the reader to confusion:

```swift
class UserStore {
    var users = [String]()

    func add(user: String) {
        users.append(user)
    }
}
class CountStore {
    var counter = 0

    func add(value: Int) {
        counter += value
    }
}
```

Two classes with an add method. Consistent name with different results. The first one is used to append a `String` to a list (Array) of Strings. The second one is used to sum the value with another existing property value. This is bad.

## Know your readers

The people who will read your code will be mainly developers. So go ahead and use computer science terms, algorithm names, math terms, and so forth to name things.

The `LoginViewModel` is easy to understand by any developer who is familiar with the view model pattern. The same is valid for `Service`, `Controller`, `Interface`, etc.

If you are just starting in this industry you can easily find [ lists of common words](https://www.wholewhale.com/tips/developer-terms-glossary/) in our universe.

## Conclusion

Naming things is quite difficult but it is a very necessary skill for any developer. Experience makes it easier over time but we always need to try to get out of the comfort zone and improve this essential skill.
Day 274 : Good Times
Tags: hiphop, code, coding, lifelongdev
Published: 2020-12-10 23:08:16

_liner notes_:
- Professional : Had a lot of meetings today so I didn't get as much coding in as I would have liked. I was able to demo a couple of sample apps I made. After my meetings, I got to help out with a meetup in London. A lot of cool talks and met some cool people. Good times.

- Personal : Last night I was able to get the archive functionality working. Had to add some more code to the front and back end. There was more than I originally thought. Then I set up the webhook and got it working Fell asleep watching an episode of "Legion".

![Forest in the middle of mountains with a waterfall in Yosemite, CA, United States](https://dev-to-uploads.s3.amazonaws.com/i/5z169n9bgarldjyujys6.jpg)

Tonight, I want to work on getting the link that comes back from the Vonage Video API and use it to upload to Vimeo and YouTube. YouTube may be more of a challenge because of the way authentication works and having to download the video first in order to upload it. Vimeo allows for uploading from a link to a video, so that's less hoops to jump through. If I can get that working early enough, I want to watch an episode of "Legion". Getting to work.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube R8YYTBnFkY8 %}
Java 16 - Open with Power
Tags: java
Published: 2020-12-10 23:01:07

---
title: Java 16 - Open with Power
published: true
description: We look into what's new in java 16.
tags: java
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/wf061vayp1ve6wucguw5.jpg
---

{% youtube 377pt59n0XM %}

We look into what's new in java 16.
NativeScript plugin build: Error: The server returned unexpected response
Tags: nativescript, plugin
Published: 2020-12-10 22:53:14

Just in case your `tns plugin build` command ever returns 

```
"Error: The server returned unexpected response: "
```

you should try to append `--log=trace` (in full command: `tns plugin build --log=trace`) to find out what is going on.

In my case, I had a conflicting config in my `.npmrc` file and the server configured in there returned a HTTP 401 .

Removing that `.npmrc` helped me to run my builds again. Finding it took 30mins of my evening...

Hope you found this earlier and that it helps you ;-)
Event Delegation
Published: 2020-12-10 22:14:22

   Event Delegation was something introduced to my vocabulary whenever I was trying to create a calculator. Essentially it is a way to create one handler that reacts based off the event.target. 

   Here I created the eventListener on the common parent for all of the targets that this click might apply to. From here you are able to capture the clicked element by checking the event.target. Then you can use something like an if statement to specify what happens depending on what target was found. 

```
   $buttonsContainer.addEventListener('click', event => {
      if (event.target == $clearButton) {
         clearScreen()
      }
})
```

   Something to take note of when working with event delegation. Lets say you are working with a 'ul' and thats where your eventListener is setup. You then write different conditionals for all of your 'li's to trigger certain effects. The problem arises when the 'li' has a child element. If you were to click on this child element it wouldn't recognize the conditional set to its parent. 

   In order to account for this in your code you could use the attribute .closest('li'). You also want to make sure that the 'li' you found using .closest is within the correct 'ul'. In order to accomplish this you can use .contains(), which would look something like $myUl.contains(the closest 'li' I found). 

  Overall event delegation is very useful if you are trying to listen for events on multiple elements of the same parent. It will save you quite a bit of memory if you only have the single event listener on the parent, compared to putting an event listener on each individual child element.
Debugging The Brain - Why I Became A Software Engineer
Published: 2020-12-10 21:09:47

From a young age, I have had a keen interest in technology. Nothing commanded my attention like the opportunity to tinker with the inside of a desktop computer or contemplating the inner workings of a video game. By the time I had reached college age, I had two brothers who were already in the greater tech industry; one a mid-level software engineer and the other an IT systems administrator. After picking their brains I decided to pursue IT as well, a decision aided by the fact that I already had extensive experience managing hardware and troubleshooting. In a short time, I secured an IT internship. A year after, I was promoted to a full-time position as a Junior Sys Admin.

My time as a sys admin was enlightening and enjoyable. I felt that IT was the foundation upon which to continue building my career; that is, until an anomaly captivated me. Enter Windows PowerShell.

The company I worked for used Azure as an active directory. As such, I was introduced to the ability to manage the Office 365 suite by scripting via PowerShell. Scripting was an eye opener for me. Suddenly, I was enraptured in a level of challenge and satisfaction that I had not experienced before and I was hungry for more. 

Over the following months, I had followed this newfound rabbit hole to its end. With some direction from my peers, I found myself learning web development on the side. After finishing an introductory course on HTML, CSS, and JavaScript through Udemy, I had discovered my new career path. Today, I am enrolled in Flatiron School's software engineering bootcamp, eager for my future in programming.
Don’t share constants between production and test code
Tags: goodpractices, testing
Published: 2020-12-10 20:42:53

---
title: Don’t share constants between production and test code
published: true
date: 2020-12-10 20:40:17 UTC
tags: goodpractices,testing
canonical_url: https://le0nidas.gr/2020/12/10/dont-share-constants-between-production-and-test-code/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fki7n9txyj0m40qlpfhs.png
---

Building upon my [previous post](https://dev.to/le0nidas/your-tests-can-also-be-your-documentation-583b) and the trick of being specific in the values the code respects, one pattern that I’ve noticed which can easily lead in many false positive tests is sharing a constant value between production and test code.

If the test code reads the value from the production, any change that was done by mistake will not affect the test which will continue to pass!

#### 21 yeas of age

Lets say that we have two services, one checks if a customer can enter a casino and the other if she can buy alcohol. For both cases the law states that the minimum legal age is 21 years old.

The code has a configuration file, a domain and two modules for each service:

{% gist https://gist.github.com/le0nidas/1465bb55a3ad3df85b3a4ba309b00d2a %}

As you can see the tests consume the minimum age directly from the production code but the test suite passes, life is good.

Then one day, the law changes and the minimum legal age for entering a casino drops to 20 years! Simple change, not much of a challenge for the old timers so the task is being given to the new teammate who does not know all modules yet and is also a junior software engineer.   
She sees the test, changes the value in the name to 20, sees the config, changes the constant’s value to 20, runs the test suite, everything passes, life is good! Only that it isn’t because the casino’s software now allows selling alcohol to 20 year olds!

#### Keep them separate

If the test code did not use the production’s code

{% gist https://gist.github.com/le0nidas/db0e56b65aa311b7a045e68807f66784 %}

then, after changing the constant’s value, the test suite would fail alerting the software engineer that something has broken forcing her to figure it out and craft another solution.
Glassmorphism Card with CSS
Tags: codepen, css, html, uiweekly
Published: 2020-12-10 20:33:43

{% codepen https://codepen.io/FlorinCornea/pen/gOwwybX %}

_Inspired from [Shounak's](https://dev.to/dasshounak) [article](https://dev.to/dasshounak/glassmorphism-login-form-with-pure-css-3fb1)_
AzureFunBytes Episode 23 - @AzureFunctions with @deanbryen
Tags: serverless, azure, beginners, tutorial
Published: 2020-12-10 20:13:08

[Azure Functions](https://cda.ms/1Sm) is a serverless solution that allows you to write less code, maintain less infrastructure, and save on costs. Instead of worrying about deploying and maintaining servers, the cloud infrastructure provides all the up-to-date servers needed to keep your applications running. 

This week I am once again joined by [Dean Bryen](https://twitter.com/deanbryen) this week to discuss the benefits of using Azure Functions for your application. We'll discuss the reasons behind choosing a serverless solution over maintaining a VM or containers.

{% youtube jNB8IZVvp_Q %}

Learn about Azure fundamentals with me! [Microsoft LearnTV](https://docs.microsoft.com/learn/?WT.mc_id=devops-11779-jagord)! The most interactive way to join the show! 

Live stream is available on Twitch at 2 pm EST Thursday. You can also find the recordings here as well:

https://twitch.tv/azurefunbytes 
https://twitter.com/azurefunbytes
https://aka.ms/jaygordononyoutube

[Introduction to Azure Functions](https://cda.ms/1Sm)
Quickstart: [Create a JavaScript function in Azure using Visual Studio Code](https://cda.ms/1Sg)
Microsoft Learn: [Create serverless applications](https://cda.ms/1Sh)
Microsoft Learn: [Azure Fundamentals](https://cda.ms/1Sj)
Microsoft Azure: [$200 Free Credit](https://cda.ms/1Sk)
A Case for snake_case
Tags: programming, codequality, javascript
Published: 2020-12-10 20:01:07

The common naming convention in many languages I've used over the years has been camelCase. I've come to expect it and find other forms ugly or impractical. However, I only recently thought critically about it. It turns out there was a better alternative the whole time that works for more people in more places in more cases.

Let's start with the downsides of snake_case:

* Looks blocky
* Increases width of multi-word names
* Uses more characters
* Can be ambiguous when to capitalize letters

But the upsides are a bit more compelling IMO:

* Easy to read by everyone, not just programmers. [Related Study](https://ieeexplore.ieee.org/document/5521745)
* Words can be capitalized based on their domain rather than to separate them. e.g. `is_HTML_valid`
* Valid identifier in every practical programming language I'm aware of (unlike spit-case)
* Doesn't cause problems when variable name needs to be put in case-insensitive contexts like urls or file names

The only reasons I can think of to not switch my style completely to snake_case are the divergence from standard styles of my language communities and the associated linters. 

I'm willing to bet that the RustLang community had similar thoughts and that's why they took snake as the standard. Good on them!
Black Devs & Mentorships ⁠⠀
Published: 2020-12-10 19:58:57


⁠
(although I dislike Race-based situations) There’s an increasing number of black people who look like me in the CompSci Industry, but those numbers still aren’t what I would love to see. It can be important to have mentors that understand and can really relate to what you are experiencing. It was nearly impossible for me to find that kind of person; someone that looks like me that I can see myself in.

So, I really want to be that person for others.⁠⠀
⁠⠀
For those young, black aspiring professionals -if you message me, I’ll get back to you right away and answer any of your questions about anything and everything that I can share. Hit me up!
How to Print in Python without using a new line
Published: 2020-12-10 19:56:32

Coming from working in another language, it’s a common question to wonder how to print two or more variables or strings on the same line using Python. Note that how the print function works in Python3 is different to how it works in Python2, so we will take a look at both in this article. If you’re only interested in one or the other, you can skip straight to the relevant sections using these links:

## How to print with no newline using Python 3
By default, the print() function in Python defaults to ending with a new line. For example, if you were to run:

`print("My 1st String"); print ("My 2nd String")`
The output would be:

`My 1st String
My 2nd String`

But what if we want the output to look like this:

`My 1st String, My 2nd String`

In Python 3.x we can use the ‘end=‘ parameter in the print function. By default the end parameter uses ‘\n’ which is what creates the newline, but we can set a different value for the end parameter. This tells it to end the string with a character of our choosing rather than ending with a newline. For example:

`print("My 1st String", end=","); print ("My 2nd String.")`
This results in:

`My 1st String, My 2nd String.`

You can also use this in a loop. For example, if we wanted to count to 10, but place ever number on the same line, separated with a ‘.’ we could use:

`# python print on same line without space
for i in range(1,10):
    print(i, end='.')'
This results in:`

`1.2.3.4.5.6.7.8.9.`

If you wanted a space between the numbers rather than a ‘.’ then you can change it to:

`# python print on same line without space
for i in range(1,10):
    print(i, end=' ')`
This results in:

`1 2 3 4 5 6 7 8 9`

##And now with Python 2.7
Python 2.x works differently in that there is no ‘end’ option. Instead, in order to place the output of two print statements onto the same line using Python 2 and then you simply add a comma after the first statement. For example:

`print "My 1st String,",
print "My 2nd String"`
This results in:

`'My 1st String, My 2nd String'`

Now you know how to print in Python without newline! And also how to print to a newline! Happy coding! 

This article was originally posted on https://buildvirtual.net