teleren/devto huggingface dataset:
Optimize Your Content Length - eGoodMedia
Published: 2021-02-12 10:01:22

Earlier content writing was all about publishing content having a word count between 200-300. Most of the blog used to focus on quantity, not quality. The more content you create and publish, the more traffic you will get on your website. These types of strategies were followed by many websites. 

But Today Things have totally changed creating short blogs may grab user attention but not the search engine. Even if you go through our contents then you will find most of the blogs containing  1800+ words with a publishing gap of two days. 

<a href="https://www.egoodmedia.com/create-seo-friendly-content-to-boost-website-traffic-and-sales-tips-to-follow-in-2020/">Read more</a>

Read more Articles:-
<a href="https://www.egoodmedia.com/how-to-rank-in-the-people-also-ask-boxes-in-serps/">How To Rank In The ‘People Also Ask’ Boxes in SERPs? </a>

<a href="https://www.egoodmedia.com/social-media-product-launch-strategy-7-ways-to-create-buzz-for-an-upcoming-product/">Social Media Product Launch Strategy</a>

Contact Details:-
1-6046704333
422 Richards St Unit 170, Vancouver, BC V6B 2Z4, Canada

<a href="https://www.egoodmedia.com/">Seattle WordPress Website Design</a>

Visit Reference Profile Websites:-

http://bit.ly/3qh6rQ9
<a href="https://www.egoodmedia.com/how-social-media-engagement-has-changed-during-covid19/">Social media engagement during covid-19</a>
http://bit.ly/3rFF3vs
http://bit.ly/3aWgTWQ
http://bit.ly/2MP8Lj3
http://bit.ly/3rMPRrE
https://bit.ly/2MRVLt0
http://bit.ly/3tLiszD
http://bit.ly/2Nk5E2i
http://bit.ly/3jGnlVQ
https://bit.ly/3jFTnl1
http://bit.ly/3jEtSR2
http://bit.ly/375txlc
<a href="https://www.egoodmedia.com/google-image-search-to-drive-organic-traffic-on-your-website-in-2020/">Drive organic traffic image search</a>
http://bit.ly/2MQ8RXL
http://bit.ly/374kpNW
http://bit.ly/2MQ8NY1
https://bit.ly/3pfiw72
http://bit.ly/3tSjl9l
http://bit.ly/3bdynyj
https://bit.ly/3tPHpK8
http://bit.ly/3jPpFKs
http://bit.ly/3jPpGy0
http://bit.ly/3jHTH2t
HOLO-HACKATHON, develop and submit your Desktop AR app and have a chance to win an Alienware gaming laptop
Tags: unity3d, gamedev, news, discuss
Published: 2021-02-12 09:54:48

HOLO-HACKATHON, develop and submit your Desktop AR app using Holo-SDK a Unity plugin, and have a chance to win an Alienware gaming laptop

Hi guys!

We are excited to announce the HOLO-HACKATHON event, the competition for developing a new Desktop AR application. If you are interested in AR and ready to share your idea, this is a great opportunity. Also, participants have a chance to win an Alienware gaming laptop.

More details: www.holo-sdk.com/holo-hackathon
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v3w4tbbqyxkq3w01t4ne.png)
Day 37,38:100DaysOfCode
Tags: 100daysofcode, programming, productivity
Published: 2021-02-12 09:35:45

still left with one sem exam...

started with codechef long yesterday..
did 2 in a row

.then stucked in 3 with some complexity problems so just got it partially right,,,,.
...watched some dp lectures...(few 1-2 problems for easy level on dp at leetcode)

..then next day started with that same ques on codechef
changed my apporach with a nlogn solution and got the third one right,,,
for the 4 one got a approach with sieve prime and got the 4 one right as well...

still trying ahead to solve some more(2 days left for the contest to be over)...
lets see....


You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
Need ideas on how to implement.
Tags: javascript, animations, responsive, gsap
Published: 2021-02-12 09:34:55

Hello everyone,  I'm trying to make a site exactly from this behance site for practice:

https://www.behance.net/gallery/56740753/Mind-Inventory-website

So far i have tried using Gsap and javascript, but animations are collapsed if i change the screen resolution. Can you please suggest me an idea on how to implement this?
7 Ways to Get Motivated When You’re Feeling Low
Tags: productivity
Published: 2021-02-12 09:34:00

Motivation can be elusive at the best of times, but if you’re feeling low, getting motivated can be almost impossible. The last thing you should do is completely give up on your goal – if anything, taking positive steps towards it can improve your mood. 

