teleren/devto huggingface dataset:
DS & Algos for Interviewing in Python
Tags: python, beginners, interviewing, datascience
Published: 2020-09-09 13:18:47

I am preparing to interview at FANG companies, and am reviewing the material I've learned at the [Data Structures & Algorithms Nanodegree](https://www.udacity.com/course/data-structures-and-algorithms-nanodegree--nd256) at Udacity.

Here's an overview of the topics that are covered in the Nanodegree:
1. Introduction
  1. Python Refresher
  2. How to Solve Problems
  3. Efficiency
  4. -- Solve some problems --
2. Data Structures
  1. Arrays & Linked Lists
  2. Stacks & Queues
  3. Recursion
  4. Trees
  5. Maps and Hashing
  6. -- Solve some problems --
3. Basic Algorithms
  1. Basic Algorithms
  2. Sorting Algorithms
  3. Faster Divide & Conquer Algorithms
  4. -- Solve some problems --
4. Advanced Algorithms
  1. Greedy Algorithms
  2. Graph Algorithms
  3. Dynamic Programming
  4. A*
  5. -- Implement A* --

This blog series is the place where I'm planning to collect and save materials for future reference.
Customizable & responsive Roadmap template at UI Bakery
Tags: template, webdev, uiweekly, lowcode
Published: 2020-09-09 13:18:22

Hi there,

We've published a free and fully customizable #roadmap template with a responsive design. Free.

You can use it to visualize your own product strategy, monitor upcoming features, check the planned and implemented improvements, etc. And share the created roadmap with your team & clients to keep them posted.

Check it here -> https://uibakery.io/templates/roadmap-template?utm_campaign=ui_bakery%20-%20templates%20-%20roadmap%20-%20cacq%20-%20xx%20-%20views&utm_source=devto&utm_medium=general&utm_content=roadmap_release
Generic Snippets - DOM Element Creation
Tags: html, javascript, beginners, productivity
Published: 2020-09-09 13:17:20

Hey guys, here is one of my generic javascript snippets that helped me when I was working with DOM elements using Vanilla Javascript. 

For a very long time, I was used to writing stuff like 
```javascript
let element = document.createElement('div');
element.setAttribute("class", "my-class");
element.style.background = "red";
element.innerText = "Hello";
element.addEventListener('click', function(event) {
  event.preventDefault();
  console.log("Clicked!")
})
document.body.append(element);
```
all across the code.

Even though this code was only around 10 lines, It was repeated in so many places across the project. So I came up with this generic snippet that is defined only once in the entire project. It might look big, but I found it very useful when working with multiple DOM element creation. 

```javascript
const createElement = function({ type, styles, attributes, props, eventHandlers, appendTo }) {
  let elementType = type || 'div';
  let elementStyles = styles || {};
  let elementAttributes = attributes || {};
  let elementProps = props || {};
  let elementEventHandlers = eventHandlers || {};
  let elementAppendTo = appendTo || 'body';

  let element = document.createElement(elementType);
  for (let key in elementStyles) { element.style[key] = elementStyles[key] }
  for (let key in elementAttributes) { element.setAttribute(key, elementAttributes[key]) }
  for (let key in elementProps) { element[key] = elementProps[key] }
  for (let key in elementEventHandlers) { element.addEventListener(key, elementEventHandlers[key]) }
  document.querySelector(elementAppendTo).append(element);
  return element;
}
```

The function took all the commonly used properties and attributes of an element and looped them and applied the respective properties.

Since the type, style, attr, props and events were commonly used everywhere, I added those as the params. Finally I added the appendTo param, because obviously when we create an element, we need to add to the HTML DOM right. This function helped me save lots of time by just calling it like this 
```javascript
createElement({
  type: 'button',
  styles: {
    "color": "#fff",
    "background-color": "#3da6ed",
    "border-radius": "2px",
    "border": "none",
    "outline": "none",
    "cursor": "pointer"
  },
  attributes: {
    "class": "p-3"
  },
  props: {
    "innerText": "Click Me!"
  },
  eventHandlers: {
    "click": handleButtonClick
  },
  appendTo: "#element-creator"
})
```

This function call would create a button with all the attributes, props and styles and attach a click listener. The syntax was also really easy to understand.

