teleren/devto huggingface dataset:
Do you know Oh-My-Zsh Prepares Git Aliases for you?
Tags: mac, zsh, cli
Published: 2021-04-29 19:48:40

I just knew ↓ lol.

```zsh
g:       $git	
gst:     $git status
gl:      $git pull	
gup:     $git fetch && git rebase
gp:      $git push	
gc:      $git commit -v
gca:     $git commit -v -a	
gco:     $git checkout
gcm:     $git checkout master	
gb:      $git branch
gba:     $git branch -a	
gcount:  $git shortlog -sn
gcp:     $git cherry-pick	
glg:     $git log --stat --max-count=5
glgg:    $git log --graph --max-count=5	
gss:     $git status -s
ga:      $git add	
gm:      $git merge
grh:     $git reset HEAD	
grhh:    $git reset HEAD --hard
gsr:     $git svn rebase	
gsd:     $git svn dcommit
ggpull:  $git pull origin $(current_branch)
ggpush:  $git push origin $(current_branch)
gdv:     $git diff -w "$@" | view -
ggpnp:   $git pull origin $(current_branch) && git push origin $(current_branch)
git-svn-dcommit-push: $git svn dcommit && git push github master:svntrunkgpa: $git add .; git commit -m "$1"; git push;
```

```zsh
$ gst
On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean
```

```zsh
$ glg

## result ##
git:master o [15:47:02] C:130
commit cf161dc226269e1ad93318cbd4bfc366da259cf0 (HEAD -> master, origin/master, origin/HEAD, test_test)
Author: koji <kk2796@nyu.edu>
Date:   Tue Apr 27 19:16:15 2021 -0400

    update

 src/components/appbar.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

commit 241bafd99cdff1f193a1c6f932ee34b205f46d95
Merge: deffda8 ffbfe69
Author: Koji <koji.kanao@nyu.edu>
Date:   Thu Apr 22 02:40:02 2021 -0400

    Merge pull request #134 from koji/migration_from_v2_to_v3

commit ffbfe6927bb8babe17a98e44826a3ec5a6a10d13 (origin/migration_from_v2_to_v3)
Author: koji <kk2796@nyu.edu>
Date:   Thu Apr 22 02:35:16 2021 -0400

    add .nvmrc for v3

 .nvmrc | 1 +
 1 file changed, 1 insertion(+) 
```

I highly recommend you to check this out!
{% post twilio/zsh-tricks-to-blow-your-mind-291f%}
Performing code checks with GitHub actions & sending results to slack
Tags: github, beginners, tutorial, go
Published: 2021-04-29 19:15:55


### What is a GitHub Action ?
A GitHub action is an element of your custom workflow that is triggered when a push or pull request is created and performs some action such as checking code, sending a message or deploying the application.

The most important concept of GitHub actions is their composability. You can assemble actions as building blocks and build a workflow that matches your needs.

In this article we would like to explore how we can put certain actions together and perform different steps based on outcome.


#### Lets create an action which performs linting checks on a new pull request.


```yaml
on: pull_request

jobs:
  lint-code:
    runs-on: ubuntu-latest
    name: Perform Checks
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: golangci-lint
        uses: golangci/golangci-lint-action@v2
        with:
          version: v1.29

```

#### Sending alerts
Next we want to get a notification on slack if these checks passed or failed.

