teleren/devto huggingface dataset:
Chapter 7: Project: A Robot
Tags: teamtanayejschallenge
Published: 2020-12-08 07:24:58

This is the 7th Blog in the series of 21 blogs that put together my learnings from the book eloquent js.
The seventh chapter has yet another beautiful quote which says:
"[...] the question of whether Machines Can Think [...] is about as relevant as the question of whether Submarines Can Swim"

A very important point driven in this chapter is that Theory is necessary to learn to program, but reading and understanding actual programs are just as important.

Our project in this chapter was to build an automaton, a little program that performs a task in a virtual world. Our automaton will be a mail-delivery robot picking up and dropping off parcels.

So the chapter goes about explaining tasks in order to do so.

The first step was to mark all the roads and buildings to form a graph of sorts. This graph is the world that our robot moves through.

The list of roads is converted to a data structure that, for each place, tells us what can be reached from there.

It uses the split method to go from the road strings, which have the form "Start-End", to two-element arrays containing the start and end as separate strings.

Task:

Our Aim is that: Our robot will be moving around the village. There are parcels in various places, each addressed to some other place. The robot picks up parcels when it comes to them and delivers them when it arrives at their destinations.

The automaton must decide, at each point, where to go next. It has finished its task when all parcels have been delivered.

Solution: To be able to simulate this process, we must define a virtual world that can describe it. This model tells us where the robot is and where the parcels are. When the robot has decided to move somewhere, we need to update the model to reflect the new situation.

What is persistent data? 
Data structures that don’t change are called immutable or persistent. They behave a lot like strings and numbers in that they are who they are and stay that way, rather than containing different things at different times.

Further Pathfinding and simulation is carried out to conduct tasks and accomplish the feat of making a robot.

https://eloquentjavascript.net/07_robot.html

Refer to the link above to find out the practical aspect of it!

Happy Reading!
SriV
Which device is ideal for writing
Published: 2020-12-08 07:21:43

The article on the alternative to Windows caught my eye and gave me hope that Windows was not the only option. 

However l am a survivor of a TBI and my creativity has received an overhaul.   I'd really appreciate any feedback from you tech gurus for www.mymarathonalexlaing.com 

My laptop has taken early retirement leaving me use of a Samsung Tab A, but l have speed sticks l wish to upload. 

I must dash to work in the M&S cafe in Centre mk


Much Love
Alexander
|DOM| DOM: The World of The DOM
Tags: javascript, html, css, webdev
Published: 2020-12-07 19:53:15

---
title: |DOM| DOM: The World of The DOM 
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---

           

              -Introducing the DOM
              -The Document Object 
              -getElementById
              -getElementsByTagName and className
              -querySelector and querySelectorAll
     




###Introducing the DOM
The DOM allows us to combine JavaScript with HTML to do stuff. 

The DOM stands form Document Object Model.

The DOM is a JavaScript representation of a webpage. 
It's your JS "window" into the contents of a webpage. 
It just a bunch of objects that you can interact with vis JS. 


###The Document Object 
The objects all have certain properties like the type of elements they represent. But then some of them have more specialized things like attribute or a source for an image or inner text for a heading. 


Window is a special object that's always available in the browser. 



The document object is our entry point into the world of the DOM. 
Its contains representations of all the content on a page, plus tons of useful methods and properties. 


###getElementById
Selecting with JavaScript to single out one element or all elements with a certain class or all elements with a certain type. 
Similar to selecting in CSS. 

getElementById() returns an element object representing the element whose id property matches the specified string. 

```javascript 

var element = document.getElementById(id); 

```


###getElementsByTagName and className

The getElementsByTagName method of document interface returns an HTMLCollection of elements with the given tag name. The complete document is searched, including the root node. 

```javascript 

var elements = document.getElementsByTagName(name); 

```

Basically, all we need to do is get elements by tag name and then pass in a tag name so we don't pass in paragraph. 



###querySelector and querySelectorAll

querySelector is a newer, all-in-one method to select a single element. 

```javascript 
document.querySelector('h1'); 

document.querySelector('#red');

document.querySelector('.big'); 

```
querySelectorAll 
Same idea, but returns a collection of matching elements.
Create a Candlestick Chart in Excel Office 365!! ~ Quick Steps
Tags: createacandlestickch, excelcharts, exceltutorials
Published: 2020-12-08 10:15:09

---
title: Create a Candlestick Chart in Excel Office 365!! ~ Quick Steps
published: true
date: 2020-12-08 07:19:27 UTC
tags: CreateaCandlestickCh,ExcelCharts,ExcelTutorials
canonical_url: https://geekexcel.com/create-a-candlestick-chart-in-excel-office-365-quick-steps/
---