So this is one the snippets that I use whenever I work with <b>only Vanilla JS</b>. Hope you guys find it useful :)
TIL - Ajax (Asynchronous requests) with Fetch and Axios + React
Tags: react, javascript, todayilearned, beginners
Published: 2020-09-09 12:33:42

Instead of retrieving a whole webpage once, ajax allows us to retrieve individual data items from the server to update sections of a webpage without having to load an entire new page.
This led to the creation of technologies that allow web pages to request small chunks of data using APIs like XMLHttpRequest or — nowadays — the Fetch API. 

Fetch does not retrieve the data immediately. It takes some time for the request to reach the server, and for it to respond with the requested data. Therefore, a mechanism exists to indicate that you want to execute code only after you have obtained the answer to the request.

# A basic fetch request

``` javascript
fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));
```

1. calculate the url to be queried, which we then switch to fetch
2. wait for data response (async) & then resolve it as json
3. then take data & do something with the data obtained

```javascript
const fetchGitHubProfileJSON = () => {
  const username = 'AnneQuinkenstein';
  const url = `https://api.github.com/users/${username}`;
  fetch(url)
    .then((res)=> res.json())
    .then((profile) => {
    const profileHtml = `
        <p><strong>${profile.name}</strong></p>
        <img src="${profile.avatar_url}" />
      `;
      document.querySelector('#github-profile').innerHTML = profileHtml;
    });

fetchGitHubProfileJSON();
``` 
[cheatsheet for fetch](https://devhints.io/js-fetch)

#Axios

Advantages comparing to fetch: the automatic transformation of JavaScript objects into JSON and vice versa & better error management mechanisms
`$ yarn add axios`
[axios](https://github.com/axios/axios)

```javascript
 const fetchPokemonJSON =()=> {
  const pokemonId = 1;
  const url = `https://pokeapi.co/api/v2/pokemon/${pokemonId}`;
  axios.get(url)
    .then(res => res.data)
    .then(pokemon => {
      console.log('data decoded from JSON:', pokemon);
      const pokemonHtml = `
        <p><strong>${pokemon.name}</strong></p>
        <img src="${pokemon.sprites.front_shiny}" />
      `;
      document.querySelector('#pokemon').innerHTML = pokemonHtml;
    });
}

