teleren/devto huggingface dataset:
Gatsby default starter
Tags: gatsy
Published: 2021-05-28 07:51:37

This error came ,when I created gatsby-default-starter site. How to solve it.What is problem of it? Error message :

‼ pngquant pre-build test failed i compiling from source × Error: pngquant failed to build, make sure that libpng-dev is installed at D:\gatsby-project\my-gatsby-project\node_modules\bin-build\node_modules\execa\index.js:231:11 at runMicrotasks () at processTicksAndRejections (internal/process/task_queues.js:93:5) at async Promise.all (index 0) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! pngquant-bin@6.0.0 postinstall: node lib/install.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the pngquant-bin@6.0.0 postinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

ERROR

Command failed with exit code 1: npm install

Error: Command failed with exit code 1: npm install

error.js:56 makeError [npm]/[gatsby-cli]/[execa]/lib/error.js:56:11

index.js:114 handlePromise [npm]/[gatsby-cli]/[execa]/index.js:114:26

task_queues.js:93 processTicksAndRejections internal/process/task_queues.js:93:5

init-starter.js:135 install [npm]/[gatsby-cli]/lib/init-starter.js:135:7

init-starter.js:202 clone [npm]/[gatsby-cli]/lib/init-starter.js:202:3

init-starter.js:343 initStarter [npm]/[gatsby-cli]/lib/init-starter.js:343:5

create-cli.js:494 [npm]/[gatsby-cli]/lib/create-cli.js:494:9
Most useful aliases for git
Tags: github, git, productivity, programming
Published: 2021-05-28 07:44:34

Hello everyone! In this article, I'll share with you some useful aliases for git that I use every day.

# Working with branches

For each feature I work on, I create a new branch, this alias saves me a lot of time:

## gco

This is an alias for

```bash
git checkout
```

### Usage

```bash
gco branch-name // switch to branch an existing branch
gco -b branch-name // create a new branch and switch to it
gco . // discard all changes in the working directory
```

# Commits

Every day I create a lot of commits, each time type `git commit` is boring, so I use these aliases:

## gcmsg

This is an alias for

```bash
git commit -m
```

### Usage

```bash
gcmsg 'feat: commit text' // create new commit
```

## gca

This is an alias for

```bash
git commit --amend
```

## gcfix

This is an alias for

```bash
git commit --fixup
```

### Usage

```bash
gcfix commit_hash // create a fixup commit for commit with provided hash
```

# Rebasing

When you work on a large project, rebasing is part of your everyday routine, so this alias will save you some time of typing

## gpr

This is an alias for

```bash
git pull --rebase origin dev // remote and branch may be different in your case
```

Also often I need to rename, remove some commits or squash fixups in my local branch, for this I use this alias:

## gria

```bash
git rebase -i --autosquash
```

### Usage

```bash
gria HEAD~4 // interactively change last 4 commits
```

# Pushing

After I've created some commits I need to push them, for that I use next:

## ggp

```bash
git push origin $(current_branch) // instead of origin you can use your own remote
```

What is `$(current_branch)` ? It's an function that returns name of current branch, It looks like that:

```bash
function current_branch() {
	ref=$(git symbolic-ref HEAD 2> /dev/null) || return
	echo ${ref#refs/heads/}
}
```

# How to keep aliases

If you just type in terminal command

```bash
alias gs="git status"
```

it will work, but when you restart the terminal it will not.

For fix that I keep all my aliases in file `~/.bash_aliases` and import them in my `~/.bash_profile` like that:

```bash
if [ -f ~/.bash_aliases ]; then
  . ~/.bash_aliases
fi
```

My `~/.bash_aliases` looks like that:

```bash
function current_branch() {
  ref=$(git symbolic-ref HEAD 2> /dev/null) || return
  echo ${ref#refs/heads/}
}

alias ~="cd ~";
alias ..="cd .."
alias g="git"
alias gs="git status"
alias gc="git commit"
alias gcmsg="git commit -m"
alias gcfix="git commit --fixup"
alias gria="git rebase -i --autosquash"
alias gca="git commit --amend"
alias gco="git checkout"
alias gb="git branch"
alias gpr="git pull --rebase origin dev"
alias gp="git pull"
alias ggp="git push origin $(current_branch)"
```

# Thank you for reading

I hope you've enjoyed this article! Please click on the "Follow" button to see my future articles.

I'll glad to see any feedback!
JUnit Certification: Evaluate Your
Automation Testing Skills
Tags: junit, certification, learning
Published: 2021-05-28 07:42:56

## Free JUnit Certification By LambdaTest🎓

With the free #JUnit certification by LambdaTest, you can challenge your skills in performing automated testing with JUnit and take your career to the next level. 💥🚀


## What You Need To Know