A **Candlestick chart** is one of the built-in chart types in MS Excel. This type of chart is used to show the stock price activity. You will see this chart under the **Stock chart** types with the **Open High Low Close.** It will plot the full range of values as a single line that will indicate the high and low in a given time interval. In this article, we are going to see how to **create a Candlestick Chart in Excel Office 365**.

To know more different types of **[Excel Charts](https://geekexcel.com/excel-charts/)**, refer to this link.
## Insert a Candlestick Chart:

- You need to **select** the **input range** that you want to create the chart.

![Input Data](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/12/Input-Data-1.png)<figcaption id="caption-attachment-18979">Input Data</figcaption>

- Go to the **Insert Tab,** then **select** the **Stock charts.**
- Then, you need to **select** the **Open-High-Low-Close** chart type.

![Insert Tab](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/12/Insert-Tab-13.png)<figcaption id="caption-attachment-18980">Insert Tab</figcaption>

- Finally, you will get the result as shown in the below image.

![Candlestick Chart](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/12/Candlestick-Chart.png)<figcaption id="caption-attachment-18981">Candlestick Chart</figcaption>

## Pros and Cons:

### Pros:

- It will quickly plot stock data in the open high low close format.
- This chart type mostly used in the financial field.

### Cons:

- Difficult to read and understand.

## Summary:

In this article, you can easily understand the steps to **create a Candlestick Chart in Excel Office 365**. Drop your **feedback** in the comment section. Thanks for visiting **[Geek Excel.](https://geekexcel.com/)** Keep Learning!
Advent of Code 2020: Python Solution Day 8
Tags: adventofcode, algorithms, python, 100daysofcode
Published: 2020-12-08 07:00:42

I know I can not be on even top 1000 but I love to solve challenges. Lets share your solution too. And the solution to day 8 is not that harder but kind of brute force has to be done. Link to the challenge is [here](https://adventofcode.com/2020/day/8). I have updated my notebook at [this repository](https://github.com/q-viper/Adevent-Of-Code-2020).

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

# challenge 1
def challenge1(lines):
    curr_acc = 0
    visited_line = set()
    curr_line = 0
    valid_sol = True
    while True: 
        
        # viewed all lines and we got lucky, no loops
        if len(lines)-1 == curr_line:
            valid_sol = False
        
        # for challenge 1 solution
        if curr_line in visited_line:
            valid_sol = False
            return curr_acc, valid_sol
        

        inst, acc = lines[curr_line].split(" ")
        acc = int(acc)
        visited_line.add(curr_line)

        if inst == "nop":
            curr_line += 1
        if inst == "acc":
            curr_acc += acc
            curr_line += 1 
        if inst == "jmp":
            curr_line+=acc
        
        # we got lucky
        if valid_sol == False:
            return curr_acc, True 
    return curr_acc, False
print("Current Accumulator: ", challenge1(lines)[0])

# challenge 2
def challenge2(lines):
    curr_acc = 0
    visited_line = []
    curr_line = 0
    new_lines = lines.copy()
    for curr_line in range(1, len(new_lines)):   
        inst, acc = lines[curr_line].split(" ")
        acc = int(acc)
        
        if inst == "nop":
            inst = "jmp"
        elif inst == "jmp":
            inst = "nop"

        visited_line = []
        new_lines = lines.copy()
        new_lines[curr_line] = " ".join((inst, str(acc)))
        acc, valid = challenge1(new_lines)
        if valid:
            return acc

print("Current Accumulator: ", challenge2(lines))    
```

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.
JavaScript Set
Tags: javascript, webdev, angular, beginners
Published: 2020-12-08 06:57:27

Javascript set object does not allow duplicate values to be pushed it contains only unique values.

First, we declare a variable set using const in which we assign a set object with a new keyword.
```
const animals = new Set();
```
Now, we add animals to set variable using set object add() method.

```
animals.add('🐷');
animals.add('🐴');
console.log(animals.size); // 2
animals.add('🐴');
console.log(animals.size); // 2
```

Javascript set only store unique values either it’s for string or number or object. So, the set will neglect the 🐴 add when he found out the same value again.


**Strings are a valid iterable so they can also be passed-in to initialize a set**

```
console.log('Happy Coding'.length); // 13
let sentence = new Set('Happy Coding'); //12
console.log(sentence.size);
```

***Note***: Set has a size property, not a length property.
Advent of code - Day 7
Tags: javascript, typescript, adventofcode
Published: 2020-12-08 06:43:30

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.

For day #7, I created a sort a tree like structure, but flat (I'm lazy), represented by a Record<Color, Color[]>. Basically, for each color, you know which colors you can contains.

Once you have such a structure, finding the answer is just a matter of a small recursion:
```js
const tree = input.reduce((tree, line) => {
  const color = /(^.*) bags contain/.exec(line)[1];
  tree[color] = [];

  const matches = line.matchAll(/,? (\d+) ([^,.]*) bags?/g);
  for (const match of matches) {
    for (let i = 0; i < parseInt(match[1]); i++) {
      tree[color].push(match[2]);
    }
  }
  return tree;
}, {});

const depth = (color) => {
  if (tree[color] === []) return 1;
  return tree[color].reduce((acc, color) => acc + depth(color), 1);
};

console.log(depth("shiny gold") - 1);
```

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)
Adding environment variables to React
Published: 2020-12-08 06:36:56

---
title: Adding environment variables to React
published: true
description: A quick guide to adding environment variables to React apps
tags: 
//cover_image: https://direct_url_to_image.jpg
---

This is a quick guide to adding environment variables to React apps, so let's get to it.

#Step 1, Creating .env file
Create a file in your root folder and name it `.env`.

#Step 2, Adding variables
Inside you .env create variable like this
```
REACT_APP_SECRET_TOKEN=TOKEN
```
Note: variables should start with `REACT_APP`

#Step 3, Using variables inside your app
After you added `.env` file and variables re-build your app with `npm start`. Now you can use your environment variables by simply passing it inside your app `{process.env.REACT_APP_SECRET_TOKEN}`
My portfolio design..!
Tags: javascript, webdev, react, node
Published: 2020-12-08 16:00:56

---
title: My portfolio design..!
published: true
date: 2020-12-08 06:36:13 UTC
tags: JavaScript,WebDevelopment,React,Nodejs
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/j3led4l6fu42c05xoqft.png

canonical_url: https://blog.rajasekhar.tech/my-portfolio-design
---

Recently I designed & developed my portfolio.. 


[Check site here](https://rajasekhar.tech/)

> Built using NextJS
 I used server to handle Contact Form and Mailchimp API 

> Retweet if you like it ( [Tweet](https://twitter.com/RajsekharGuptha/status/1335554479408689152?s=19) ) 

love to have feedback & suggestions 😍 
Comment...!
Create a Pareto Chart in Excel Office 365 – {with Example}
Tags: createaparetochart, excelcharts, exceltutorials
Published: 2020-12-08 10:14:55

---
title: Create a Pareto Chart in Excel Office 365 – {with Example}
published: true
date: 2020-12-08 06:32:33 UTC
tags: CreateaParetoChart,ExcelCharts,ExcelTutorials
canonical_url: https://geekexcel.com/create-a-pareto-chart-in-excel-office-365-with-example/
---

A **Pareto chart** is one of the built-in chart types in MS Excel. This chart contains both bar and line graphs. Each individual value is represented in descending order by **bars** and the cumulative value is represented by a **line** graph. It is used to find the greatest overall improvement. In this guide, we will learn the steps to **create a Pareto Chart in Excel Office 365** with an example.

To know more different types of **[Excel Charts](https://geekexcel.com/excel-charts/)**, refer to this link.
## Create a Pareto Chart:

- First, you need to **select the input data set** that you want to create a chart.

![Data set](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/12/Data-set.png)<figcaption id="caption-attachment-18969">Data set</figcaption>

- Go to the **Insert Tab, select** the **Insert Statistic Chart** drop-down list.
- Then, you need to **select** the **Pareto** chart.

![Insert Tab](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/12/Pareto-Chart.png)<figcaption id="caption-attachment-18970">Insert Tab</figcaption>

- Finally, you will see the result as shown in the below screenshot.

![Pareto Chart](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/12/Insert-Tab-12.png)<figcaption id="caption-attachment-18971">Pareto Chart</figcaption>

## Pros and Cons:

### Pros:

- It will highlight the most important data quickly.
- Microsoft Excel will build a histogram and add the Pareto line automatically.

### Cons:

- It may be difficult to read.
- You will not customize the chart easily.

## Bottom-Line:

In this guide, you can clearly understand the steps to **create a Pareto Chart in Excel Office 365** with an example. Kindly, give your **feedback** in the comment section. Thanks for visiting **[Geek Excel.](https://geekexcel.com/)** Keep Learning!
Release 4.0 Starting
Published: 2020-12-08 06:28:26

For our final assignment we are supposed to work on something that builds upon our recent projects, something bigger or something more involved.

I've decided to go back to one of my favorite repos that I have worked on during this course which you can find [here](https://github.com/Blank1611/jsonmergeutils/issues/15) Basically what I have to do is update the documentation for the tool. I chose this issue because it was actually me that originally changed the feature in the first place so it would make sense that I get to update the documentation of the tool as well.

I think this demonstrates something that's good about Open Source programming, while it is just a documentation fix, it shows consistency of working on a project, I assume this is also what it would sorta be like in OSD700 (Working on a bigger project throughout the term)

The reason I came back to this one is because of the great experience that I had with the owner of the repo, he was very helpful and actually gave me constructive criticism on the work when I created my last pull request which you can find [here](https://github.com/Blank1611/jsonmergeutils/pull/14) (A total of 28 comments!) I also really like the tool that Blank1611 has created, basically it just compiles a bunch of separate JSON objects into one big object.

For the second issue that I decided to take on I wanted to go for something that was more of a bug/feature request for a repository that I have never worked on before you can find the issue [here](https://github.com/FreeTubeApp/FreeTube/issues/811) This will be my first bug fix that I do in the course, normally in the past pull requests that I made they were always additions of features, so I am excited to dive into some buggy code (Hopefully its not that bad)
Top 5 GAN(Generative Adversarial Networks) Projects to play around with Human Faces
Tags: opensource, python, computerscience, machinelearning
Published: 2020-12-08 06:26:17

###A generative adversarial network (GAN) is a class of machine learning frameworks which when given a training set, this technique learns to generate new data with the same statistics as the training set.

###Here is a link to the article I wrote on Top 5 GAN(Generative Adversarial Networks) Projects to play around with Human Faces

###(#machinelearning #datascience #ai #imageprocessing #GAN #generativeart #GANs)

#[Top 5 GAN(Generative Adversarial Networks) Projects to play around with Human Faces](https://medium.com/datadriveninvestor/top-5-gan-generative-adversarial-networks-projects-to-play-around-with-human-faces-f647040e8a65)
Release CLI tool Python package
Tags: opensource, python
Published: 2020-12-08 06:25:15

### Summary
I worked on releasing Python package.
[Repo link](https://github.com/HenryZerocool/henz-cli)
[Python Package](https://pypi.org/project/henzcli/)

### Features
With this package, people can download and install is in (almost) one line of command.

### Challenges
The first problem was (again) structure of python project. In order to make it works, I had to roll back to the structure I had at the beginning (I knew this was gonna happen) when I started working on this. In the previous task, I had to make it work on GitHub action, so I have to modify the structure to fit that CI. So it is very annoying, and I have to accept that it can only work with one platform. I chose Package platform and dumped Github build.
The second problem was (again) follow wrong instructions. The instruction was to use PyPI test server. I followed and uploaded my tools. Things were ok. But when I download and install on a different machine, I can't install it. I wasted a lot of time debugging it but nothing change the missing packages. So I tried to test my code with another still files. I felt like I cheated for this task. But it still didn't work?! So after a while, I compared everything (except how the actual code works) with a submitted project, the different was he didn't submit to test PyPI server. I tried to upload to actual PyPI server and it works. So why on earth did I have to work with test server in given instructions?!

### Fun
The fun part is inviting anyone (not limited to fellow student) to test your tools. I asked a friend in class because at least, he is a programmer, it will make my life easier :). The test went pretty well. I learnt from it that I should be a little bit more clear in installation instruction. Because right now, I'm just saying Python3 required, but didn't show how to install Python.

### Conclusion
It's good to know how to publish your own package. I know my past project, we had very useful "self-made" npm package, and it's beautiful. It seems easier in Node, npm. I still don't like Python project structures, it is very confusing and annoying :(
Make Simple Alarm in Python
Tags: python, alarm
Published: 2020-12-08 06:19:42

This is a very simple post and i give you guys some more tips about libraries to expand your alarm application,if you have knowledge about any python GUI , You can easily convert this into a GUI application

Always the first things will be installing requirements
As i said this is a simple alarm so we choose simple libraries for this 

At,First install a Library called playsound , to play the sound 
the next thing is datetime module , which is built in python module,so there is no need to install it 


>> Make a new python file , name the file any name you like!!
>> Import the modules 
        from playsound import playsound
        from datetime import datetime

>> Make a function called alarm()
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cmfy2j7scyc98o8m2ryw.PNG)


>> put current_state = False , which means now alarm is not ringing or the time to ring hasnt reached yet...

>> make a varieable and set the time you want to ring , Note write the time in String , also remember datetime module is in 24hr Format 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/io81mbryt7pqu8r1v44w.PNG)


>> Now make a while loop Like this 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q13ac1ze1fwgj0f7doak.PNG)

I explain what is happening here this loops works while the current state is at False , next we set a localtime , datetime.now() returns us current date and time , we strip the hour and minutes using strftime('%H:%M') 
Now we make an IF statement 
if the localtime is equal to the alarm time(which we set at the first) , it will print some text and with the playsound module it will play a music or something when the if statement is correct
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ry8rbepe7datibpqduhc.PNG)

type the path of that music in your computer as parameter for playsound function



That's it hope you liked this post 
make sure to rate this post if alarm worked well
feel free to comment in the post 
Have great day Little Programmers!!