teleren/devto huggingface dataset:
How to create a scroll to top button with JavaScript
Tags: javascript, tutorial
Published: 2020-08-26 07:47:16

Scroll to top buttons allow users to quickly return to the top of a webpage with a single click.

In this tutorial we’ll be creating a button that appears only after scrolling a certain distance down the page.

Let’s start by creating a scrollTop function that will contain all the required JavaScript:

```javascript
const scrollTop = function () {
// all JavaScript will go here
};
scrollTop();
```

Next inside the `scrollTop` function we’ll generate a HTML button element:

```javascript
const scrollBtn = document.createElement("button");
scrollBtn.innerHTML = "&uarr;";
scrollBtn.setAttribute("id", "scroll-btn");
document.body.appendChild(scrollBtn);
```

1. Create a const variable named `scrollBtn` with a HTML button element.
2. Set the text of the button element to `&uarr;` which is an up arrow [HTML entity](https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references).
3. Give the button an ID of `scroll-btn` so we can target with CSS.
4. Insert the `scrollBtn` into the HTML.

Following the previous code add a `scrollBtnDisplay` function and event listener:

```javascript
const scrollBtnDisplay = function () {
  window.scrollY > window.innerHeight
    ? scrollBtn.classList.add("show")
    : scrollBtn.classList.remove("show");
};
window.addEventListener("scroll", scrollBtnDisplay);
```

This toggles a show class when the user has scrolled further down the page than the height of the window.

Finally let’s add the functionality for when a user clicks the button inside the `scrollTop` function:

```javascript
const scrollWindow = function () {  
  if (window.scrollY != 0) {
    setTimeout(function () {
      window.scrollTo(0, window.scrollY - 50);
      scrollWindow();
    }, 10);
  }
};
scrollBtn.addEventListener("click", scrollWindow);
```

Smooth scrolling could be done using CSS `scroll-behavior:smooth;` but this isn’t yet supported in Safari.

So instead we use a `setTimeout` that scrolls -50px every 10 milliseconds until the top of the page is reached.

Finally here’s some CSS to create a rounded button that fades in/out when the `show` class is toggled:

```css
#scroll-btn {       
    opacity: 0;   
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: #ef476f;
    position: fixed;
    bottom: 10%;
    right: 10%;    
    border: 2px solid #fff;
    border-radius: 50%; 
    font: bold 20px monospace;       
    transition: opacity 0.5s, transform 0.5s;
}
#scroll-btn.show {      
    opacity: 1;  
    transition: opacity 1s, transform 1s;     
}
```
{% codepen https://codepen.io/michaelburrows/pen/eYZvPRv %}

You now have a fully functioning scroll-to-top button to use in you next web project.
Has anyone here written and published an IT book? Please, share your experience.
Tags: discuss, advice, books
Published: 2020-08-26 07:44:38

---
title: Has anyone here written and published an IT book? Please, share your experience.
published: true
description: 
tags: discuss, advice, books
//cover_image: https://direct_url_to_image.jpg
---

I have an idea for a book, and I am willing to sacrifice some time off work to write it. For this, I will need to find a way to cover some of the costs of writing the book, while doing it. 

I am interested to know how this experience might have been for others. How did you measure people's interest to invest in your idea? Is it reasonable to try and set up a crowdfunding campaign up-front, or going straight to a publisher is better? 

Any tips you might offer would be more than welcome.
Demystifying ARM Templates: Introduction to ARM Templates
Tags: azure, cloud, devops, tutorial
Published: 2020-08-26 07:40:23



In this tutorial you will learn the what, the why about Azure Resource Manager (ARM) template. Why talk about declarative, idempotency.

## Azure DevOps - DevOps Lab - Video

{% youtube VWe-stknCIM %}
- [YouTube](https://youtu.be/VWe-stknCIM)
- [Channel9](https://channel9.msdn.com/Shows/DevOps-Lab/Demystifying-ARM-Templates-Intro-to-ARM-Templates?term=Demystifying%20ARM&lang-en=true)

---

## What it is

Azure Resource Manager (ARM) template is a way to describe your infrastructure...

```
{
    "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
    "contentVersion": "1.0.0.0",
    "parameters": {},
    "variables": {},
    "resources": [],
    "outputs": {},
    "functions": []
}
```

## Why

Here are some advantages to use ARM template :

- A template file is light and easy to keep in a repository.
- It's very simple to have the exact same template deployed in multiple environments.
- The template is idempotent.
- ARM templates are really fast to deploy.
- Easy to edit/ customize/ expand.
- Easy to delete.

## References

- [What is Azure Resource Manager](https://docs.microsoft.com/en-us/azure/azure-resource-manager/management/overview?WT.mc_id=learnARM-devto-frbouche)
- [GitHub Resources](https://github.com/microsoft/Learning-ARM)
4 MAJOR CHALLENGES TO IMPLEMENT BLOCKCHAIN TECHNOLOGY IN BUSINESS
Tags: blockchain, technology, business, queppelin
Published: 2020-08-26 07:37:34

Blockchain technology is being considered as one of the emerging technologies having the capability to transform the entire financial sector. It is expected that “Blockchain technology will see huge growth in the future and the market growth is expected to reach more than $23.3 billion by 2023. However, most of the companies are still vague about the use of this technology in their business. In fact, many of them are not aware of the Blockchain Challenges that might create an issue in their projects. Learn More: https://www.queppelin.com/blockchain-challenges
100DaysOfCode | Day 24, 25(Flask)
Tags: 100daysofcode, python, django, discuss
Published: 2020-08-26 07:32:33

Hey everyone, I'm still here again.
Stronger than before... 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3xsl3qatoy3vkrhx1ism.jpg)<figcaption>_STARTING POWERFULL</figcaption>
It can be a good news for my followers and actually for myself and friends that I started to learn __Flask__ ;)
Back-End is my favourite thing all the time.
You know what? I'm feeling so good when I'm doing something behind the scene when most of the people don't know about what's going on but you Know!
So I have a plan in my journey, I'm gonna start with __Flask__ and then I'll start to lean __Django__.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jy59hoe8ixdjczkixelr.jpg)

I researched a lot about what is the best python framework for beginners to start, I realized the best choice could be the __Flask__ and then __Django.

Cause I think you have more Idea about Back-End and server-side.
That was my decision which I wanted to share with all of you my friends to help me keep moving forward and just let me know if you have any Idea or suggestion, feel free to leave a comment below.
Thank you so much for reading my articles and posts.

Keep Moving Forward __ツ__

Enjoy Your Journey 👊

Code with __💛__

__🅑🅐🅝🅙🅘__
Released initial version of boilerplate called Superbro (0.1.2. version)
Tags: html, webdev, css
Published: 2020-08-26 06:53:14

I am so happy to release my first project in 2020!

This project has taken from me some time to finish(it's not because I lack the skills but I have been stuck of making decision wether to use grid, flex or something else in it) but now I have done some of the stuff I wanted (grid css is awesome btw!) and got the initial version out there. 

{% github eync/superbro %}

Feed back from this project is appreciated and what could be done better in future versions. 

<3 from Finland
Learn how to convert a list into an array in JavaScript
Tags: javascript
Published: 2020-08-26 06:45:24

🚨 Real-world use-case: I wanted to convert an excel list into an array; it had 200+ records, so a pain to do manually.

So why not create something easy in `JavaScript`!

The end goal is to have a textarea where we can input our list and auto-convert it into an array.

This is going to be the result in Codepen:

{% codepen https://codepen.io/rebelchris/pen/bGpqqRm %}

## HTML Structure

The `HTML` is going to be super easy for this, we just need a textarea and a paragraph to output our array.

```html
<div class="container">
  <textarea id="textarea">
Paste
your 
list 
here</textarea
  >
  <p id="array">["Paste","your ","list ","here"]</p>
</div>
```

## CSS Styling

Let's also add some super easy CSS to make it look good:

```css
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  background: #3a86ff;
}
textarea {
  padding: 10px;
  min-width: 200px;
  width: 50vw;
  height: 100px;
  margin-bottom: 10px;
  border-radius: 10px;
}
#array {
  background: #efefef;
  border: 1px dashed #333;
  padding: 10px;
  width: 50vw;
  min-width: 200px;
  word-wrap: break-word;
  margin-bottom: 10px;
  color: #ff006e;
  border-radius: 10px;
}
```

## JavaScript convert a list into an array

Ok, on to the magic part, let's convert our array input into an array.

We start by adding defining our variables

```js
const textarea = document.getElementById('textarea');
const array = document.getElementById('array');
```

Now we can add our input listener to the textarea element

```js
textarea.addEventListener('input', function() {
  var arrayValues = textarea.value.split(/\n/g);
  array.innerHTML = JSON.stringify(arrayValues);
});
```

And then for some magic we will add a click event to our paragraph which will auto select all text.

```js
array.addEventListener('click', function() {
  var range = document.createRange();
  var selection = window.getSelection();
  range.selectNodeContents(array);
  selection.removeAllRanges();
  selection.addRange(range);
});
```

An awesome, simple tool, but effective!

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Aliases in Ruby
Tags: ruby, tutorial
Published: 2020-08-26 06:45:23

Aliasing in Ruby provides a method to give an alternative name to a method.

There are two ways to achieve it:

* `alias`

* `alias_method`

## alias

`alias` is a Ruby keyword

Simple way to use it is to provide an alias to an existing method:

{% gist https://gist.github.com/vshl/cdd490a6b102cb5840dd6446ac7c0594 %}

This is useful for simple use cases where supposedly you aren’t happy with a long method name that you have to reuse in your code. By providing an alias to a short name, you can make your code more readable and save the burden of using the longer name.

## alias_method

`alias_method` provides a more dynamic approach to programming for Classes and Modules. For example, if there exists a Cat class with a speak method. You will need to use the speak method in your code but you aren’t happy with the implementation of the method.

{% gist https://gist.github.com/vshl/d93e5886104f7cde66251fba453c4988 %}

In the above code we re-implement the speak method, and the `alias_method` will create a copy of the original speak method to `cat_speak`. Then you can redefine the speak method with your own implementation and use it in your code.

`Cat.new.speak` will now use your implementation. This is useful for overriding existing instance methods and is useful in cases where you will need to add more functionality while preserving the existing the namespaces.
5 bingo strategies that work 
Tags: casinoonline
Published: 2020-08-26 06:40:19

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/61ewr2hmks1muwpov7go.jpg)
Who would have thought that one of the gambling games that can end up paying out the biggest jackpots in the 21st century is actually bingo? The game was, and still is, written off by serious gamblers for many many years, with people saying it was just a game for old people and school children, and that you couldn’t actually win any proper money on it at all <a href="https://www.umbingo.com/">click to join free bingo sites</a>.

Well well well, look how much has changed here… Nowadays bingo is incredibly popular, and as a result bingo providers can offer some truly outrageous jackpot prizes to keep people enthused with the idea of playing.

The thing about bingo in relation to other games such as blackjack is there is actually rather little you can do practically to make sure you have the best chance of winning, there is a lot more chance involved.

However, with that being said, there are still a good few tips and tricks that could have you well on your way to winning.

Read ahead to find out! 

<strong> Load up on the scorecards (but not too much) 
</strong>
 

One of the main things that avid bingo players will tell you is that the more scorecards generally means you have a better chance of winning.

At root this is just simple probability as well: the more scorecards you have, the better your odds of a win. It therefore follows that successful bingo gamblers will have more scorecards than most, however you also have to be careful here.
 
You could have all the scorecards in the world, for example, but if you are unable to keep track of them all it would be a complete and utter waste. Imagine if your bingo number did get called out, for instance, but you had too many scorecards to notice? 



<strong> Be clever with when you play 
</strong> 

One thing that the majority of successful bingo players will tell you is that it really does pay to be careful of when you are embarking on a game of bingo, in particular if you are playing online bingo.

This is because the more people that are in a game of bingo, the harder it is for you to win, and it is therefore advised to play at less busy times. 
However there is one thing to bear in mind here, and that is that the jackpot prizes will be reduced at less busy times.
  
<strong> Keep control of your bankroll 
</strong>
 
One of the golden rules when you are gambling on any game is that you simply must keep control of your bankroll, because if you do not things can quickly spiral out of control.
 
<strong> Make sure you are as alert as possible 
</strong>
 
Bingo has been stigmatised as a game for old people, however you still have to be as alert as possible when you are playing, otherwise you might miss one of your numbers.
 
<strong> Forget about fate, bingo is pure probability 
</strong> 

It is very tempting to think of bingo in terms of fate and “lucky” numbers, but the reality is that this game is purely dictated by probability.
README
Published: 2020-08-26 06:19:31

### Hi there 
# My name is Kadir <img src="https://media.giphy.com/media/hvRJCLFzcasrR4ia7z/giphy.gif" width="25px">

- 🔭 I’m currently working on something cool :wink:
- 🌱 I’m currently learning AI, ML and Blockchain
- 💬 Ask me about anything related to C#/Javascript/Python
- 📫 How to reach me: [@kadirertnn](https://twitter.com/kadirertnn)
- ⚡ Fun fact: I :heart: :dog:s

📊 **This week I spent my time on**
<!--START_SECTION:waka-->
```text
C#           4 hrs 26 mins   ██████████▓░░░░░░░░░░░░░░   42.69 % 
JSON         3 hrs 43 mins   █████████░░░░░░░░░░░░░░░░   35.81 % 
JavaScript   37 mins         █▓░░░░░░░░░░░░░░░░░░░░░░░   06.08 % 
Python       19 mins         ▓░░░░░░░░░░░░░░░░░░░░░░░░   03.20 % 
Native       18 mins         ▓░░░░░░░░░░░░░░░░░░░░░░░░   02.96 % 
```
<!--END_SECTION:waka-->
How to customize FB messenger on the website
Tags: help, javascript
Published: 2020-08-26 06:11:13

I have been trying to hide the customer chat plugin's greeting dialog on the initial page load. I've set `greeting_dialog_display="hide"` and it works, but only works ***the first time the page is loaded***.

Since I also need to customize the position of the messenger, I add a customized class name on it by using javascript.

But if I let the dialog show (open the messenger) and refresh the page or open on a new tab, the dialog won't hide after the page load. And the customized class name won't be added, either.

```javascript
window.fbAsyncInit = function() {
    FB.init({
        appId: "MY_APPID",
        autoLogAppEvents: true,
        xfbml: true,
        version: "v6.0",
    });

    FB.CustomerChat.hideDialog();
};

(function(d, s, id) {
    var js,
        fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://connect.facebook.net/en-US/sdk/xfbml.customerchat.js";
    fjs.parentNode.insertBefore(js, fjs);     
})(document, "script", "facebook-jssdk");
```

```html
<div class="fb-customerchat" 
    page_id="<PAGE_ID>" 
    minimized="true"
    greeting_dialog_display="hide">
</div>
```

I've tried putting `FB.CustomerChat.hideDialog();` after FB initiated, but it still doesn't work.

I also tried using `window.addEventListener('load', function() {})`, but it works delay since the internet speed.


BTW, I also post this question on [Stack Overflow](https://stackoverflow.com/questions/63478806/hide-fb-messenger-after-re-open-refresh-the-page), but I still haven't got the answer. 😥
Angular Universal - Page flickering/loading twice
Tags: angular
Published: 2020-08-26 06:01:54

Hello everyone, I need a help from community.

We are trying to implement angular universal on our project. We just implemented it.
But, facing an issue on home page loading. It loads twice and blinking page.

Here is the link to check - https://blocksurvey-ssr.onrender.com/

Project Information,
Angular: 8.2.5

Tried following steps to solve:-
Imported BrowserTransferStateModule in app.module.ts
Imported TransferHttpCacheModule in app.module.ts
Still, facing same issue
6 Essential Sales Skills for Salesforce Jobs and Interviews

Tags: salesforcejobs, salesforce, salesforceinterviews, sales
Published: 2020-08-26 05:58:37

Maybe it was time for a [career](https://www.cloudanalogy.com/) change, so I left the restaurant business a few years ago. I was a little nervous because I had been concentrating on working in the food industry for quite some time. I wondered about the transferability of my professional skills to another industry. I was relieved to learn that my sales skills are definitely transferable because "selling" is an integral part of any type of job.

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

In every job there are key elements that are characteristic of sales jobs. In fact, it was auspicious because the sales skills I learned from my previous sales position ultimately made my job search successful. Here is a list of the essential sales skills needed to land a job:

1. Product knowledge. Get to know your product well. This is the key to successful sales and receiving a paycheck. When you apply and interview for a job, you are also “selling” yourself. Product knowledge in sales comes down to knowing who you are, where you are from, what you can offer the business, what is special about you and your skills and how you will fit in. In the business.

2. Prepare to make the sale. Prepare to meet your prospects and customers. Study the product you are selling, the customers you are selling to, and how you will approach your customers to convince them to buy. This principle, again, also applies when applying for a job.

3. Make your customers love and trust you. In my catering work, I have taken the opportunity to create a positive experience for the people I have interacted with. Lays the foundation for the sale. Do the same when applying for a job in sales.

4. Discover your customers' needs and provide solutions. Ask questions and listen to what your potential buyers are saying. When you figure out what they mean and understand what their needs are, that's when you can say that you or your product can meet their needs and provide the solutions.

5. Go ahead and seal the deal. Has your potential customer shown interest in your product? Follow them and ask them to participate. Follow the steps below until you close the deal and make the sales. After the interview, ask questions about next steps and possible actions so everyone knows what to do.

6. Make it a win-win deal. Making a sale is not really about "breaking up" with your customer. Let your buyer know that having bought your product is good for him or his business, and also for your [business](https://www.cloudanalogy.com/).
How to start and promote your open-source project?
Tags: opensource, webdev, career
Published: 2020-08-26 05:57:48

I was listening to *Blinding Lights by The Weeknd* when I got the idea of an open-source project. In just 45 days the project got **1000+ stars**, **120+ forks**, and **30+ PRs** on GitHub. It received sponsorships from two experienced developers. Google Analytics reads that it got 10,000+ visitors so far. Got featured in several YouTube videos and blogs.

I believe that sharing the process followed by me will help you to get the gist of the same. Go through the following steps sequentially to understand the whole process.

## 1. Wireframe the IDEA 🖊
Take a pen & a paper and just draw whatever comes in your mind related to the idea. Don't worry about your drawing ability and just jot it down. It will give you more realistic view about the idea.

Once you have it on paper, start drawing how it should work. Brainstorm every possible workflow you have in mind.

I was seeing a lot of addons for GitHub profile README coming up, so I came up with the idea of [GitHub Profile README Generator](https://github.com/rahuldkjain/github-profile-readme-generator).

I brainstormed several ideas on how should make it simple, useful, and elegant for users.

![idea](https://media.giphy.com/media/ame1y0MJNqUPC/giphy.gif)

Once you get the holistic picture of what you are thinking, pick the best one, and freeze it.


## 2. Execute 👨‍💻
Almost every one of us usually loses interest to develop the project after coming up with an IDEA. Is it really worth it? People really gonna use it or am I just wasting my time? etc questions like these start haunting the mind.

![confused](https://media.giphy.com/media/ZQrVQtav6gnzG/giphy.gif)

This happened to me too and I said it to myself that **Who cares?**. Yep, it's true who cares.

So stop thinking about it and just execute it. It doesn't matter whether people will like it or not, but the experience of going from an idea in the mind to the idea online is simply worth doing.

## 3. Promote 🚀
Let the world know about the masterpiece you've developed. To reach a wider audience for feedback, promotion is very important. This step will make you realize the power of platforms like **DEV**, **Reddit**, **Twitter**, and **YouTube**, etc.
I've posted a separate blog on [how to promote your project online?](https://dev.to/rahuldkjain/how-my-project-repo-reached-200-stars-in-less-than-36-hours-on-github-2l15). Go check and read it out.

I am telling you that having a cool open-source project is an amazing feeling. So don't think and wait, just execute it. Let the world know about your crazy ideas, don't hesitate.

![happy](https://media.giphy.com/media/kEKcOWl8RMLde/giphy.gif)

Wish you very good luck on your upcoming journey.

Happy Coding 👨‍💻👩‍💻!
Singleton module (Singleton class)
Published: 2020-08-26 05:28:45

---
title: Singleton module (Singleton class)
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

## 👍 You can call it from anywhere in the app
I've heard that this is a better way because the module can't make an instance. So, your intent is more clear.

```ruby
module Logger
  mattr_accessor :filename

  def self.log(msg)
    CSV.open(@@filename, "a") do |csv|
      csv << msg
    end
  end
end

Logger.filename = 'db/script/sample_log.csv'
Logger.log('hello')
Logger.log('hey')
```