* Know-how about JUnit 4 and JUnit 5.
* Use Annotations and Assertions in JUnit.
* Implement Automation testing using different Web Locators using Selenium and JUnit.
* Run automation tests through different data-driven test mechanisms in JUnit.
* Run automation tests through different data-driven test mechanisms in JUnit.
* Perform cross browser testing in parallel with JUnit and Selenium.

## Exam Details

* The Assessment has 2 rounds.
* Round 1: 45 MCQs in 45 minutes.
* Round 2: Assignment Task (deadline-based).
* 50% weightage for each round.
* 70% of the cumulative score is required to be certified.
* Price: Free (no credit card required).
* The issued certificate will be valid for 2 years.

Grab your free JUnit Certification now : **https://bit.ly/3ft3xVx**
I built a custom VLC Web interface
Tags: githunt
Published: 2021-05-28 07:41:49

The default web interface for controlling VLC from the web, is not easy to use (It's ugly.)

![Default VLC Interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iv5kmy3klqmbwjum27hb.png)

So I search for a template over the internet and I found a [GitHub repo](https://github.com/megatommy/vlc-web-interface), I changed it a little and added a mobile interface:

![Desktop interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/naiuws6tk9zsvn8l32p2.png)

For the mobile version, I was inspired by Spotify's design:

Mobile interface             |  Specific music
:-------------------------:|:-------------------------:
![Mobile interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/an1o9ovnzu4znhrmrdh7.png)  |  ![Mobile iterface open](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibp5wvplf6wgamn7qjm5.png)

Feel free to try my theme and give me feedback.
{% github Daniel-Mendes/vlc-web-interface no-readme %}
12 Best Courses to Learn Deep Learning in 2021
Tags: deeplearning, machinelearning, datascience, python
Published: 2021-05-28 07:25:41

Are you looking for the **Best Courses to Learn Deep Learning?** If yes, then you are in the right place. In this article, you will find the 12 Best Courses to Learn Deep Learning. So give few minutes and find out the best deep learning course for you.

Deep learning is more powerful than machine learning due to its **ability to process large numbers of features** when dealing with **unstructured data**. And Deep Learning gives excellent results on **large datasets**. Deep learning knowledge is essential in the data science field too.

That’s why I thought to share some Best Courses to Learn Deep Learning with you. And I have filtered these courses on the following **criteria**-

###**Criteria-**

1. Rating of these Courses.
2. Coverage of Topics.
3. Engaging trainer and Interesting lectures.
4. Number of Students Benefitted.
5. Good Reviews from various aggregators and forums.

Now without any further ado, let’s dive into the deep learning courses-
**[Click to continue reading...](https://www.mltut.com/best-courses-to-learn-deep-learning/#1-deep-learning-specialization-coursera)**
How to create a notification badge with CSS ?
Tags: css, html, javascript, webdev
Published: 2021-05-28 06:32:55

Notification badges annoy me most of the times by popping up every now and then and I am pretty sure most of you experience similar thing, but anyways, let's see how we can create a notification badge using CSS.

## Step 1: HTML

![HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzo21hzw20p0sbpjw4yw.jpg)

The element with a class '*base*' will act as a profile image or an icon upon which we will position the notification indicator element having a class '*indicator*'.

## Step 2: CSS

![css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6g8srct3wac5itp7r0zc.png)

First of all, we have to set up the height and width of the main '*base*' element. Then we set the border-radius property to 50%. Border radius rounds the edges of the border by a specified amount. In our case the height and width of the element are equal and so, when we apply border radius of 50%, a square looking element will transform to a circle.

After applying a background color, the base element will look like a circle.

![circle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4gklfzuooiohhgkaexk.png)

Now, set the position of the base element to '*relative*' which means that it will be positioned relative to its current position. This will not change anything but we want this property to position the child elements, more on that in a second.

You can also add an image instead of a background color to the base element, just like this.

![css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7idhaujbdn0h9085a3d.png)

Now, let's design the indicator.

First of all, set the position of the indicator as '*absolute*' which means that it will be positioned inside the ancestor element which has its position as '*relative*'.

Then, we will define the final location of the indicator by setting the values of *top, bottom, right and left* properties of the indicator.

![css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfqdmfx3hwjgrn85qg5v.png)

The '*bottom*' property will offset the '*indicator*' element by 60% of the height of the '*base*' element from the bottom of the '*base*' element.

Similarly, the '*left*' property will offset the '*indicator*' element by 60% of the width of the '*base*' element from the left of the '*base*' element.

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r3um4t3cdzle5esi3sg.png)

Next, we will add a border having the color same as the '*body*' element having a border-radius of 50%.

![css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cy0zrt0jhi4sow29g3f.png)

Then, we will style the notification counter.

![css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7g024r8zt02ktfrdrhzk.png)

In order to center the notification count number, we can add '*flex*' properties to its parent element.

![css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj6u344un13bwo2c1s6c.png)

The final output will be:

![final output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1c8qilqsqbzzhb45ish1.png)
Containers in Azure [TechTalks #3]
Tags: azure, docker, kubernetes
Published: 2021-05-28 06:24:24

{% youtube c_fwsqDrr4M %}

## Agenda

Various different container hosting platforms in Azure. Covering

- Build a sample app for Container
- Container in App Services
- Azure Container Registry
- Azure Container Instance
- Azure Kubernetes Service

## Resources

- Meetup Group - [meetingplace.io/groups/azureall](https://meetingplace.io/groups/azureall)
- Youtube Channel - [youtube.com/c/TechTalksWriju](https://www.youtube.com/c/TechTalksWriju?sub_confirmation=1)
- LinkedIn - [linkedin.com/in/wrijughosh/](https://www.linkedin.com/in/wrijughosh/)
- Twitter - [@wrijugh](https://twitter.com/wrijugh)
- Facebook Page - [www.facebook.com/groups/azureforall](https://www.facebook.com/groups/azureforall)
- Blog - [dev.to/wrijugh](https://dev.to/wrijugh)
- Blog - [wriju.wordpress.com](https://wriju.wordpress.com/)
Nginx with IIS server 
Tags: nginx, iis, domainname
Published: 2021-05-28 06:06:24

Hi Guys, 
I got an issue with Nginx. I would like to know can Nginx working with IIS binding Hostname in website?
My Lab environment
Nginx x1 , IIs x1 
Nginx Config:ssl passthrough
stream {
      map $ssl_preread_server_name $name {
           site1.a.com web601.newdc.com:443;
           site2.a.com web602.newdc.com:443;
       }
server {
       listen 443;
       proxy_pass $name;
       ssl_preread on;
     }
} 

IIS settings 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbxcokdcl66eaevicqc7.png)
Testing 1: Site1 not checked the SNI 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chehpamceze4goauylib.png)
Browser on Client to https://site1.a.com and got the result 404 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2q0f01fvd7f5bxg8l2p.png)
 
Testing 2: Site2 checked the SNI
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j75ahg1qo2hg8n2zwc7q.png)
Browser on Client to https://site2.a.com and got the result
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8b5hvohaie4vhkkc2osz.png)

If you guys got any hints, please please please let me know. Thank you all.
If Else Condition For URL In Laravel
Tags: laravel, condition
Published: 2021-05-28 05:36:02

It will add "active" class if the URL matches with "/coupon/all"
```
<ul class="list-group">
       <a href="{{route('link')}}" class="list-group-item {{ Request::is('/coupons/all') ? 'active' : '' }}">Show all</a>
</ul>
```

Another method with using laravel if else
```
@if(Request::url() === 'your url')
//code
@endif
```
Top 8 Self-Improvement Tips To Grow as a Software Engineer (Developer)...
Tags: codenewbie, career, javascript, webdev
Published: 2021-05-28 05:26:14

Many developers will neglect to do what will make us the best possible version of ourselves.

Make the most of yourself....for that is all there is of you...

Remember:


> 
Motivation is what gets you started...Habit is what keeps you going...


## 1- Be Thankful For What You Have...

It’s difficult to focus on self-improvement when you fail to recognize what you already have in life. 

Take time out of your day to sit and reflect:

What you have, 
Where you are, 
How you get here.


## 2- Be Kind To Yourself...

If you constantly have hundreds of things on your to-do list, you will never finish it and will constantly feel overwhelmed.


> 
Don’t forget to appreciate yourself....

Be kind. 
Love. 
Breathe.


## 3- Stop Comparing Yourself To Others...

Stay focused on your own lane – it’s the only one that matters.

Instead, compare yourself to your past self and look at how far you’ve come on your journey.


> 
Stop worrying about what other people are thinking about you!


## 4- Do A Screen Detox...

Schedule screen time detox. 

We all spend far too much time on social media and sometimes a little time disconnected can do the world of good.


> 
 Don’t take your health for granted. Don’t take your body for granted.

Take rest.
Take time off.


## 5- Learn To Say No...

Setting boundaries by saying ‘no’ to people in your life can be one of the most difficult things to start doing. 

But you know...

Saying NO can be the ultimate self-care.


> 
 Learn to say no, and deal with the discomfort that can sometimes come with it.


## 6- Top 5 Things List...

 -Things you’re grateful for
 -Good things that happened today
 -Things you learned today
 -Memories you want to remember today

Practice gratitude, 
Practice generosity, 
Practice positivity.


## 7- Make A Plan...

Create a plan for everything. 

I know that may sound really tedious! But I promise you that amazing things happen when you create a plan, take action and go into it with a positive mindset.

Set Goals.
Create an action plan.
Execute.
Repeat...


## 8- Find People You Admire...

Who do you look up to? 
Who do you aspire to be like? 


> 
 We all need people we aspire to in one way or another. 

It gives us something (or someone) tangible to work towards.


Thanks for reading guys...

I'm writing threads weekly on Twitter to help you to become a better software engineer (developer)...

"Don't miss out" Follow your mentor on  [Twitter](https://twitter.com/TheAnkurTyagi) 
 

For more awesome blogs: 
Checkout -->  [My website](https://theankurtyagi.com/)
5-Essential-Skills-For-Web-Crawling

Published: 2021-05-28 05:22:10

Here are 5 essential skills when it comes to Web crawling that any programmer needs:

1. Knowledge of web crawling frameworks like Scrapy, Puppeteer, or Goutte

Coding from scratch on your own can only take you so far. You will find that the frameworks can abstract out the complexities of building a spider, making concurrent connections, using selectors for scraping, working with files, infinite pages, etc. quite easily.

2. Understanding of the basics of CSS selectors or XPath

Heavy JQuery users will graduate right away into CSS selectors. XPath, if you are really serious about finding whatever data you want to be able to scrape.

3. Understand how to speed up crawling by run multiple spiders by setting the appropriate concurrency and also running daemons like Scrapyd

Coding a stable scrape that can get you the data is just the first step. You want to make sure the footprint of the amount of time taken in crawling for data is reduced to as small a footprint as possible for the rest of the system to do its thing. So once the code is working, the process of multiplying its speed begins.

4. Learn how to pretend to be a human when writing a bot

This article explains all the nuances you need to know to stop showing some obvious ‘tells’ that web servers are picking up from your scraper.

5. Overcome IP blocks by working with Rotating Proxies like Proxies API.

The hard reality of web crawling is no matter what measures you take, and you always run the risk of an IP block because you can only toggle so many IPs and so many servers. A carefully selected rotating proxy service is super essential in any web crawling machinery.

The author is the founder of Proxies API, a proxy rotation API service.
7 Signs Your Web Crawler Is Not Ready To Be Deployed Yet
Published: 2021-05-28 05:21:47

Many coders we know, who use our Rotating Proxy Service, Proxies API. They make the mistake of depending on a web crawler setup the moment they have finished coding the scraper, and they can see data coming through on their machine. We have seen far too many cases to count when we help them solve issues while helping them integrate our services into their machinery.

So here is how we know when the web crawler is a bit raw, and the paint is not fully dry yet:-

1. It gets stuck at a random place every day for no reason.

2. It runs for a while and mysteriously stops returning data after working for a specific length of time or after a particular number of URLs.

3. The database is full of good and suddenly empty data.

4. The web page is fetched, but the scraper doesn’t get all the records and misses a few.

5. The scraper keeps getting gibberish, or sometimes there is HTML in it.

6. The crawler is way too slow.

7. You find yourself constantly debugging and restarting it.

Typically, this is a symptom of a wrong approach rather than having a wrong piece of code or the wrong logic somewhere. A system that is this prone will always be weak and always be prone to a ‘cold.’

If these things are happening, check this article — 5 rules for writing a web scraper that doesn’t break to get to the heart of the problem. Note that this might require some introspection and some overhauling to really ‘fix’ the issue at the root.

The author is the founder of Proxies API, a proxy rotation API service.
Basic example of.. FP
Tags: javascript, functional, programming
Published: 2021-05-28 04:11:23

Here is a basic example of using functional programming inside javascript language, a multiparadigm language that provides support for functional programming. In the first image, there is an imperative approach to manipulating a list of names. And in the second image, a functional approach is being used to manipulate the same list of names.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cco9tnp5f7v6c0s635ko.png)

In the image above, dealing with the imperative approach, an empty list is created to be filled with the names in lower case. Subsequently, a temporary variable called "i" is created to iterate through the list. Then, each item modified from the list received as a parameter is added to the new list. In this approach, it is possible to see that the machine is being told how it should perform its work, in detail.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kct13cm9e88pm9r5zx7.png)

In the image above, dealing with the declarative / functional approach, the original list calls the javascript map method, which invokes a function in each item covered in the list, in this case a callback function, which in turn is a function that makes lowercase string letters. The map method returns a new list, without modifying the original list and thus guaranteeing the absence of side effects and the presence of immutability.

The code snippets of both images aim to create a new list with the names in lowercase letters, however, it is easy to see that the code of the second image is smaller, cleaner and more intuitive. Consequently, it is easier to be tested and reused.

#technology #development #softwaredeveloper #javascript #javascriptdeveloper