teleren/devto huggingface dataset:
[AMA] Ask Ethereum Researcher Aditya Asgaonkar Anything About Ethereum 2.0
Tags: ethereum, blockchain, node
Published: 2020-12-09 07:48:16

<b>[Ethereum 2.0](https://ethereum.org/en/eth2/)</b> phase 0 has launched last week. What does it mean to the community and the blockchain world, and what’s next? Any behind the scenes stories? We have so many questions. There’s no better time than now to invite <b>[Aditya Asgaonkar](https://twitter.com/adiasg)</b>, the Ethereum 2.0 researcher at Ethereum Foundation, to join us and talk about everything eth2. Submit your questions now!

<h3>AMA Schedule</h3>
📅 When & Where: AMA will be held in ETHPlanet Discord Server on Thursday, December 10, 2020, from 7:30 AM to 8:15 AM PST / 4:30 PM to 5:15 PM CET (Check your local time).

💬 How to Submit Your Questions:
- Leave your questions in [ETHPlanet Discord Server](https://discord.gg/GF7j9E8) “ama” Channel with #eth2AMA
- Comment under the [Twitter post](https://twitter.com/ETHPlanet/status/1336310563178229760?s=20) with #eth2AMA

Submit question(s) before 11:59 PM PST on Wednesday, December 9, 2020

Aditya will choose quality questions to answer. And Aditya will answer 3–5 additional questions from live audiences if there’s still some time left on the AMA day.

See you on Thursday! 

--
Eth2 refers to a set of interconnected upgrades that will make Ethereum more scalable, more secure, and more sustainable. These upgrades are being built by multiple teams from across the Ethereum ecosystem.

[What is Ethereum](https://ethereum.org/en/what-is-ethereum/)
Opinion: absolute; When you shouldn't use position: absolute
Published: 2020-12-09 07:44:48

# In General

I was reviewing code of my colleague the other day, and we got into a discussion about how best to position an elements in a header.

To center the text in one of the elements, my colleague chose to `position: absolute` that element, setting the header wrapper element as `position: relative`. It worked, but it looked hacky to me.

I am a firm believer of being declarative and explicit. It makes maintenance easier and I think it is better for accessibility.

# The Details

Space was sparse as we were looking at the mobile version. There were no clear guidelines from the designer, so we each had our view of what should happen.

The structure of the header was supposed to be:

```
[Logo] ........ [Page Title] ........ [email]
```

- The *Logo* has a fixed size and ratio (say `40x40px`) and should be left aligned.
- The *Page Title* changes based on the page being rendered, and should be always centered.
- The *email* was variable in the sense that different users would have different lengths of an email. `me@cnn.com` would be shorter than `yourcousinesworkaddress@theguardian.co.uk`. Email should be right aligned.

My colleague chose to make the *Page Title* element absolute, spanning the whole width of the page. With a long enough title, all sections might overlap, so we'ed have to take care of that. Beside that technical challenge, I think this is not a good use for absolutely positioning elements.

I believe that we should use absolute positioning where that is exactly what is required - an element being positioned in a **specific, absolute distance from its parent/root, regardless of any other elements that may exist around it**.

Quoting Chris Coyier's article on CSS-Tricks [Absolute, Relative, Fixed Positioning: How Do They Differ?](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/):

> The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.

# My suggestion

Use `display: grid`. The grid lets us define the exact structure for each of the blocks as well as overlap and internal alignment.
Originally I thought we can use `display: flex`, but the alignment didn't pan out too well. Maybe we didn't dig around enough?

I'd love to hear your thoughts!

Do you agree that `position: absolute` should be used only where it is explicitly required? Have you seen other abuses of absolute positioning?
Advent of code - Day 8
Tags: javascript, typescript, adventofcode
Published: 2020-12-09 06:51:58

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

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

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

When I saw the exercise for day #8, I really though "oh boy, this one is going to be hardcore". I thought we'd need to implement a runtime for their weird assembly-like language. Lucky for us, this was way easier than what I assumed!

I basically just wrote a function that determines if the program exits successfully or not, and then run it agains every possible version of the assembly-like code. Here is what it looks like:
```js
const SUCCESS = "SUCCESS";
const ERROR = "ERROR";

// Runs the program, and return SUCCESS or ERROR
// Depending on whether or not it finished (line number > code.length)
function runProgram(code) {
  // If a line is processed 2 times, it's an error
  const alreadyProcessed = [];
  let global = 0;
  let currentLine = 0;

  while (true) {
    if (alreadyProcessed[currentLine] === true) return { global, status: ERROR, alreadyProcessed };
    if (code[currentLine] === undefined)
      return { global, status: SUCCESS, alreadyProcessed };
    alreadyProcessed[currentLine] = true;
    const [inst, argument] = code[currentLine];
    switch (inst) {
      case "acc":
        global += parseInt(argument, 10);
        currentLine += 1;
        break;
      case "jmp":
        currentLine += parseInt(argument, 10);
        break;
      case "nop":
        currentLine += 1;
        break;
      default:
        throw new Error(inst);
    }
  }
}

// Let's just bruteforce, and run the program changing any
// line that is a nop or a jmp to find which one is corrupted
input.forEach((_value, index) => {
  const code = [...input];
  const [inst, argument] = code[index];
  if (inst === "jmp") code[index] = ["nop", argument];
  else if (inst === "nop") code[index] = ["jmp", argument];
  const altResult = runProgram(code);
  if (altResult.status === "SUCCESS") console.log(altResult);
});
```

Feel free to share your solution in the comments!

________________________

Photo by [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
Let's write a fun CLI quiz
Tags: javascript, chalkjs
Published: 2020-12-09 06:51:44


what is ***require()***??

require is a function that allows us to work with modules defined in separate files. If u are familiar with C then require is similar to ***include***.
So the functionality involves reading the specified JavaScript file and returning the export object of the file.

`var code=require('readline-sync')`

***
***readline-sync***
Basically, it allows to have interaction with the user via the console in a synchronous manner.

To get the user input one can use 'question'

`var readInput=require('readline-sync');`

`var input =readInput.question('Helooooo what's ur name?');
//the user's response is stored in the variable 'input'`
***
## What is chalk??
It basically a styling library for your terminal. You can also chain multiple styles!!

`var chalk=require('chalk')`

`console.log(chalk.red.italic("we are trying out chalk"))`
![image](https://user-images.githubusercontent.com/42477290/101345947-d214ac80-38ad-11eb-9079-094dcd8fd1c8.png)

read more about it here.... [Chalk js Documentation](https://www.npmjs.com/package/chalk)
***
`forEach()`

A method that allows a function to be executed on every element of the list just as any regular for loop does.
######  A basic syntax.
`array.forEach(function(currentValue, index, arr))`

>1. currentValue= the current element being worked on
>2. index = index of the current element
>3. arr=array object the current object belongs to

>example
>>`list=[1,2,3,4]`

>>`list.forEach((element,index)=>{console.log(index,element)});`

>>![image](https://user-images.githubusercontent.com/42477290/101589413-5d0cb880-3a0e-11eb-8ecd-dd371fd5e9a3.png)
***

****
The complete code can be found **[here](https://repl.it/@Androng/CLI-quiz#index.js)**
Springboot + MPA + webpack
Tags: spring, springboot, java, webpack
Published: 2020-12-09 06:47:58

## MPA
Webpack is usually used for Single page application recently. You can find many articles on how to set up webpack for SPA. But, in my case, I had to use webpack for Multi Page Application (MPA). 

It was a bit difficult to use Webpack for MPA Spring boot, so I want to share how I did it.

## How I used webpack for spring boot MPA
You can see how I used webpack for spring boot MPA from here:
[https://github.com/lechatthecat/vanilla-javascript-boilerplate-spring-boot](https://github.com/lechatthecat/vanilla-javascript-boilerplate-spring-boot)
Which sites do you spend more time on than you should?
Tags: watercooler, social, media, distractions
Published: 2020-12-09 06:37:49

---
title: Which sites do you spend more time on than you should?
published: true
description: 
tags: watercooler, social, media, distractions, 
cover_image: https://mynerdysidehome.files.wordpress.com/2019/05/5b52c59f9bb02.jpg
---
Social media is a double-edged sword, meaning it could be both beneficial due to contacts, learning resources and creative ideas you find, promotion possibilities for your businesses, and also a distraction once you lost the track of time and aimlessly browse low-quality content, compare yourself to others and blame yourself for not being productive.

Some of the most common ones for me include Twitter, Reddit, and YouTube. Which sites do you spend more time on than you should?
Arithmetic Operations | Shell Scripting 
Tags: linux, bash, devops, tutorial
Published: 2020-12-09 06:36:10

**This is a multipart blog article series where I am going to explain the concepts of shell scripting and how to write a shell script in Linux, UNIX or Mac based systems. You can also follow this tutorial blog using windows but for that you have to install a bash from.**

_In this article I will explain you that how can you perform arithmetic operations using shell scripting._

1. If you write this command `echo 1+1` then it will print `1+1` in the output, because by default echo consider everything written after it as string.
2. We can get desired result in this way `echo ((num1 + num2))`. Here num1 and num2 are variables and both the variables contain some value. This command will print the desired result.
3. In the similar way we can also perform other arithmetic operations.
4. Another way to perform arithmetic operations is by using `expr` keyword. Like this 
    - `Echo (expr $num1 + $num2)`
    - In this way we do not use two parentheses and also use the variable with `$` sign before them.
    - One more thing that we cannot use `*` for multiplication it will give error, so we use `\*` sign for multiplication.

[Reference code file for this article](https://github.com/rahulMishra05/shell-scripting/blob/main/video10.sh)

_So this was all about simple arithmetic operation in shell scripting. Hope you liked it and learned something new from it._

If you have any doubt, question, quires related to this topic or just want to share something with, than please feel free to contact me. 

### 📱 Contact Me

[Twitter](https://twitter.com/r_mishra10),
[LinkedIn](https://www.linkedin.com/in/rahul-mishra-66210b185),
[Telegram](https://t.me/rahul_mishra10),
[Instagram](https://www.instagram.com/rahul_mishra10/?hl=en),

### 📧 Write a mail
<rahulmishra102000@gmail.com>

#### 🚀 Other links

[GitHub](https://github.com/rahulMishra05),
[HackerRank](https://www.hackerrank.com/rahulmishra10201)
Thank you Hacktoberfest2020
Tags: hacktoberfest
Published: 2020-12-09 06:23:14

This morning, Received this Hacktober Fest T-shirt and Swags!
Thank you Digital Ocean for organizing Hacktober Fest 2020 and Kotis Design for this amazing T-shirt and all the Sponsors and Supporters of HacktoberFest2020. 
#OpenSource #Hacktoberfest2020 #DigitalOcean #KotisDesign
Syncing tabs via service worker
Tags: serviceworker, webdev, javascript, browser
Published: 2020-12-09 06:21:32

# Introduction
The idea of having to sync different tabs within the same browser is not something new and there are tons of different ways in which it can be done, there is no *right way* to do it; it will always depend on the situation and task at hand.

Here's a brilliant video on the very topic by Google Chrome developers on YouTube. {% youtube 9UNwHmagedE%}

In this post we will achieve this by using [Service workers](https://developers.google.com/web/fundamentals/primers/service-workers/) in the browser, it is not yet 100% supported in all browsers but its support is increasing day by day in modern browsers.

# Demonstrating tabSync
Let's make a simple project to achieve the mentioned syncing in our projects.
Get the [demo here](https://jhamadhav.com/tabSync) and the complete code in my [GitHub repo](https://github.com/jhamadhav/tabSync).

This is the final version once we implement tabSync :
![tabSync demo](https://dev-to-uploads.s3.amazonaws.com/i/rysogbiwtv4uxpcb0552.gif)

## Setting up the project
We will be making a simple clicker button and increment its counter value on each click by 1, and via tab sync we will be able to see the same effect on different tabs.
Check the clicker markup and code from the [Hex clicker](https://github.com/jhamadhav/hex-clicker) GitHub repo.

Now we have a simple counter-click page ready.

## Sending the increment value to service worker
From the above repo it is clear what the hex button does, once the button is clicked it increments the global variable **num** value by one and assign it to the counter.
But since we want this value to be the same across all tabs we will send the **num** variable value to the service worker via the following function below.
{% gist https://gist.github.com/jhamadhav/b7b801d024b559683de3b7057ac39767 file=main.js %}

## Receiving and broadcasting the received data via service worker
Now that we sent the incremented **num** value to the service worker we will have to receive it in the worker and then send the same value to all the tabs(same tabs) in the browser.

The event listener for that in worker is as follows:
{% gist https://gist.github.com/jhamadhav/b7b801d024b559683de3b7057ac39767 file=serviceWorker.js %}

## Updating the increment value in tabs
Now that we have sent the incremented value across the tab now we need to receive the same in all the tabs and then display it via the counter as follows.:
{% gist https://gist.github.com/jhamadhav/b7b801d024b559683de3b7057ac39767 file=main2.js %}

And with that we have all our tabs(of hex-clicker) in sync with each other.

# Final words
This was a very simplified way of using service worker to keep tabs in sync. To get started and know more on the topic check the links and resources given in the above post.
For any and all questions regarding this comment down below.
All helpful suggestion are welcome :)
How to kickstart your on-demand handyman services business?
Tags: ubrforhandyman, uberforhandymanapp, ondemandhandymanappdevelopment
Published: 2020-12-09 06:12:55


People will require professional services for plumbing and repair services at some point in their daily lives. They used to wait for hours for a professional to arrive and will be charged excessively. With the advent of on-demand service apps, customers can seamlessly get closer to service providers like never before. If you are an entrepreneur with plans to enter this lucrative market, this article is for you. 

##Must-have elements of an ideal Uber for handyman app:

####Easy locating of services:

Customers will always prefer to get things done quickly, and hence it would be best to locate a handyman in their proximity. Therefore, the integration GPS will help customers find a handyman nearby and not have to wait for a long time. On the other hand, no service provider would prefer traveling long distances for a job. 

####Multiple payment options:

Since you are developing a [Uber for handyman app](https://www.uberlikeapp.com/on-demand-handyman-app), it is essential to integrate multiple payment options. Customers will prefer online payment options as they are of great handiness to them. The scenario has changed as more people rely on digital payments. Hence, integrating digital payments is not a choice anymore but an obligation. Furthermore, the payment gateway must be completely secured with the latest encryption technology.

####Transparent pricing options:

Your pricing structure should be transparent for the customers as they will not prefer to use an app that charges hidden fees. Your app must furnish every minor charge, such as service charge, cost estimation, etc. It would be best if you ponder through every aspect of the business and analyze the customers’ expectations precisely. 

####Benefits of launching an on-demand handyman app:

Entrepreneurs can seamlessly boost their overall revenue with the business’s multiple revenue streams such as service commission, appointment fees, onboarding fees, and convenience charges. 

There is no need for a brick and mortar store as the complete business operations will be online.

The tech-powered business model will be easy to use and automates most of the business operations reducing paperwork and human resources. 

The [handyman app like Uber](https://www.uberlikeapp.com/on-demand-handyman-app) will have a high potential to yield more profits.

Entrepreneurs can pick their niche and focus on perfecting it.
Entrepreneurs can seamlessly expand their service area across horizons.

Service providers will get paid instantly and directly into their account.

Your app can be an ideal platform for freelancers to work in their preferred timings.
JAVA: Basics on JDK, JRE, JVM, IDE, Platform independence?
Tags: java
Published: 2020-12-09 06:01:12

Q1. JDK
Q2. JRE
Q3. JVM
Q4. IDE
Q5. Features/Why use IDE?
Q6. How java is platform-independent?

**1. JDK**
-Java Development Kit
-JDK = Development_Tool(compiler etc.) + JRE
-to run any application development and execution of that application is needed, i.e. an environment is needed in order to execute the application which is provided by JDK
-provides and the environment in order to develop and execute an application

**2. JRE**
-Java Run-Time Environment
-JVM + Libraries
-provides an environment only to execute or run and environment

**3. JVM**
-Java Virtual Machine
-interpreter which execute java code line by line

**4. IDE**
-stands for Integrated Development Environment
-provides a programming environment that contains multiple things in a package such as code editor, compiler and debugger for software development. For example, NetBeans, Eclipse.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dkah6cxsjr0qozina451.jpg)

**5. Why use IDE?**
1-Syntax Highlighting: IDE which is aware of your programming languages is capable of providing visual cues to help code faster and in an efficient way, such as class keyword in java. It also makes code more readable and understandable.
2-Autocomplete: By focusing on keystrokes, IDE can help the programmer to detect the current and next keyword. For example, typing "Sy" will give you a list of functions, variables that can be used or are used in the current program.
3-Building executables automatically
4-Debugging: most IDE provides debugging tools that allow programmers to examine different variables and inspect their code. IDEs also provide hints while coding to prevent errors before compilation, such as ';' expected.
5-multi or single-purpose use: many IDEs support multiple languages, whereas there are specifically for single-purpose such as mobile development.
6-Integrations and plugins
-Some IDE also provide features like class browser, object browser and class hierarchy diagram where,
1: class browser - examine and reference the properties of an object-oriented class hierarchy
2: object browser -  examine the objects instantiated in a running application program
3: class hierarchy diagram - allows the programmer to visualize the structure of object-oriented programming code

**6. How java is platform-independent**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pm9xwafvq289rotu9r4n.JPG)

-as the above picture shows, Abc. class cant be executed directly on any machine, for which it needs an interpreter in order to do it(JVM)


**Please comment if you have any feedback or suggestions**
Advent of Code 2020: Python Solution Day 9
Tags: adventofcode, algorithms, python, challenge
Published: 2020-12-09 06:00:30

This challenge is the easiest one I encountered on this season. And I was able to find a working algorithm. Still I am not even on top 7k. I started with copying test example and pasting on `day9_test.txt` and my input on `day9.txt` both are at same directory as my notebook is.
* [Link to challenge.](https://adventofcode.com/2020/day/9)
* [Link to repository.](https://github.com/q-viper/Adevent-Of-Code-2020)

Lets share your solution too.

## Challenge 1

```python
with open("day9.txt", "r") as fp:
    lines = [int(line.rstrip()) for line in fp.readlines()]
# lines

def challenge1(codes, premable):
    previous_stack = []
    i = 0
    start = 0
    end = start+premable
    curr_index = premable
    while curr_index < len(codes)-1:
        stack = codes[start:end]
        if curr_index > len(stack)-1:
            start+=1
            end+=1
            valid = False
            for i in stack[:-1]:
                for j in stack[1:]:
                    #print(codes[curr_index], i, j)
                    if i+j == codes[curr_index]:
                        valid = True
                        break
                    else:
                        valid == False
                if valid:
                    break
            if valid == False:
                return codes[curr_index]
            
        curr_index+=1
#         print(stack)
#         break
    
challenge1(lines, 25)
```
## Challenge 2
Used NumPy for taking sum faster.

```python
import numpy as np
def challenge2(codes, invalid_num):
    contigous_list = []
    
    for i in range(0, len(codes)-1):
        for j in range(1, len(codes)-1):
            stack = np.array(codes[i:j])
            if np.sum(stack) == invalid_num:
                print(stack, stack.min()+stack.max())
#             print(stack)
challenge2(lines, challenge1(lines, 25))
```
I write blogs about Computer Vision projects on my GitHub page [q-viper.github.io](https://q-viper.github.io) and if you got some time please share yours too.