[Read full article on how to get motivated when feeling low](https://blog.doit.io/how-to-get-motivated-when-feeling-low/)
Bitbucket pipelines composer cache dir empty 🤷‍♂️
Tags: composer, bitbucker, pipelines, cache
Published: 2021-02-12 09:18:44

---
title: Bitbucket pipelines composer cache dir empty 🤷‍♂️
published: true
description: composer saved cache in different directory then Bitbucket's predefined composer cache location. Modifying the composer install script fixes the issue
tags: composer,bitbucker,pipelines,cache
//cover_image: https://direct_url_to_image.jpg
---

> TL;DR: composer saved cache in different directory then Bitbucket's predefined `composer` cache location. Adding `COMPOSER_HOME=~/.composer` before the `composer install` fixed the issue.

In our company we are using Bitbucket as our Git hosting service. We also use they're Pipelines feature for CI/CD automation. All has been running fine and dandy but after a while I found a small issue. 

The last stage of Pipelines is a *Build teardown* process, which also [saves cache](https://support.atlassian.com/bitbucket-cloud/docs/cache-dependencies) between builds providing faster builds, and reducing the number of consumed build minutes. Our `bitbucket-pipelines.yml` file lookes something like this:

```yml
image: funky-org/bitbucket-pipelines-php

pipelines:
  default:
    - step:
        name: Run unit tests
        caches:
          - composer
        script:
          - composer install --no-progress
          - ./vendor/bin/phpunit
          - ls -la ~/.composer/cache
```

We are using composer as our PHP dependencies manager and the image is based on [php:7.4-cli](https://hub.docker.com/layers/php/library/php/7.4-cli/images/sha256-e6c912ad45f84aaf5598c2e3cb426ab011a5568c20b249e3f1c02ea2a148a8a2?context=explore).

When the pipeline executed the `composer install` the cache should be saved in the `~/.composer/cache` directory (based on the [documentation](https://getcomposer.org/doc/03-cli.md#composer-cache-dir)). Bitbucket's predefined `composer` cache location is also `~/.composer/cache` so the *Build teardown* should save the cache in Bitbucket for later use. But that directory was empty 🧐.

I reproduced this issue locally on my computer by running the following command and running the scripts manually:
```bash
docker run --rm -it -v ${PWD}:/app funky-org/bitbucket-pipelines-php bash
```

I found out that the cache got saved into `~/.cache/composer`. Thus the reason why the Pipelines didn't find any cache files to save.

The solution I did was to manually specifity the `COMPOSER_HOME` environment variable so that composer saved cache in the Bitbucket's predefined `composer` cache location. The final yml file looks like this

```yml
image: funky-org/bitbucket-pipelines-php

pipelines:
  default:
    - step:
        name: Run unit tests
        caches:
          - composer
        script:
          - COMPOSER_HOME=~/.composer composer install --no-progress
          - ./vendor/bin/phpunit
          - ls -la ~/.composer/cache
```

I hope this article helps someone not to lose so much time as I did 😆
MongoDB: Creare un Index via codice
Tags: mongodb, createindexmodel, createindexoptions, nosql
Published: 2021-02-12 09:10:22

🍀 MongoDB & Table Index

❓ Bello, ma posso creare un index al volo?

La settimana e' cominciata con un post a tema MongoDB, perche' non chiuderla nello stesso modo?

❓ Vi siete resi conto che delle letture non sono velocissime come vorreste?

1️⃣ Avete messo gli indici correttamente?

2️⃣Sapete come aggiungerne uno "al volo" tramite codice?

🔥 Nel post troverete la sintassi per creare nuovi index via C# direttamente dal vostro codice sorgente. 

E' difficile? Forse hai impiegato piu' tempo a leggere tutto questo post sino a qua!

[Link Articolo Completo](https://blog.devandreacarratta.it/mongodb-create-index-model/?utm_source=devto&utm_medium=coding-tips&utm_campaign=mongodb&utm_content=mongodb-create-index-model)

#mongodb #nosql #createindexmodel #createindexoptions #andreacarratta
How to list files changed in current branch (and run prettier on them)
Tags: git
Published: 2021-02-12 09:09:43

---
title: How to list files changed in current branch (and run prettier on them)
published: true
tags: #git
canonical_url: https://darraghoriordan.com/2021/02/12/git-list-files-changed-my-branch-master/
---

I needed to run prettier on only the files changed in one branch of my git repo. This solution is a bit hacky but it did the trick!

<!-- end excerpt -->
## Use git to get a list of the files

Get the files that were added or modified between this branch and master

```
git diff --diff-filter=MA --name-status master...
```

## Edit output to run prettier for each file

Once you have this list you can edit it in an editor to run prettier on each file. You might need to edit the path if your pretteir config sets a different root path than the git diff.

e.g.

Output from git diff

```
M /projectroot/subproject/src/mypath/file1.ts
M /projectroot/subproject/src/mypath/file2.ts
A /projectroot/subproject/src/mypath/file3.ts
```

Edit this to be

```
npx prettier --write src/mypath/file1.ts
npx prettier --write src/mypath/file2.ts
npx prettier --write src/mypath/file3.ts
```

and copy paste into terminal. Done!

There is probably a neat one-liner bash command that could modify and pipe git output directly into prettier but I don’t know how to do that. This works great if not doing this too often!

You could also try replacing the new lines from git diff with a space in your editor and supplying the list to prettier that way. I haven’t tested this though!

```
npx prettier --write src/mypath/file1.ts src/mypath/file2.ts src/mypath/file3.ts
```

Note: if you just need to prettify files in a commit you can use [pretty quick](https://www.npmjs.com/package/pretty-quick)
Make Next.js internal links type-safe
Tags: nextjs, typescript
Published: 2021-02-12 09:08:25

Next.js is great, but I'm complaining that URL generation isn't type-safe.
So I created a library `next-type-link-gen` that can generate links in a type-safe way.

https://github.com/AkifumiSato/next-type-link-gen/tree/main

```sh
$ npm install next-type-link-gen
```

```ts
import {
  dynamicRoute,
  nextLinksHooksFactory,
  staticRoute,
} from 'next-type-link-gen'

const useNextLinks = nextLinksHooksFactory({
  top: staticRoute('/'),
  name: dynamicRoute<{
    name: string
    a?: string
    b?: number
  }>('/[name]'),
})

const YourLink: React.FC = () => {
  const links = useNextLinks()

  return (
    <div>
      <Link
        // href: /
        href={links.top.toUrl()}
        // if `pathname` in next/router match, true
        current={links.top.isCurrent()}
      >
        Top
      </Link>
      <Link
        // href: /your_name?a=aaa&b=999
        href={links.name.toUrl({
          name: 'your_name',
          a: 'aaa',
          b: 999,
        })}
        // if `pathname` in next/router match, true
        current={links.name.isCurrent()}
      >
        User top
      </Link>
    </div>
  )
}
```

You can also test to see if it meets the Next.js routing.

```ts
import { renderHook } from '@testing-library/react-hooks'
import { linksMapToRouteString, readNextPagesRoute } from 'next-type-link-gen/utils'
import { useNextLinks } from './url'

test('[useNextLinks] routes', () => {
  const { result } = renderHook(useNextLinks)

  const pageUrls = readNextPagesRoute()
  const routeUrls = linksMapToRouteString(result.current)

  expect(pageUrls).toEqual(expect.arrayContaining(routeUrls))
})
```

If you find it difficult to use, please feel free to use Issue!
Thanks for reading.
Barebone Hapi Project Setup
Tags: node, javascript, hapi, webdev
Published: 2021-02-12 09:04:19

It's a quiet night. No tv sound, no traffic sound, just a group of the cricket singing. Joe can't wait to open his laptop. He's been busy helping his wife running a multi-branch store all day long. Now he has the time, he feels happy and wants to jump directly into his own business. What business do you ask? The business of starting a Hapi project. 

## Initialization

Joe began his project with `git init` and `npm init`. After filling out the details, he installed HapiJS by running `npm install @hapi/hapi`. He sees the terminal showing an installation progress bar. When the process is completed, he checks the size of his project folder. To his surprise, it's only 1.9 MB. 

## Project Structure

After Hapi got installed, Joe begins to wonder about how to structure his project. Then he does a quick search for the best practices online. He finds people ask the same question at Stack Overflow and Hapi Github's issue. From those two sources, he finds many recommendations. 

Then he decided that his project structure was like this:

- assets (folder): contains static files such as images;
- config (folder): contains app configurations
- models (folder): contains data models
- routes (folder): contains routes handlers
- app.js: the app's main file or the entry point
- package.json: a file created from `npm init` command
- .gitignore: a file containing a list of files that need to be ignored by git

That structure is just his personal preference and he is happy with it.

Joe looks at the clock, it's 23:00, which is quite late for him since he has to wake up at 03:30 tomorrow. So he decides to call it a night and close his laptop. 

Before he goes to sleep, he writes his target for learning Hapi tomorrow: creating my first Hapi server.

## References

Here are the references that Joe use to set up his project:

- [Hapi.js - Project Structure and Best Practices (Part 2)](https://medium.com/the-resonant-web/production-ready-hapi-js-starter-kit-part-2-cba358373017)
- [Best Practice Project Structure](https://github.com/hapijs/hapi/issues/2479)
- .gitignore template was taken from [here](https://github.com/github/gitignore/blob/master/Node.gitignore).
Github1s - VScode 💘
Tags: github, webdev, codenewbie, git
Published: 2021-02-12 08:02:20

* I came through a website **github1s** which makes a GitHub repo to vscode workspace. 

* One step to see the repo in vscode. Just change the url from `https://github.com/...` to `https://github1s.com/...`

* Github1s can be used to read the code in vscode. But can't change any code.

### Official GitHub Repository

{% github conwnet/github1s no-readme %}

### Support Me
* [Youtube - Vuelancer](https://www.youtube.com/channel/UC0hmXRqXYVO0mocVt5D3GkQ)

* [Github - Vuelancer](https://github.com/vuelancer)

* [Scrimba](https://scrimba.com/@selvakumardhivakar)

* [Vuelancer - Patreon](https://patreon.com/vuelancer)
Asynchronous JS: Working with try/catch and promises
Tags: javascript, tutorial, webdev, codequality
Published: 2021-02-12 07:47:05

`Hello World!` New episode of the series  - A CSS/JS trick in 5 minutes.
Today we will quickly see how to handle errors with javascript. First with try/catch, then with promises.

--- 


First, it's important to notice that a majority of backend actions have an unknown result, we don't know if it will work when we write our code. So we always have to write two different codes, one if the action works, another if the action results in an error. This is exactly how a try/catch work, we submit a code to try, if it works code continues, if it doesn't we catch the error (avoiding the app crashing) and run another code. This is a very common thing we don't only use in web development (also in Android app development with java for example). 

---

### Try / Catch
```
  try {
  // Try to run this code 
 // For example make a request to the server
}
catch(e) {
  console.log(e)
  // if any error, Code throws the error
 // For example display an error message to the user
}
```
Catch provides us a parameter, the error that occurred (we usually name it e, err, or error). We can for example log this error to the console when we are in a testing phase or we can save it (maybe in a database with a list of errors). 

We can also have (but it far less common) another part, called finally. It's a code that will always be executed after your try/catch. 
```
 finally {
  // Always run this code regardless of error or not
  // This block is optional
}
```

---

### Promises

The big problem with try/catch is that when you have to nest it (and you will have), it's really messy and difficult to read and write. So Javascript support promises with async functions:

Syntax: new Promise (executor)
executor= (accept, reject) =>{}

```
var asyncronus_function = (number)=>
		{
			return new Promise( (accept, reject)=>
			{
			})
		} 
```                
This function returns a promise object.
If function end well we return a accept(), otherwise reject()

Another asyncronus_function example:
```
var asyncronus_function = (number)=>
		{
			return new Promise( (accept, reject)=>
			{
				if(number>10)
				return accept("my first async");
				return reject("my first async error")
			})

		}
```
if it doesn't return any of these 2 function, Promise state is [PENDING], if return accept is [RESOLVED] and if return reject is [REJECTED]

Then we can add a code if it works and another if it doesn't:

1) .then(function(error){}) is call when promise state is [RESOLVED]
2) .error(function(error){}) is call when promise state is [REJECTED]
3) Do nothing if [PENDING]

Then we call asyncronus_function(): 
```
	asyncronus_function(number).then(function(data)
        {
			console.log(data)
    	}).catch(error => 
        {
      			console.log(error)
    	});
```	

---

Hope this helped and thanks for reading!

> Please smash that like button to make me understand that you want the series to continue :)

[Check this article about how to write CSS like a pro!](https://dev.to/devlorenzo/how-to-write-css-like-a-pro-4glj)
105. Construct Binary Tree from Preorder and Inorder Traversal
Published: 2021-02-12 07:43:27

## Problem link
[105. Construct Binary Tree from Preorder and Inorder Traversal](https://leetcode.com/problems/construct-binary-tree-from-preorder-and-inorder-traversal/)

## Thoughts
preorder的組成： root L R
inorder的組成： L root R

最開始的第一個關鍵，是要想到用preorder作為建構順序，
並利用inorder判斷child應該要接在left or right subtree。

第二個關鍵，是要想到該如何「判斷」child該些在left or right subtree
舉一個小例子，preorder 順序為 [A B]
若inorder順序為[B A]，則B應該要接在A的左子樹
若inorder順序為[A B]，則B應該要接在A的右子樹
應該放在左、右子樹，可以透過inorder中A, B的index來判斷
當B's index > A's index時，代表B是要接在A的右子數

第三個關鍵，是要想到如何「快速比較」A, B的index
最直覺的方式是用一個index hashmap，將inorder的value對應到其index。

到目前為止，已經可以寫出一個可行解了
用recursive function實作 preorder 建構順序，
並用二、三關鍵來實作function內容。

Time complexity: O(n)
Space complexity: O(n)

### 優化
考量到input的組成特性：
preorder的組成： root L R
inorder的組成： L root R

可以發現，若照著 preorder 的順序建構，
當建構完 root 以及整個 L 時，
inorder 也會剛好利用完 L, root 這兩個部分的資訊。
且恰好，L, root 的最後一個element。

這提示著：
利用 preorder 順序建構，且正要開始處理左半邊時，
可以將目前的 root 放進下一層 recursion，
當 inorder 碰到 root 代表 L 已經處理完了，已經完成這一層recursion的任務了。

## Implementation
```python
# Definition for a binary tree node.
# class TreeNode:
#     def __init__(self, val=0, left=None, right=None):
#         self.val = val
#         self.left = left
#         self.right = right
class Solution:
    def buildTree(self, preorder: List[int], inorder: List[int]) -> TreeNode:
        p, i = 0, 0
        def helper(stop) -> TreeNode:
            nonlocal p, i
            
            if p < len(preorder) and inorder[i] != stop:
                root = TreeNode(preorder[p])
                p += 1
                root.left = helper(root.val)
                i += 1
                root.right = helper(stop)
                return root
        return helper(None)
```

用p代表preorder展開進度，
用i代表inorder建構進度

helper實作preorder順序
1. 建立root
2. 向L展開
3. 向R展開

觀察後可以發現，一開始會不斷向L展開，直到遇到最左leaf的左node (None)，i維持為0
這時stop(最左leaf的value)會等於inorder[0]
並回上一層，回到最左leaf為root的這層
此時i才會有所增加，並開始處理R

由此可知，i概念上代表的是實際上建構完的L數量，或是理解成建構進度、收斂進度

## Reference
- https://leetcode.com/problems/construct-binary-tree-from-preorder-and-inorder-traversal/discuss/34543/Simple-O(n)-without-map
Create Drawing Board using Canvas with simple clean code
Tags: html, css, javascript
Published: 2021-02-12 07:33:43

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

## Source Code  

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <style>
    * {
        margin : 0;
        padding: 0;
        box-sizing: borger-box
      }

    #canvas {
        border: 2px solid black;
        }
  </style>
<body>
  <canvas id="canvas"></canvas>
  
<script>
window.addEventListener('load',()=>{
  console.log("document loaded");
  
  const canvas = document.querySelector('#canvas');
  const ctx = canvas.getContext("2d");
  
  //resizing
  canvas.height = window.innerHeight;
  canvas.width = window.innerWidth;
  
  //variables
  let painting = false;
  
  //methods
  function startPosition(e){
    painting =true;
    console.log("in progress...");
    
    //when click only
    draw(e)
  }
  
  function finishedPosition(){
    painting =false;
    console.log("end paint");
    
    //after start from new position
    ctx.beginPath();
  }
  
  function draw(e){
    if(!painting) return;
    
    //style
    ctx.lineWidth = 10;
    ctx.lineCap = "round";
    
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke(); 
    
  }
  
  //listener
  canvas.addEventListener('mousedown',startPosition);  
  canvas.addEventListener('mouseup',finishedPosition);  
  canvas.addEventListener('mousemove',draw);  
})
</script>
</body>
</html>
```
JavaScript nested object destructuring
Tags: javascript, reactnative, react, redux
Published: 2021-02-12 07:09:03

Objects are commonly used in JavaScript, if you are a React, Vue, or Angular developer then you may have a good relation with objects because they are heavily used in those frameworks, in this article I will show you how you can use JavaScript object efficiently. 
```javascript
const info = {
name: "Shakil Khan",
email: "example@gmail.com",
address: {
country: {name: "Pakistan", religion:"Islam"},
line1: "Malakand Batkhela",
line2: "City Batkhela"
}
}
```
in up code, as you can see we have a JavaScript object that has different keys name, email, address now inside the address we have a country key which also has a new object and it has two keys name and religion in simple words info object has nested objects, Now how we can access data from info object there are couple ways to access data from any JavaScript object. 
```javascript
const {name, email, address} = info;
const {country, line, line2} = address;
const {name, religion} = country;
```
in up code, we have destructured keys from info object which are name, email, and address, and further, we destructed address object and finally, we have destructured country object that is fine but have a short way and that is below
```javascript
const {name, email, address: {country: {name, religion}, line1, line2}} = info;
```