teleren/devto huggingface dataset:
Solving Typescript-TensorflowJS incompat issues
Tags: typescript, tensorflow, npm, angular
Published: 2020-05-30 06:46:58

If you're trying to use [Tensorflow.js](https://tensorflow.org/js) with Angular, which uses Typescript, you might run into an error that looks something like this.

```
node_modules/@types/webgl2/index.d.ts:582:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'WebGL2RenderingContext' must be of type '{ new (): WebGL2RenderingContext; prototype: WebGL2RenderingContext; readonly ACTIVE_ATTRIBUTES: number; readonly ACTIVE_TEXTURE: number; readonly ACTIVE_UNIFORMS: number; readonly ALIASED_LINE_WIDTH_RANGE: number; ... 554 more ...; readonly WAIT_FAILED: number; }', but here has type '{ new (): WebGL2RenderingContext; prototype: WebGL2RenderingContext; readonly ACTIVE_ATTRIBUTES: number; readonly ACTIVE_TEXTURE: number; readonly ACTIVE_UNIFORMS: number; readonly ALIASED_LINE_WIDTH_RANGE: number; ... 555 more ...; readonly MAX_CLIENT_WAIT_TIMEOUT_WEBGL: number; }'.

582 declare var WebGL2RenderingContext: {
                ~~~~~~~~~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:16450:13
    16450 declare var WebGL2RenderingContext: {
                      ~~~~~~~~~~~~~~~~~~~~~~
```
This is a compatibility issue between the existing version of WebGL2(0.0.4) and Typescript 3.6. 

To solve this, just type
```
npm i --save @types/webgl2
```

and rerun the application. 

TF.js should now work without a glitch.

Cheers! Happy coding
5 HTML TAGS FOR SEO OPTIMIZATION
Tags: html, tutorial
Published: 2020-05-30 06:35:49

# <title>

function to display the title on a page and must be relevant to the contents of the content.
How to Optimization:
Write a title with a minimum length of 70 characters and enter a search keyword in the title.

# Tag Meta Description

meta description is a short text to describe the page of a web
Example: <meta name="description" content="your name content">
How to Optimization:
write a description page with a length of 160-300 characters, enter the search keywords in the description.

# Tag Open Graph

is a tag to set how the url will be displayed when it is shared

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/981my13eujqajig4pdve.JPG)

# Heading Tag