We will use [PingMe Action](https://github.com/kha7iq/pingme-action) to send these alerts.


```yaml
on: pull_request

# Get values from github secrets of slack token and target  channels and set the variables.
# we can set these within the action block as well for pass/fail.
env:
  SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}
  SLACK_CHANNELS: ${{ secrets.SLACK_CHANNELS }}

jobs:
  lint-code:
    runs-on: ubunut-latest
    name: Perform Checks
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      # We want to perform checks and see if the code is properly linted.
      - name: golangci-lint
        uses: golangci/golangci-lint-action@v2
        with:
          version: v1.29

      - name: Alert when checks fail
        uses: kha7iq/pingme-action@v1
        # This action will only run if checks failed.
        if: failure()
        env:
          SLACK_MSG_TITLE: '🟢 New Request: ${{ github.ref }}'
          SLACK_MESSAGE: 'Event is triggerd by ${{ github.event_name }} Checks  ❌  ${{ job.status }}'
        with:
          service: slack

      - name: Alert when checks pass
        uses: kha7iq/pingme-action@v1
        # This action will only run if checks are successfull.
        if: success()
        # Message and Title are string values, you can create custome message or title.
        env:
          SLACK_MSG_TITLE: '🟢 New Request: ${{ github.ref }}'
          SLACK_MESSAGE: 'Event is triggerd by ${{ github.event_name }} Checks ✅  ${{ job.status }}'
        with:
          service: slack
        
```

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

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

#### You can see this workflow in action here.

{% github kha7iq/pingme %}
Things I want to read and review
Published: 2021-04-29 19:09:02

## React
* react docs
* https://egghead.io/q/react
* blogs by Dan https://overreacted.io/
* Book notes by DanAbromov sent over mail



## Redux
* redux course by Dan Abromov on egghead.io


## Webdev
* Already going through MDN guide
* Zero to Mastery tutorial

## PHP
PHP 
Laravel
udemy course for both

## Dev.to ideas
github repos followed by Dan and other popular devs
Multiple Emails in 1 website
Tags: email, html, website
Published: 2021-04-29 18:50:06

It has been a while since I wrote anything here. I just didn't have too many tech projects. If you are like me, you might have 10s of email accounts all over the place.

I was looking all over the internet if there is a website that can basically Collect all these emails and where I can receive and send messages. Very limited amount.

I decided to see if there's a way where I can host a website that does that. 

Lo and Behold! See screenshot!


![TekNiQ Email Portal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90xr4tgugr5qkfrgyis1.png)

I used rainloop for this.

I only allow certain domains to be able to sign in.

I am offering 5gb email accounts for free for a limited amount.

The email will be ending in @tekniq.xyz.
Let me know if you want one.

You can log into the account from [tekniq.cloud/email](https://tekniq.cloud/email)
How to use securely API's in node.js? 
Tags: node, envvariable, express, dotenv
Published: 2021-04-29 18:48:46

Hi everyone 
in this blog, I am going to share how you can use your __APi's  PORTS, Hash Secrets__ in node.js by using environment variables.

1) Install *dotenv* by running this command in __node.js__ terminal npm install dotenv 
![Node.js environment variables ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofxf0d20qzvilr5zq0bt.png)
2) Creat new *.env* file name should b .env you will see an gear icon  
3) define secret values and variables like the bellow snippet. follow exact same patter don't use "Quotes for strings"
  ![node.js env file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yuaopemts9x66y4mb1n.png)
4) require it in the root of the application. before calling any route it's good practice to use it ASAP. also call config for configuration of.env variables 
![node.js require and config .env ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aplnqvq7ag4hne8wgtk1.png)
5) Finally use it anywhere in the application by using *process.env.variableName* see example bellow 
![node.js environment variable dotenv process.env](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phlsckheunujolaaavi1.png)

That's all for using .env in node.js. this is my first post on dev.to . please leave your feedback about this blog. (this is my first blog/tutorial post ). 

Thanks 
Saad Abbasi (MEAN stack Dev)
10+ Awesome SVG Shape Generators For Your Web Projects
Tags: css, productivity, webdev, beginners
Published: 2021-04-29 18:27:14

Here I list a few CSS shape generators, which can be included in your project, these generators produce svg codes, which can be copy-pasted into your project directly.