fetchPokemonJSON();
``` 
[GitHub](https://github.com/AnneQuinkenstein/simpsonquote) for [first Example](https://annequinkenstein.github.io/simpsons-quote/)

#API with React
Get Data from the API & store it in App's state. 
The "parent" component will make the API calls, and pass the received information to the "child" component(s).
[axios with React](https://youtu.be/oQnojIyTXb8)

{% codesandbox epic-mclaren-7zygh module=/src/components/QuoteCard %}
Running Oracle Database on Kubernetes and worried about Backup & Recovery?
Tags: oracle, kubernetes, cloudnative, database
Published: 2020-09-09 12:06:05



I have been using Oracle database for more than a decade and one of the challenging tasks as a DBA was always keeping the configurations in the consistent state across environments and I can't forget those nights when I had to recover the database when someone dropped critical data. 

Time has changed. In the last 7 years, since the introduction of docker and Kubernetes, the resiliency and DevOps culture have improved the situation for most of the stateful applications but Oracle has always discouraged running Oracle database as a containerized application. 

If you are interested, read in this [post](https://www.infracloud.io/blogs/oracle-database-backup-using-kasten-k10/) where we discuss, how to containerize the oracle database and run it on Kubernetes. It answers how not to worry about backup and recovery using Cloud-native solutions like the Kasten K10 platform. It uses a snapshot-based backup of your Kubernetes application and state (data) and provides application-consistent backups. We have tried this on Oracle 12c to 19c and it works without any issues.

Please [try](https://www.infracloud.io/blogs/oracle-database-backup-using-kasten-k10/) and let me know your experience. 

Anjul
Hack4Squad - Bash Hacking Utility 
Tags: bash, security, shell, hacking
Published: 2020-09-09 12:30:44

I started this little project called "Hack4Squad". 
Its a bash hacking utility with a collection of different tools from NMAP scans, web security scanners to wireless networks auditing and OSINT ...etc
Check the repository and you can help improving it :D 
Link: 
https://github.com/KMx404/Hack4Squad
Badge Action
Tags: actionshackathon, javascript, react, serverless
Published: 2020-09-09 12:24:36

### My Workflow

I have published a serverless SPA & PWA made with React, which is deployed directly to GitHub Pages using it's own GitHub Workflow. I wanted to generate a test coverage badge automatically during CI/CD, and store it into the same repository (no 3rd parties servers involved).

First, I saw [Angular Coverage Badges](https://github.com/demyanets/angular-coverage-badges-action), which was mostly what I wanted:
- Take a test coverage result file
- Extract relevant info from it
- Generate the badge
- Upload the badge to my repo, to the same branch that fired the build pipeline

Then, I made some additions and created a [Pull Request](https://github.com/demyanets/angular-coverage-badges-action/pull/3) to fulfill my needs (basically, parse test coverage XML files). After waiting for a response (still waiting), I decided it was not exactly what I wanted: I prefer to use mini-actions and re-use their results as inputs for other mini-actions. This way, I can easily change the pipeline, having code split into as small actions as possible and then compositing them, like [the way React works](https://reactjs.org/docs/composition-vs-inheritance.html).

So now, my [workflow](https://github.com/emibcn/Rac1.js/blob/master/.github/workflows/node.js.yml) looks like:
- Build & test process (has not changed build nor deploy)
- Process XML coverage data using a mini PHP action [gha-clover-test-coverage-check](https://github.com/johanvanhelden/gha-clover-test-coverage-check). It needed some [minimal additions](https://github.com/johanvanhelden/gha-clover-test-coverage-check/pull/3).
- Get processed data from previous Action Output into a self-made action to generate the badge [Badge Action](https://github.com/emibcn/badge-action). Here, coverage data is used to fill badge value (coverage percentage) and to decide value background color.
- Save generated badge into a dedicated branch, which stores the badges generated from testing any branch.

**Next steps**: Generate container actions (no other code than `action.yml`) to join mini-actions and glue-actions (little `run` to get, parse or adapt a value) and help me and others to do the same, in a much easier way, adaptable to everyone needs.

### Submission Category: 
- Maintainer Must-Haves
- DIY Deployments
- Phone Friendly

### Yaml File or Link to Code
- Code of the first action I submitted code to: {% github https://github.com/demyanets/angular-coverage-badges-action/pull/3 %}
- Code of the second action I submitted code to: {% github https://github.com/johanvanhelden/gha-clover-test-coverage-check/pull/3 %}
- Code of the action I made {% github https://github.com/emibcn/badge-action %}
- Code of the JS PWA app using those actions {% github https://github.com/emibcn/Rac1.js %}
- Production deploy of this [app at GitHub Pages](https://emibcn.github.io/Rac1.js/)

### Additional Resources / Info

The action I made is a KISS interface for a JS package that generates an SVG file from passed attributes. The JS package is [gradient-badge](https://github.com/bokub/gradient-badge).
React-router urls don't work when refreshing or writing manually or pasting- solved - React
Tags: react, javascript, reactnative, html
Published: 2020-09-09 12:22:32

In this video, I will show you how I solved this problem which I recorded when I found the solution

##### The short answer is:  use `` Hashrouter ``.

live app:  https://devswag.netlify.app/
stackoverflow: https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually
official docs: https://reactrouter.com/web/api/HashRouter
github code: https://github.com/Alidhuniya/devT-shirt-React-with-Contentful

{% youtube GuuWQQ3sDNE %}
Daily Developer Jokes - Wednesday, Sep 9, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-09-09 12:00:28

---
title: "Daily Developer Jokes - Wednesday, Sep 9, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Wednesday%2C%20Sep%209%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259427b3da.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why do all HTML emails get blocked?

___A:___ Because they are all `<span />`.
 -->
Tests, build, deliver : Vue project with Storybook
Tags: actionshackathon, vue, storybook, testing
Published: 2020-09-09 11:54:41

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)


### My Workflow
This Github Action workflow presents a complete testing process with Unit Tests, e2e Tests and visual Tests for a Vuejs project.

The project includes Storybook module useful to isolate components and make visual tests.



#### Step of the workflow

![workflow](https://dev-to-uploads.s3.amazonaws.com/i/g8fnqp69888dvykq1jr1.png)

1. Launch lint
2. Launch Unit Test and send coverage report to [CodeCov](https://codecov.io/) with [CodeCov Action ](https://github.com/marketplace/actions/codecov)
2. Launch e2e Test
2. Launch build
2. Launch Storybook build and test all components with [Chromatic](https://www.chromatic.com/) and
[Chromatic Action](https://github.com/marketplace/actions/chromatic-action)
 

### Submission Category: 
Maintainer Must-Haves

### Yaml File or Link to Code
{% github https://github.com/idesys-dev/jeh-maker %}
[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `` to share a GitHub repository)


### Additional Resources / Info

- https://storybook.js.org/
- https://www.chromatic.com/
- https://vuejs.org/
[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )
Wednesday Links - Edition 2020-09-09
Tags: java, spring, jvm, kubernetes
Published: 2020-09-09 11:42:37

From Eager to Fused to Lazy ( 4 min read ) 🦥
https://medium.com/javarevisited/from-eager-to-fused-to-lazy-66450e290002

Heap Snapshotting ( 3 min read ) ⛰️
https://inside.java/2020/08/26/heap-snapshotting/

Spring Boot 2.4 support ConfigMaps/Secrets as PropertySources ( 20 sec read ) 🗺️
https://twitter.com/sergialmar/status/1301269372263170049

Micro optimizations in Java. String.replaceAll ( 6 min read ) 👝
https://medium.com/javarevisited/micro-optimizations-in-java-string-replaceall-c6d0edf2ef6

Bulk vs individual compression ( 2 min read ) 🗜️
https://techblog.bozho.net/bulk-vs-individual-compression/

How to Tell Time in Java’s Garbage Collection ( 7 min read ) ⌚
https://devblogs.microsoft.com/java/how-to-tell-time-in-javas-garbage-collection/
install VirtualBox on windows 10
Published: 2020-09-09 11:24:36

Windows OS is the second most used operating system in the world. However, the first is still captured by macOS. today we are going to guide you on how to install VirtualBox on Windows 10.

firstly, VirtualBox is the virtual machine software by Oracle Corporation that is free and open source. This software is used to install a guest OS on a host OS. Moreover, it also enables you to install multiple OSes on one hardware.

1. Present VirtualBox

VirtualBox runs on Windows machines, Macs, and Linux machines, so you'll have the choice to present Windows 10 in practically any stage. Get it from here, download it, and present it. No exceptional headings required.

[ Keep up on the latest thought organization, pieces of information, how-to, and examination on IT through Computerworld's leaflets. ]

2. Get the Windows 10 Technical Preview ISO File

Head to this page to get it. Exactly when you go there, click "Start," and stick to the bearings and prompts until you finally get to the download page. Pick your language and whether you have to download the 32-piece or 64-piece structure. I downloaded the 64-piece variation since I presented it on a 64-piece machine. A couple of individuals have uncovered issues with presenting the 64-piece variation with VirtualBox, anyway my foundation relinquished a hitch. Record where you downloaded the ISO archive since you'll need to understand that later.


For more information, you can follow the instructions of the following article.

https://techvatan.com/install-virtualbox-on-windows-10/


Moreover, you can also read the following article. and get more knowledgeable information


https://techvatan.com/install-vmware-workstation-on-windows-10/
How can i access the request object inside a nuxtJS module?
Tags: help, nuxt, request
Published: 2020-09-09 10:59:44

{% stackoverflow 63809787 %}

I'm trying to create a nuxtJS module to make some changes to the routes based on the URL or request, i simply want to access the request.header.host inside a nuxtJS module but I'm unable to get it, i tried to check it process.server, this, context but unable to get the request object, i just want to get the full domain only, so how can I do that?
A Guide to Start In Data Science Field.
Tags: datascience, machinelearning, python
Published: 2020-09-09 10:49:34

Data science is an inter-disciplinary field that uses scientific methods, processes, algorithms and systems to extract knowledge and insights from many structural and unstructured data.

It's a new Oil to New world, We will discuss here how to start in DS/ML filed.

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

#### Step 1: Choose A programming language

Python and R both are good languages to start your Data science career. R tends to be more popular in academia, and Python tends to be more popular in the industry, but both of language a lot of package t easy your work

#### Step 2: Learn data analysis, manipulation, and visualization with pandas

Data analysis, manipulation and visualization is an important part of Data science project. As you know the Data more, you will predict it better.


Libraries to learn In python for Data-Analysis

- Numpy
- Pandas
- Matplotlib
- Seaborn

#### Step 3: Learn machine learning with scikit-learn

Scikit-learn is a machine learning library. To get start DS/ML. You have to learn it.
It has a lot of supervised and unsupervised implemented in Package and it's an open-source tool. Check more at https://scikit-learn.org/

#### Step 4: Practice More and More.

Data Science and Machine learning is a growing field, you will face new technology and different problem approach every time. To solve the Data science problem you have to Practice a lot.



#### Resources for Data Science and Machine learning

- [Sentdex](https://www.youtube.com/user/sentdex)
- [Data Science Dojo](https://www.youtube.com/user/DataScienceDojo)
- [3blue1brown](https://www.youtube.com/channel/UCYO_jab_esuFRV4b17AJtAw+)
- [Krish Naik](https://www.youtube.com/user/krishnaik06)
- [Freecodecamp](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)


#### Books Recommendation to start
- The element of statistical learning
- Hand's on Machine learning with Scikit learn, Keras and TensorFlow
- Understanding Machine learning Theory
Deep learning with Pytorch
- Machine learning mastery with Python
Python For Data analysis

For more details Download Telegram app and visit https://t.me/machinelearningworld

#### Libraries of Learn Data science 
- Numpy
- Pandas
- Matplotlib
- Seaborn
- Tensorflow
- Keras
- PyTorch
- Scikit-Learn
- XGBoost
- PlotLy
What is your experience as/with software tester(s)?
Tags: discuss, watercooler
Published: 2020-09-09 10:49:29

Software testers are often stereotyped by developers and vice versa. I'm curious to see what the community here thinks of software testers.

So, the question for the devs: what's your experience with software testers? Do you work with the stereotypical software tester that wants to break your application at all cost, or do they have a different mindset?

For the testers in our community, what's your experience being a software tester? Do you feel like you're getting stereotyped by the devs around you? Or do you stereotype the devs? ;)
How To Add A New Line in Python ? | The \n in Python |
Published: 2020-09-09 10:35:55

The new line character in Python is: \n 
It is made of two characters:
A backslash and the letter n.
If you see this character in a string, that means that the current line ends at that point and a new line starts right after it:

               >>>print ("Onions\nGarlic\nMeat")
               >>>Onions
               >>>Garlic
               >>>Meat
Simple encryption for hiding passwords
Tags: javascript, python
Published: 2020-09-09 10:35:29

Recently I needed to pass JSON between Simple Java Script app and piece of Python code used in TeamCity build configuration. That JSON was containing passwords and TeamCity was unfortunately showing it in UI. 

I tried playing with Team City password hiding features, but those are fairly limited and not able to be passed between builds in the chain. 

I implemented a very simple encryption on both sides (JS and Python) and I am encrypting the password in JSON. This way Team City shows only the encrypted password, I can have all the passwords I need in my JSON.

I choose XOR cipher as my encryption method. I could not add any crypto libraries into my Python code and XOR is super easy to implement in both languages. I base64 encode the result of the encryption to make it nicer string. 

**Here is my implementation for JS**
```javascript
function encode(key, data) {
    return btoa(xorEncrypt(key, data));
}

function xorEncrypt(key, data) {
    return _.map(data, function(c, i) {
        return c.charCodeAt(0) ^ keyCharAt(key, i);
    });
}

function keyCharAt(key, i) {
    return key.charCodeAt( Math.floor(i % key.length) );
}
```
I use undescore.js here. 

**Here is my implementation for Python**
```python
import base64
import math


def key_char_at(key, i):
    return key[math.floor(i % len(key))]

def decode(key, password):
    base64_bytes = password.encode('ascii')
    password_bytes = base64.b64decode(base64_bytes)
    decodedPassword = password_bytes.decode('ascii')
    password_array = decodedPassword.split(",")
    finalPassword = []
    for i in range(len(password_array)):
        finalPassword.append(chr(int(password_array[i]) ^ ord(key_char_at(key, i))))
    return ''.join(finalPassword)
```