is a tag used to arrange pages on web content (h1, h2, h3, h4, h6

Effect of SEO:
- The heading tag will help the search engine to read the contents
- When the page content is well structured it will make it easier for 
  visitors to read.

How To Optimization:
- Use one page h1 tag and separate the section with the next h2 tag
- Enter search keywords in the heading.

# Atribut ALT

is an attribute in the img tag to describe the image.
example: <img src="your-image" alt="your description">

Effect of SEO:
- the image will be indexed in the search engine
- to be displayed to the user if an error occurs when shooting from the 
  server.

How to Optimization:
- use images that are relevant to the content
- enter the search key in the alt attribute, write the character length between 100 - 125.

Finished, congrats for your website can ready to SEO. Just try at home.
Using Better Comments VScode Extention
Tags: vscode
Published: 2020-05-30 06:33:15

## What is Better Comments?
Better Comments is a Vscode extention that lets you be more organized with your comments.

## How I've personally used this extention
The main comments I've been using are:
```
// *
// !
// TODO
```
### // *
This comment is colored similar to the orginial comment we get but sometimes when I'm skimmed my comments it catches my eye. This comment tell you about important information that you may want to be aware of.

### // !
The warning comment, as I like to call it, catches your eye from a mile away. This comment lets the reader ME READ before you do anything to this function/method!

### // TODO
The todo comment is one of my favorites. After a long day of coding I usually have some unfinished features I want to implement or I'm half way in figuring out this bug. This comment will remind me where I left off the pervious day and remind me what I need to still do for the next day.

Thank You for reading! If you've used Better Comments VScode extention let me know in the comments. What do you use Better Comments for?
Uninstall node.js from Ubuntu server
Tags: javascript, node, ubuntu, servers
Published: 2020-05-30 06:25:27

To uninstall node.js from Ubuntu server.

Here are some commands to run.

To remove the node package but keep the configuration file run :
 
   sudo apt-get remove nodejs

To remove both the node package and it's configuration files run :

   sudo apt-get purge nodejs

The final step is to remove any unused files and free up disk space. To do this we run

   sudo apt-get autoremove


We have successfully uninstalled node.js and freed up space.
EXCEL FORMULTS ARE OFTEN USED IN OFFICES
Tags: tutorial
Published: 2020-05-30 05:56:00

Last night I talked with an administrative friend in my office, he told me what excel formulas he often uses in doing his work, here are some formulas ...

# Excel Percentage Formula

Formula Persentase = Number1 / Number Total

# Excel SUM Formula

SUM formula in Excel is used to add more than 2 variables, example:
Formula SUM = SUM(number1:number2)

# Excel Average Formula

The average formula is used to find the average value of a list, example:
Formula Average = AVERAGE(number1:number2)

# Excel Max Formula

The max formula is used to find the highest value of a series of values, example:
Formula Max = MAX(number1:number2)

# Excel Min Formula

The max formula is used to find the lowest value of a series of values, example:
Formula Min = MIN(number1:number2)

# Excel IF Formula

The function of the Excel IF formula is to provide results adjusting to the values ​​in a column, example:
Formula IF = IF(C6>10000;”MAHAL”;”MURAH”)

# Excel Left Formula

The function of the Excel LEFT formula is to take several characters in a word or row of numbers, in order from left to right, example:
Formula LEFT = LEFT(cell to retrieve; number of characters to be displayed)

# Excel Mid Formula

The function of the Excel MID formula is to take several characters in a word or a series of numbers, with a sequence of characters ranging from the order to how many and how many characters are taken, example:
Formula MID = MID(cell to be retrieved; starting from the number of characters; the number of characters to be displayed).

# Excel Clean Formula

The function of the Excel CLEAN formula is to eliminate non-printable characters, example:
Formula Clean = CLEAN(Text).

Thanks for read mydocs, hope your enjoy it.
Object Literal Enhancements
Tags: javascript, webdev, react, node
Published: 2020-05-30 05:44:06

Object literal syntax has received a number of enhancements in es6.

### Property Initialiser Shorthand

When a new object literal is created and populated with properties of the same name that exist in the current scope then a shorthand syntax can be used.

```js
var foo = 'foo';
var bar = 'bar';

var o = {foo, bar};

console.log(o); // {foo: 'foo', bar: 'bar'}
```

### Method Initialiser Shorthand

Methods can now be declared in object literals in a similar way to the new `class` construct.

```js
var o = {
  foo () {
  }
};

console.log(o); // {foo: [Function]}
```

### Computed Property Names

Dynamic property names can be used while creating object literals.

```js
var foo = 'foo';

var o = {
  [foo]: 'bar',
  [new Date().getTime()]: 'baz'
};

console.log(o); // {foo: 'bar', 1428942731913: 'baz'};
```

### Native object merging

The new `Object.assign` function copies properties and methods from source objects into the leftmost target object and returns it.

```js
var o1 = {foo: 'foo'};
var o2 = {bar: 'bar'};
var o3 = {baz: 'baz', foo: 'qux'};

Object.assign(o1, o2, o3); // {foo: 'qux', bar: 'bar', baz: 'baz'}
console.log(o1); // {foo: 'qux', bar: 'bar', baz: 'baz'}
```
Happy Coding 😀
Matrix calculus for deeplearning-part2
Tags: blogging, machinelearning, deeplearning
Published: 2020-05-30 05:33:41

We can’t compute partial derivatives of very complicated functions using just the basic matrix calculus rules we’ve seen [Blog part 1](https://kirankamath.netlify.app/blog/matrix-calculus-for-deeplearning-part1/). For example, we can’t take the derivative of nested expressions like sum(**w** + **x**) directly without reducing it to its scalar equivalent. We need to be able to combine our basic vector rules using the vector chain rule. 
In paper they have defined and named three different chain rules.
1. single-variable chain rule
2. single-variable total-derivative chain rule
3. vector chain rule
The chain rule comes into play when we need the derivative of an expression composed of nested subexpressions. Chain rule helps in solving problem by breaking complicated expressions into subexpression whose derivatives are easy to compute.  

to read complete blog visit my [blogsite](https://kirankamath.netlify.app/blog/matrix-calculus-for-deeplearning-part2/)
A simple way to redirect react-router-dom
Tags: react, javascript, webdev, frontend
Published: 2020-05-30 05:25:50

Well, I was researching how to redirect to another page / component by clicking on a simple button or returning a function and found this simple and easy way:

```js
import { useHistory } from 'react-router-dom';

function app() {
  let history = useHistory();

  const redirect = () => {
    history.push('/your-path')
  }

  return (
    <div>
      <button onClick={redirect}>Redirect</button>
    </div>
  )
}
```

That simple!
I was struggling for a while because most of the examples were about reaction class components and I thought it prudent to leave that way to those who use react function components.

What other ways do you use to redirect?
Making Google Charts responsive
Tags: googlecharts, angular, responsive, eventlistener
Published: 2020-05-30 04:59:31

I used the npm package for google charts, called [angular-google-charts](https://www.npmjs.com/package/angular-google-charts), to display charts in my Angular app. 

Setting the width and height as percentages does not make the graph responsive. Moreover, wrapping the chart element in a div and making that div responsive also doesn't work. 

Here's a hack I developed to make it work.


```
<!--mycomponent.component.html file -->
<!-- This is the container element of your chart-->
<div (window:resize) = "resetWindowSize($event)">
    <google-chart>
    ....
    </google-chart>
</div>
```

This is an event listener that will listen for changes to window size, and on an event capture, will call the resetWindowSize() function.

```
//mycomponent.component.ts file
//setting state variables for chart parameters


width = document.documentElement.ClientWidth;
height = document.documentElement.ClientHeight;
....
resetWindowSize(event){
    //Reset the width and height based on current window size
    this.width = event.target.innerWidth;
    this.height = event.target.innerHeight;
    makeGraph();
}

```

Thus, on changing window size, the resetWindowSize function is triggered, and sets the width and height based on the current window size.

Note that you might have to re-call the function that makes the graph. That's the way it works for me.

Cheers! Happy Coding
Scrape Amazon Product Data for Free
Tags: webscraping, ecommerce, amazon, pricemonitoring
Published: 2020-05-30 04:55:10

Do you want to scrape amazon product data for competitor monitoring?
ProWebScraper can help you to extract Amazon product details such as product name, pricing, rating, specs, description, etc. And get it in CSV, Excel and JSON formats
https://prowebscraper.com/ecommerce/amazon-scraper
Memory Game : Based on JavaScript
Tags: javascript, devops, codenewbie, codepen
Published: 2020-05-30 04:36:59

#Memory Game

Live - https://memorygamebyraghav.netlify.app/

A retro grid-based game in vanilla JavaScript, HTML and CSS

For full description visit. 
https://github.com/raghavkhanna30/Memorygame/blob/master/README.md

#Script/code.

//create your board
  function createBoard() {
    for (let i = 0; i < cardArray.length; i++) {
      var card = document.createElement('img')
      card.setAttribute('src', 'images/blank.png')
      card.setAttribute('data-id', i)
      card.addEventListener('click', flipCard)
      grid.appendChild(card)
    }
  }

#Check for match function
// function checkForMatch() {
    var cards = document.querySelectorAll('img')
    const optionOneId = cardsChosenId[0]
    const optionTwoId = cardsChosenId[1]
    //if(optionOneId == optionTwoId) {
      cards[optionOneId].setAttribute('src', 'images/blank.png')
      cards[optionTwoId].setAttribute('src', 'images/blank.png')
      alert('You have clicked the same image!')
    }
    else if (cardsChosen[0] === cardsChosen[1]) {
      alert('You found a match')
      cards[optionOneId].setAttribute('src', 'images/white.png')
      cards[optionTwoId].setAttribute('src', 'images/white.png')
      cards[optionOneId].removeEventListener('click', flipCard)
      cards[optionTwoId].removeEventListener('click', flipCard)
      cardsWon.push(cardsChosen)
    } else {
      cards[optionOneId].setAttribute('src', 'images/blank.png')
      cards[optionTwoId].setAttribute('src', 'images/blank.png')
      alert('Sorry, try again')
    }
    cardsChosen = []
    cardsChosenId = []
    resultDisplay.textContent = cardsWon.length
    if  (cardsWon.length === cardArray.length/2) {
      resultDisplay.textContent = 'Congratulations! You found them all!'
    }
  }

#Flipcard

  //flip your card
  function flipCard() {
    var cardId = this.getAttribute('data-id')
    cardsChosen.push(cardArray[cardId].name)
    cardsChosenId.push(cardId)
    this.setAttribute('src', cardArray[cardId].img)
    if (cardsChosen.length ===2) {
      setTimeout(checkForMatch, 500)
    }
  }

  createBoard()
})