1. [Blob Maker](https://www.blobmaker.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txprj4g0lm2zywhjssi3.png)
4. [Squircley](https://squircley.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfhhjhdiuczx3zc8kgjt.png)
5. [Softr.io : SVG Shape Generator](https://www.softr.io/tools/svg-shape-generator)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38c71vm1y0j63ire7zvs.png)
6. [Blobs](https://blobs.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhle8q8pro3gir1a5vv8.png)
7. [Chartgen](https://chartgen.frederickallen.co/pie.html)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fb5vt8xqnuv93k95s77i.PNG)
8. [Outpan : Gradient Wave Generator](https://www.outpan.com/app/9aaaf27303/svg-gradient-wave-generator)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nwlkr6tq6icamm2gkhd.PNG)
9. [Wavelry](https://wavelry.vercel.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9s68lb5s3a8rbaiadne.PNG)
10. [Softr.io : SVG Wave Generator](https://www.softr.io/tools/svg-wave-generator)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyi41akc744dapp85c8f.PNG)
2. [Getwaves.io : Wave Generator](https://getwaves.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqr7wxlflxno8s0akkn6.png)
3. [SVGwave.in : Wave Generator](https://svgwave.in/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0r3n672zdjtu95aopmx.png)
11. [Haikei : Multiple Shape Generator](https://app.haikei.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtchdaamx193rurbogm4.PNG)

12. [SVGwaves.io](https://www.svgwaves.io/?ref=undesign)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rix7v0941vtbmnil9x96.PNG)

{% link https://dev.to/kiranrajvjd/10-simple-toggle-switch-animation-using-css-and-javascript-3gpn %}
{% link https://dev.to/kiranrajvjd/awesome-css-generators-3709 %}
{% link https://dev.to/kiranrajvjd/10-best-javascript-based-github-repos-for-web-developers-49pc %}
{% link https://dev.to/kiranrajvjd/12-simple-css-hover-effects-95d %}
{% link https://dev.to/kiranrajvjd/15-awesome-css-animation-resources-4mhi %}
My Programming YouTube Channel!
Tags: html, css, programming, youtube
Published: 2021-04-29 18:23:21

#My Programming YouTube Channel!

Subscribe https://www.youtube.com/channel/UCFzeA3xC-_i4ZT-XwcwsJxQ

My best videos
{% youtube 9RH_oBhMk_I %}

{% youtube eC8mO6iqUCk %}
Not Just a Developer w/ David Lindahl | Podcast
Tags: podcast, webdev, sideprojects
Published: 2021-04-29 18:22:23

{% spotify spotify:episode:6DTwwENRT8g0bGjTS8ESGl %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://podcast.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.


## Guest Introduction

This week we sat down to talk with David Lindahl, a long time friend of the show that has been through what some might call a “full journey of web development” including: bootcamp, being hired, being laid off, working freelance, being hired again, and running side projects - most notable of which is probably Rainier Watch. This week we’ll be discussing all that and more with the discussion leaning towards David’s ability to not “just” be a web developer, but also a photographer among many other things - all at the same time. 

[David's Twitter (@austriker27)](https://twitter.com/austriker27)
[Rainier Watch (@MtRainierWatch)](https://twitter.com/mtrainierwatch)


## Show Notes

1:50 - Introduction

3:40 - What David's been up to

13:00 - Balance between client work and in house projects

16:00 - Too many meetings?

20:20 - Multiple interests on one social media account?

30:20 - Discovery platforms with social media

41:10 - Being more then just a developer

48:50 - Becoming more involved in the twitter dev community to get a job

1:00:30 - How do you leverage your other skills for your development career?

1:04:40 - Do you put a limit on your side projects/hustles?

##Key Takeaways

* Limiting meetings decreases context switching and increases deep work hours
* Focus on your own goals rather then comparing yourself with everyone else
* Getting yourself out there when looking for work is key. Using Twitter and interacting with the people in your industry expands your network. 

##Social Links

You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[TikTok (Html All The Things)](https://www.tiktok.com/@htmlallthethings)
Perl tops coding salary rankings
Tags: link, perl, work, salary
Published: 2021-04-29 18:20:44

---
title: Perl tops coding salary rankings
published: true
date: 2021-04-29 18:16:37 UTC
tags: link,Perl,work,salary
canonical_url: https://phoenixtrap.com/2021/04/29/perl-tops-coding-salary-rankings/?utm_source=rss&utm_medium=rss&utm_campaign=perl-tops-coding-salary-rankings
---

Perl tops [this list of salary rankings from Business Insider](https://www.businessinsider.com/the-top-coding-languages-with-the-highest-salary-2020-4#perl-is-associated-with-an-average-global-salary-of-8402550-15). Granted it’s harder to find a job, but when you do you’re paid well. Do you want to be a commodity or do you want to be valued?
Are you actively seeking to grow your dev skills and how are you doing so?
Tags: watercooler, discuss, productivity
Published: 2021-04-29 18:00:19

Hi Devs,

I’m curious to know if you are actively working on methods to grow your skills and if so, what is your preferred learning method?
Are you learning through tutorials? courses? YouTube videos? or through working on a project?

And what do you find compelling about the method you use?

Let us know in the comments!
Importance of Web Designing

Tags: webdev, design
Published: 2021-04-29 17:59:08

The world is going digital today, and most people are looking up for information online. With millennials being an integral part of target audiences, they often want to find out more about a business before purchasing. This information gathering starts online through social media and the brand's website.
A website is often the first online presence that a customer sees about your brand in the digital age. It's the first step in getting prospective consumers to transact with you and convert. Therefore, it's essential to have a website and a well-designed one, and this is where <a href="https://www.repindia.com/website-design-development.php">web design and development</a> come in.

<h2>Brand Image</h2>
Your website forms the first impression of your brand in a customer's mind. Having a well-designed website lets them know that you value and put their needs first. No one wants to move through a cluttered website. Usually, websites cluttered with too many links or lousy web designs come across as sketchy and not trustworthy. Good web design makes customers think that your brand is reliable and established.
<h2>Engagement</h2>
Good design encourages customers to look at your website and engage with it. If they see that they can trust the brand, they'd want to know more about you and your services.
<h2>SEO Strategy</h2>
Web design also helps with SEO. Some certain elements and practices affect the search engine algorithm. Aiding SEO means that your website ranks higher when a customer puts in a search query relevant to your business.
<h2>Lead Generation & Conversion</h2>
A good brand image, good engagement, and good SEO strategy will generate more leads and eventually better customer conversion. Web design is beneficial for e-commerce website development which focuses on conversion and sales online.
<h2>Aids Marketing</h2>
Websites provide useful information to customers and, therefore, are a part of marketing strategies. If you can't afford to go all out with paid marketing, a website is a much more affordable and permanent solution. Good web design is helpful for marketing and standing out from the competition.
<h2>Site Navigation</h2>
A significant part of web design is making the website easy to navigate to find the information customers are looking for while learning more about the brand. It further helps build trust.
<h2>Responsive</h2>
Being digitally savvy means people are constantly accessing the internet through different instruments such as laptops, phones, and even TVs set up in the office in place of projectors. Having a website that can be mobile-responsive is a big plus.
<h2>Accessibility</h2>
A well-designed website must be accessible to everyone, including differently-abled persons. It's an often-overlooked aspect but an important one.
Having a good web design should be a priority when developing your brand's website so that your customers enjoy a user-friendly experience when purchasing from you.
Avoiding flash of unwanted animation on first render in React
Tags: react, javascript, css, animations
Published: 2021-04-29 17:46:53

While developing my personal website, I noticed that my mobile menu appeared for a split second and then moved out of the screen.
My mobile menu is placed on the right side of the screen by using the following CSS: 
```css
.navigation {
  transform: translateX(100%)
}
``` 

To make the menu come into the screen smoothly, I used the following CSS: 
```css
.navigation {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
```

By adding this transition in my initial CSS, the menu will be transformed to the right side of the screen but with a duration of 150ms, so this will be clearly visible when the page loads.
To avoid this behaviour, I had to find a way to only apply the transition once the React app is already mounted.
For this use case, I found a custom `useIsMounted` hook useful.

```react
import { useRef, useEffect } from 'react';

const useIsMounted = () => {
  const isMounted = useRef(false);
  useEffect(() => {
    isMounted.current = true;
    return () => isMounted.current = false;
  }, []);
  return isMounted;
};

export default useIsMounted;
```

Then in my component, I can easily import this hook and use it:

```react
const Navigation = () => {
  const isMounted = useIsMounted();
  return (<div className={`navigation ${isMounted ? 'mounted' : ''}`}></div>)
}
```

My CSS then becomes this: 
```css
.navigation.mounted {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
```

And that's it! No more unwanted animations on page load. 
This will also help to increase your Cumulative Layout Shift (https://web.dev/cls) if you were encountering the same thing as I was, because your layout will not shift anymore, so it's a win-win!
You can see the end result here: https://thomasledoux.be (I use Tailwind on my site, so the example code is not exactly the same).
Istio - Default retry VirtualService configuration
Published: 2021-04-29 17:45:09

During an Istio set-up on a new cluster, I don't know why and I don't find in the Istio documentation an explanation, but by default, **VirtualServices** that I created do a retry on an error 503.

---

*Example of one VirtualService I use*
```yaml
apiVersion: networking.istio.io/v1beta1
kind: VirtualService
metadata:
  name: gateway
  namespace: development
spec:
  gateways:
  - development/ingressgw
  hosts:
  - gateway.dev.rtm.com
  http:
  - match:
    - uri:
        prefix: /
    route:
    - destination:
        host: gateway.development.svc.cluster.local
        port:
          number: 443
```

---

So if you don't want an automatic retry, you just have to add the following block in your object in the **http** list.
```yaml
    retries:
      attempts: 0
```

<br/>

*Complete correction*
```yaml
apiVersion: networking.istio.io/v1beta1
kind: VirtualService
metadata:
  name: gateway
  namespace: development
spec:
  gateways:
  - development/ingressgw
  hosts:
  - gateway.dev.rtm.com
  http:
  - match:
    - uri:
        prefix: /
    retries:
      attempts: 0
    route:
    - destination:
        host: gateway.development.svc.cluster.local
        port:
          number: 443
```

---

If you have some information about that default config, please share it.

I hope it will help you in your istio configuration!

---

*Please give me a feedback to help me to improve my writing skills. Thanks*
4 ways to check if arrays are equal
Tags: javascript, codenewbie, beginners, webdev
Published: 2021-04-29 17:24:18

```js
const oldTags = ["facebook", "twitter", "instagram", "dev.to"];
const newTags = ["dev.to", "twitter", "facebook", "instagram"];

// Method 1: Using .sort() & .join()

const arr1 = oldTags.sort().join();
const arr2 = newTags.sort().join();

console.log("isEqual?", arr1 === arr2);

// Method 2: Using .includes()

let arr1Status = true;
oldTags.forEach((value) => {
  arr1Status = arr1Status && newTags.includes(value);
});

let arr2Status = true;
newTags.forEach((value) => {
  arr2Status = arr2Status && oldTags.includes(value);
});

console.log("isEqual?", arr1Status && arr2Status);

// Method 3: Using .reduce()

let arr1State = oldTags.reduce(
  (acc, value) => acc && newTags.includes(value),
  true
);
let arr2State = newTags.reduce(
  (acc, value) => acc && oldTags.includes(value),
  true
);

console.log("isEqual?", arr1State && arr2State);

// Method 4: Using .isEqual() from Lodash

console.log("isEqual?", _.isEqual(oldTags.sort(), newTags.sort()));
```


---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for more.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**

---
**Projects**  
[Note Box](https://chrome.google.com/webstore/detail/note-box/mbbajjgefpenmkkhcnmmnoodlbcbfnmp) - A chrome extension to add notes/todos based on URL  
[File Ops](https://marketplace.visualstudio.com/items?itemName=mehullakhanpal.file-ops) - A VS Code extension to easily tag/alias files & quick switch between files
CSS Variables in React.js
Tags: react
Published: 2021-04-29 17:17:38

#Introduction
The purpose of this post is to show the use of CSS varibles in React.js  applications

#CSS Variables with HTML and CSS
In a typical app which consists of HTML ,CSS and JS the CSS file is linked to the html file  and we have the root pseudo selector as shown below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8sm3vdbjpdg2q0ec4qp.png)

Now in a react app its a SPA but its component based structure. Each component  has a separate CSS file attached to it.

So the question is how can we have a common set of CSS variables which can be used throughout the application?

#CSS Variables in React applications
This is a standard react application structure.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8un9vrg2539e9u186np3.png)
We have the index.css  file where we can define the root pseudo selector. In that we can define the  CSS variables which we can use throughout the application.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8bdklbmgzlrm0fomtk9.png)
Now we need to import the index.css file into the index.js file as shown below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05uymhina7wxn0a4yay0.png)

Now we can use these declared CSS variables throughout the app. Because React being a SPA all the variables declared in index.css will be applicable  throughout the application as shown in the app.css file  image below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ndm85xcbvg2y1qmxcis.png)

Thank you for reading this article