For full code you can visit
https://github.com/raghavkhanna30/Memorygame/blob/master/app.js
What is Deployment, Service, Secret and ConfigMap in Kubernetes?
Tags: kubernetes, devops, beginners, opensource
Published: 2020-05-30 04:32:51

Intend of blog is to explain use of following kubernetes resources using phpMyAdmin application deployment:
- Deployment
- Service
- Secret
- ConfigMap

Before going deep dive into deployment architecture let's first understand this concepts.

### Deployment
Deployments represent a set of multiple, identical Pods with no unique identities. Learn more [here](https://kubernetes.io/docs/concepts/workloads/controllers/deployment/)

### Service
Services are use to group pods together using labels & selectors. Learn more [here](https://kubernetes.io/docs/concepts/services-networking/service/)

### Secret
Secrets are used to store confidential attributes such as password, API key etc. Learn more [here](https://kubernetes.io/docs/concepts/configuration/secret/)

### ConfigMap
ConfigMaps are used to store configuration parameters such hostname, port etc. Learn more [here](https://kubernetes.io/docs/tasks/configure-pod-container/configure-pod-configmap/)

## Architecture

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/35yok8diceflt5s1jhru.JPG)

phpMyAdmin application comprises of two components UI (phpMyAdmin) and database (MySQL). 

## Prerequisites:

### Clone github repository
```
git clone https://github.com/sagar-jadhav/kubernetes-essentials.git
```

### Go to `session_1` directory
```
cd ./kubernetes-essentials/session_1/
```

## Step 1: Create demo namespace

```
kubectl create namespace demo
```

## Step 2: Set current namespace to demo

```
kubectl config set-context --current --namespace=demo
```

## Step 3: Create secret db-secret
Store MySQL root password in secret.

```
kubectl create -f secret.yaml
```

## Step 4: Create configmap db-config
Store host & port in configmap

```
kubectl create -f configmap.yaml
```

## Step 5: Create deployment for MySQL

```
kubectl create -f db-deployment.yaml
```
```
kubectl get pods --watch
```
Exit when pod goes into running state


## Step 6: Create service for MySQL
Here service type `ClusterIP` is used so that it is accessible only inside the cluster. 

```
kubectl create -f db-service.yaml
```

## Step 7: Create deployment for phpmyadmin

```
kubectl create -f phpmyadmin-deployment.yaml
```
```
kubectl get pods --watch
```
Exit when pod goes into running state

## Step 8: Create service for phpmyadmin
Here service type `NodePort` is used so that it is accessible outside the cluster. 

```
kubectl create -f phpmyadmin-service.yaml
```

## Step 9: Browse phpmyadmin application

Go to browser and browse http://IP_ADDRESS:30030. Login with `root` user & `test` password

here IP_ADDRESS is the ip address of virtual machine where kubernetes is running.
 
## Demo
{% youtube 0u1RXY43JhY %}
Saving USB drives that Mac won't recognise
Tags: tips
Published: 2020-06-16 14:21:14

---
title: Saving USB drives that Mac won't recognise
published: true
date: 2020-05-30 02:48:54 UTC
tags: tips
canonical_url: http://leesheppard.github.io/tips/2020/05/30/saving-usb-drives-not-being-recognised.html
---

![](https://res.cloudinary.com/leesheppard/image/upload/v1591440601/Stock%20photos/yucel-moran-N_7LoiHWhZE-unsplash.jpg)

_Photo by Yucel Moran on Unsplash_

Ever plugged in an external hard drive or USB only to have it blink and not show up in your network?

I had a system crash unexpectedly on my desktop Mac and when it rebooted, I had trouble with the system starting up. There was an external hard drive still plugged in and the hardware was attempting to use it to boot a system to load with.

Unplugging the hard drive allowed the system from the internal drive to boot successfully. But the external hard drive disappeared when plugged back in.

What is happening? well Mac wants to fix the boot files on the external hard drives to prevent any issues with loss of data. It runs `fsck` which stands for “File System Consistency Check,” is a command-line tool that reviews and repairs the underlying structure of a hard drive.

If you open `Activity Monitor` on the Mac with the hard drive plugged in, you’ll see this running. Force quit it.

Run `Disk Utility` and you’ll see the disk in the left pane window, if it isn’t mounted you can click to mount in the far right top of the window.

Select the hard drive and Repair Permissions. It may take a while but will resolve the issues with viewing the hard drive contents.

Alternatively you can try in `Terminal` to use the following commands:

```
$ diskutil list

```

Find your HDD identifier.

```
$ diskutil unmountDisk /dev/disk*
$ diskutil eject /dev/disk*

```

Replace \* with your version
Day 24 of #100DaysOfCode: Design the Prototype of the Website - Content Page and Shared Components
Tags: 100daysofcode, webdev, prototype, react
Published: 2020-05-30 01:33:40

## Introduction
I begin to design and develop the prototype for[Day 20 of #100DaysOfCode: Brainstorming for CS50W's final project](https://dev.to/jenhsuan/day-20-of-100daysofcode-brainstorming-for-cs50w-s-final-project-1pkb) Today. 

My target is to build a website for readers to browse my articles easily. The technical stacks will be Django/DRF + PostgreSQL + ReactJS/Next.js.

This article is to note common components or skills for designing the content page and the shared components. 

* Content page: may show your products and provide operation choices for readers  
* Shared components: may include *NavBar*, *SideBar*, *Footer*, etc

## Part 1. Content page
#### 1. Modal
* Sometimes we need modal to help or teach users doing the next actions. The package I used is *react-bootstrap*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/20qxcyxq0zugii036f8t.png)

#### 2. Pagination
* Pagination is important if we have to show many products to users. The package I used is *react-paginate*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/03psl5368qiztufgkrbr.png)

#### 3. Transition
* We can also make the website naturally by adding transitions if the website provides filters or pagination. The package I used is *react-paginatereact-transition-group*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8kp6af0f9m1io52dyurc.gif)


## Part 2. Shared components
#### 1. NavBar
* The most common components on NavBar are *Brand logo*, *About*, *Tools*, *Sign in/Sign out/Sign up* 
* The things on NavBar depends on the user has login or not
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ccybblj8dqkz6prsteyl.png)

#### 2. Side bar
* The things on Side Bar depends on what kind of abilities you want to provide to users

#### 3. Footer  
* The most common components on Footer are *slogan*, *call-to-action*, *social media buttons*, *copy right text* 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2hhr33xgerjicf1d7j32.png)

## About me
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman
Leetcode - Remove Duplicates from Sorted Array (with JavaScript)
Published: 2020-05-30 00:54:32

Today I am going to show how to solve the Leetcode Remove Duplicates from Sorted Array algorithm problem.

Here is the problem:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/brs8hfjwer32lypdjdiu.png)

I take the first element (let i = 0) of a sorted array and compare it to the next elements. If the next element is a duplicate, it will be skipped. 

If the next element is not a duplicate, I will copy its value to the element at the index i+1.

I could’ve created a new array and pushed elements there. But as required in the problem, I have to modify the existing array instead. 

I repeat the same process again until the loop reaches the end of the array.  The function then returns the length of the array.

```javascript
var removeDuplicates = function(nums) {
    if(nums.length == 0) return 0;
    
    let i = 0;
    for (let j = 1; j < nums.length; j ++){
        if(nums[j] !== nums[i]){
           i++;
           nums[i] = nums[j];
        }
    }
    
    return i + 1
};
```
Um, What's Next
Tags: help
Published: 2020-05-30 00:44:40

Well, I guess this will be my first post. Woot Woot. 
What better way to start than to share what I've been working on and gather direction/feedback as well. 

**What have I been working on?**

Basically, a friend presented me with the opportunity to work on an app over the course of 8 weeks. Sure, I love to challenge myself so I'm game. Plus, we would have a team of 4-5 so that will be extra support. Over the course of the weeks, things change and now it's just the two of us (friend and I). NO worries, let's keep pushing for these two weeks. 

We are working on an app that's a digital registry. This is where I decided to build the app with Python Flask and use SQL Alchemy/ MySQL as the database. 

**Get to the point**

The app portion is built and tied to ngrok in order for my partner to see it. Her speciality is front-end so... what do we do now? 

I've worked with front-end on a solo aka local end. My dilemma is the collaboration portion. 

1. What would my partner need to work on the front-end? 
2. ngrok is only for display or preview purpose, correct?
3. Where do we go from here? 

The great thing is progress has been made for this challenge, even if it will not be put out on a mass scale. Major kudos for making this far with two more weeks to go. 

Um, what's next...*crickets in my mind*