teleren/devto huggingface dataset:
Set zsh as the default shell in your terminal.
Tags: terminal, zsh, linux, shell
Published: 2020-04-01 07:33:07

---
title: Set zsh as the default shell in your terminal.
published: true
description: Easy an awesome zsh set up as the default shell for your terminal.
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3u1tpqgea0l17ns8et89.png 
tags: terminal, zsh, Linux, shell
---

## How to set ZSH as the default shell in your terminal.


 ZSH also called the Z shell, is an extended version of the Bourne Shell (sh), with plenty of new features, and support for plugins and themes. Since it’s based on the same shell as Bash that makes it easy for use and switching over is a breeze.

Open vim or your favorite code editor 

``` bash
sudo vim ~/.bashrc
```
Now we need to edit the file and add the following line to the end of the file remember to add a comment just to remember, what is that line of code task.

```bash 
exec zsh
```
It will execute the command every time you load the terminal and run your zsh shell.

This is not the only way that you can get to the goal of setting zsh as the default shell but for me, this is the best and easy way to do the job.


> Please if you have a better solution let me know I'm willing to learn new ways and do it in a better way.

### Update 



#### The best solution is just use the fallowing command to switch 



```shell
chsh -s $(which zsh)
```



{% gist https://gist.github.com/leamsigc/68d3f891d9298c35de273caa2b21e453 %}
Looking for Remote Contract [Full-stack developer]
Tags: react, graphql, node
Published: 2020-04-01 07:30:13

Hey Community,
I am a full-stack developer, currently looking for a remote gig/contract. Please if you know anyone who is looking for a full-stack developer. Please help with that.

I have more than 4 years of experience in web and Native-mobile development
my stack is 
Reactjs,React-native,Graphql,Nodejs,Redux,Firebase,AWS and-or any other JS framework or tools.

Thank you so much.
you can dm me on my twitter- DMs are open - https://twitter.com/uditrguru
gyp: No Xcode or CLT version detected! 👈 I think I know why this happens
Tags: npm, cli, node, react
Published: 2020-04-01 07:10:20

---
title: gyp: No Xcode or CLT version detected! 👈 I think I know why this happens
published: true
description: Are you a user of Xcode CLT only, not the full Xcode? Have you run into the `gyp: No Xcode or CLT version detected!` error? I think I know why...
tags: npm,cli,node,react
---

👉 Are you a user of Xcode CLT only, not the full Xcode?

👉 Have you run into the `gyp: No Xcode or CLT version detected!` error?

👉 Did you solve it by `sudo rm -r -f /Library/Developer/CommandLineTools` and then re-installing it with `xcode-select --install`, only to inexplicably run into the exact same error a while later?

Here's the kicker...

👉👉 **Are you a user of a Node version manager like `asdf` or `nvm`?** 👈👈

I've been in this position a number of times in the last few months and I could never understand why it kept cropping up. But I think I've discovered why I continually, and intermittently had this issue.

I was working on a few older projects using Node 8. I wrapped one up yesterday and moved to a new React project this morning and so I `nvm use 12.15` and ran `npm i`

`gyp: No Xcode or CLT version detected!`

😔

So I begrudgingly deleted Xcode CLT and re-installed and everything worked fine. And then it clicked.

## I think `xcode-select --install` attaches itself to the node version you have installed at the time

So you fix the problem, and then, later on, run into it again when you switch to a different version of Node.

Haven't tested this thoroughly... who has the time. But would love to hear if this resonates with anyone else and maybe this is actually the case?
What Are Single Page Applications? And Difference Between SPAs & Multi Page Apps.
Tags: react, webdev, spas
Published: 2020-04-01 06:46:58

1. Meaning of SPAs.
2. How SPAs work.
3. How different pages are visited.
4. What role do React play.
5. Versus how MPAs work.

You might have got attracted to this post while following some React JS course or any other framework like that. Single Page Application... well, that's confusing. As a beginner, I initially had this wrong notion that SPAs means "my visitors will only get to see one page", WRONG!

HTML goes first to the browser... it then loads your script, CSS, etc. What typically happens in a SPA is that we have only one html file, index.html (just the naming convention). This html file then loads up rest of our components.

Hmm.. you still didn't understood how exactly the user gets to visit different routes or page. The only html file in our application have a 'root' ID (refer to image1 below). This root is populated using simple javascript document.getElementById('root') in a JS file (refer to image2). This JS file has routes for all the components we have to load. 

![image1](https://dev-to-uploads.s3.amazonaws.com/i/gdqs2ocy2ned8kb8py2p.PNG)

![image2](https://dev-to-uploads.s3.amazonaws.com/i/chb7ezgptrepx4csxa09.PNG)

Okay so now that we know how the SPA work, having a single html template. B.. but how exactly different pages are navigated and fetched in SPAs and Multi Page Applications and what role to React play?

Single Page Applications (SPA) :- 

Once the visitor hits our single html template on the server, React takes over and control what content has to be displayed based on the routes visited that is /contact /about or any other destination like that. Let me simplify, React forms a DOM (Document Object Model) and saves it to the memory, virtual DOM. This DOM forms a structure of documents to be displayed considering the destinations visited. This DOM might be influenced based on whether the user is signed in or out and a lot more things like that. 

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

Multi Page Applications (MPA) :-

In a Multi Page Application we have different html templates for every page. In sense, a different html page is loaded for every destination.

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

Thank you! If you liked my post, please let me know on Instagram @digvijaysrathore or Twitter @novadigvijay
Something wrong with my state in react ?? 
Tags: react
Published: 2020-04-01 06:44:23

This is what i am trying to do : 

* " Every time the GET new Quote button is clicked it flips click between true/false, like flipping a lightswich on and off. Every time the newQuote property on <QuoteBox newQuote={click} /> gets a new value, the QuoteBox component rerenders. Every time the component rerenders, it calls fetch in componentDidMount " *

**Please someone help me to runmy code properly**

[Here is my code on sandbox:]( https://codesandbox.io/s/random-quote-machine-fl6tc)

I created this inside index.js

```
class Parent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     click: false
   };
 }

 render() {
   return (
     <>
       <QuoteBox newQuote={this.state.click} />
       <button onClick={() => this.setState({ click: !this.state.click })}>
         Get new quote
       </button>
     </>
   );
 }
}
```
I created this inside App.js
```
<button onClick={() => this.setState({ click: !this.state.click })} 
        className="btn btn-primary"
        id="new-quote"
        >
        NEW QUOTE{this.props.newQuote}
</button>
```
React error in npm start
Tags: react, node, npm
Published: 2020-04-01 06:33:41

hello i need help in react-app
when i run command npm start for my react app some error occurs. 
The output is:
 blog@0.1.0 start C:\Users\Buntu\react-test\blog
> react-scripts start

i ｢wds｣: Project is running at http://192.168.43.195/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\Buntu\react-test\blog\public
i ｢wds｣: 404s will fallback to /
Starting the development server...

events.js:288
      throw er; // Unhandled 'error' event
      ^

Error: spawn cmd ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
    at onErrorNT (internal/child_process.js:469:16)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:273:12)
    at onErrorNT (internal/child_process.js:469:16)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  errno: 'ENOENT',
  code: 'ENOENT',
  syscall: 'spawn cmd',
  path: 'cmd',
  spawnargs: [ '/s', '/c', 'start', '""', '/b', '"http://localhost:3000"' ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! blog@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the blog@0.1.0 start 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:
npm ERR!     C:\Users\Buntu\AppData\Roaming\npm-cache\_logs\2020-04-01T06_25_37_728Z-debug.log

can anyone help?
[Unresolved] Does anyone know how to make SPA work with SEO meta tags?
Tags: webdev, seo, spa, help
Published: 2020-04-01 05:58:55

I specifically mean SERP on Google, Facebook link previews, and Twitter previews.

The related packages are [Vue Meta](https://github.com/nuxt/vue-meta), [React Helmet](https://github.com/nfl/react-helmet).

Or JavaScript rendered meta tags.

![react-seo-fails](https://i.imgur.com/oPIw3v1.png)

Isn't it infuriating to see a lot of "Web site created using create-react-app"? Even non-SEO-expert novice webdevs shouldn't fall into this trap...
What’s your alternative solution? Challenge #7
Tags: challenges, discuss, javascript, codenewbie
Published: 2020-04-01 05:47:24

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Calculate the sum of odd numbers greater than 10 and less than 30.

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge07

var sum = 0;

for(var i = 11; i < 30; i += 2)
{
    sum += i;
}

println(sum);

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
How to scale an application in OpenShift?
Tags: devops, kubernetes, openshift, docker
Published: 2020-04-01 05:43:34

## Objective
- Scale up Nginx application using **oc scale** command
- Scale up Nginx application by updating **DeploymentConfig**
- Scale down Nginx application using **oc scale** command

### Step 1: Deploy Nginx application
Refer [User & Project Management](https://dev.to/sagarjadhv23/learn-how-to-manage-users-project-in-openshift-15ni) blog

### Step 2: List pods
```
oc get pods
```

### Step 3: Scale up Nginx application using `oc scale` command
```
oc scale dc nginx --replicas=5
```
```
oc get pods --watch
```

### Step 4: Scale up nginx application by updating `DeploymentConfig`
```
oc edit dc nginx
```
```
update replicas = 7
```
```
oc get pods --watch
```

### Step 5: Scale down nginx application using `oc scale` command
```
oc scale dc nginx --replicas=1
```
```
oc get pods --watch
```

{% youtube Ui2qgvx2Dgs %}
Make your own Dev.to CMS livestream - Part 3
Tags: livecoding, react, typescript, nextjs
Published: 2020-04-01 05:29:01

This is day 3 of my livecode Dev.to CMS.

Source: https://github.com/sw-yx/dev-to-cms
Demo: https://dev-to-cms.now.sh

## Things covered

- How to lose a lot of time with React Query: https://github.com/tannerlinsley/react-query
- Tailwind UI: https://tailwindui.com/

## Video

Here is [the YouTube livestream (3 hours)](https://www.youtube.com/watch?v=ONVp8QivDv0&feature=youtu.be).

Dev.To embed:

{% youtube ONVp8QivDv0 %}

Today we refactored the editor to a standalone component, and then added the ability to edit posts! It now works


We methodically worked thru all issues:

- splitting out an editor component
- creating api endpoint to fetch (GET) a single existing article
    - this later required fetching unpublished articles as well
- creating api endpoint to update (PUT) a single existing article
- wiring it up to the Dashboard (list of articles) and to existing editor pages.


## Catch up on the Dev.to CMS LiveStream!

- [Day 1 - Setup Next.js and Tailwind UI, list posts through API routes](https://dev.to/swyx/make-your-own-dev-to-cms-livestream-part-1-2ad1) - 90 mins
- [Day 2 - setting up a Markdown Editor with Next.js, Tailwind UI, Highlight.js, React Hook Form, and React Query](https://dev.to/swyx/make-your-own-dev-to-cms-livestream-part-2-6mf) - 3 hours
- Quick Fix - [How To Add Monaco Editor to a Next.js app](https://dev.to/swyx/how-to-add-monaco-editor-to-a-next-js-app-ha3) - 18 mins
- [Day 3 - Refactoring to Edit Existing Posts](https://dev.to/swyx/make-your-own-dev-to-cms-livestream-part-3-c65) - 3 hours
- [Day 4 - Polish Day! Implementing Notifications, Markdown preview, and programmatic Redirects, and Using Web Components in Next.js](https://dev.to/swyx/make-your-own-dev-to-cms-livestream-part-4-6em) - 3 hours
- [Instant GraphQL with OneGraph - Screenshares in Public with Sean Grove](https://dev.to/swyx/instant-graphql-with-onegraph-4hi8) - refactoring handrolled Dev.to API access with OneGraph and GraphQL
- [How and Why to Un-Reset Tailwind's CSS Reset](https://dev.to/swyx/how-and-why-to-un-reset-tailwind-s-css-reset-46c5)
How rector made my life easier
Tags: php, rector, deprecation, automation
Published: 2020-04-01 05:15:45

In November 2019 I stared (*) the [https://github.com/rectorphp/rector](https://github.com/rectorphp/rector), as I just learned about how cool [Rector](https://getrector.org/) was and how it could help me improve and migrate my legacy code.

My star on github, was as first used as a bookmark, but some days later, the team from Rector contacted me, and this change a lot regarding my view on refactoring, complexity and automation tools for development.

{% twitter 1196711403333332992 %}

## What did I win?

I contacted the rector team as instructed in the tweet, and [Tomas Votruba](https://twitter.com/VotrubaT) got back to me, and we discussed how he could help me. 

As I'm most active with the [TYPO3](https://typo3.org) [Crawler extension](https://extensions.typo3.org/extension/crawler) I ask for help to migrate/optimise the current typo3v9-branch, as this is my work in progress branch for the next major release.

Tomas implemented following in our CI pipeline:

* [[CI] Add Rector CI](https://github.com/AOEpeople/crawler/commit/3d79302d238740aea378857956ddf193a457848c)
* [[Travis] Cleanup and split jobs clearly](https://github.com/AOEpeople/crawler/commit/7e94d3bb6205785fde70ad1180a8996b32e2b411)
* [[TASK] Apply static + PSR-12 set](https://github.com/AOEpeople/crawler/commit/717c86ff588a8f7f2e96f98fdac9df0e9744a44a)
* [Apply PHP 7.1 and PHP 7.2 features](https://github.com/AOEpeople/crawler/commit/8dfe2490a336a7cc93474d1fa861ad40a45ccf77)

All this done within a week, and the code base was already improve a lot.

## That's all?

The win wasn't "only" the 4 commits from Tomas, that helped me one time. He help me setup some basics that will help me a lot in the future. 

### CI

Now we have Rector CI, Code Standard and PHPStan checks as part of our [Travis CI Pipeline](https://travis-ci.org/github/AOEpeople/crawler) and this is done for every single commit and pull request, so the quality of the code commit since then will also be improved, cleaner and easier to maintain in the future. 

![Travis CI - Static](https://dev-to-uploads.s3.amazonaws.com/i/7pgmhk1w8sd6o0bzoy1d.png)


### Development

Next time I want to deprecate a PHP Version e.g. PHP 7.2 and PHP 7.3, I can add PHP Sets to the [`ecs.yaml`](https://github.com/AOEpeople/crawler/blob/typo3v9/ecs.yaml) and the run the command `.Build/bin/ecs check Classes Configuration Tests --fix` and then most, if not all of the changes are done automatically within a few seconds.

## The future for me

I don't see how my work as PHP Developer will continue without using a tool like rector, it makes a lot of things way easier.

The rector is in general a tool that can help a lot with PHP and framework updates like [symfony](https://symfony.com/), but as I'm more a TYPO3 kind of person, I've joined an initiative to make migration sets for TYPO3 Core Updates as well.

This will ease the upgrade from e.g. TYPO3 9 LTS to TYPO3 10 (Soon to be LTS), but this is something I'll share more about later.
My Takeaways from 10 Days of Learning to Code
Tags: 100daysofcode
Published: 2020-04-01 04:59:17

Using the Power of Habit to Change My Schedule Slowly

*I shared this post on Medium on March 13, and I thought I'd share it here because it's motivating me during the depression of quarantine.

Having spent the past 10 days tweeting about coding on Twitter’s #100DaysOfCode, here are my takeaways:

1. Coders are super friendly and generous.
It may not seem a big deal, but the level of support people give when you’re struggling, or even when you’re doing well, is so heartwarming. In no other community of people do I feel such a level of comradery.

2. Learning to program is like learning a new language.
At first, you have no idea what people are talking about. By the fifth day, you can figure out the gist of what some people say. And each day, you learn a little more. It’s like going into a dark room with a lamp that’s getting progressively brighter.

3. You’re still a massive newbie.
Even after a couple of days of spending 1 hour or more on focused learning, you still have a LOT to learn. You’ve only got the syntax down, and those people who put up their projects/games on Twitter still seem like gods.

4. Coding everyday is becoming a habit — and an addiction.
You get bored playing games and watching YouTube videos. After the ‘aha’ moments of figuring out a small coding problem, passive activities seem blander. You’d rather spend your time outside of learning talking with people or doing chores. Or reading. Which you haven’t done in a long time now, come to think of it.

5. Coding helps inoculate you against doing hard things.
In a world that’s obsessed with easy victories, you now begin to grasp the lure of working hard at something for a long time — and the utter satisfaction of wrestling with a problem until you solve it.

6. Coding is a deeply social activity.
Google is your friend. Asking for help on Slack or reading things on Stack Overflow or Medium becomes second-nature. Sketching on others’ GitHub repositories is a thing. These things all enable you to learn more than you could on your own.

7. Everyone should learn to code!
I don’t know if I’m in the early romance stages of my relationship with coding or what, but I’m excited. Maybe a little too excited…
Celebrating 10,000+ followers 🎉 - Thank you DEV: #AMA 🌼
Tags: ama, watercooler, webdev, opensource
Published: 2020-04-01 04:58:13

**Hey friends 👋**

Yes, this happened. Even though I've joined DEV on Aug 7, 2018, I’ve only been writing on DEV for a total of maybe 9.5 months. I’ve written a total of [12 posts](https://dev.to/liyasthomas) (including this one). There are many more in my drafts page, waiting to be revisited and hoping to see the light one day. My [Postwoman](https://github.com/liyasthomas/postwoman) project is one of the reasons why I was able to accomplish this figure.

{% cta https://github.com/hoppscotch/hoppscotch %} GitHub → {% endcta %} {% cta https://hoppscotch.io/ %} Web app → {% endcta %}

### **This post is dedicated to my first ever #AskMeAnything. You can ask me anything in comment box and I'll answer them.**

---

"Pay your rent from open source 💸" is my favorite article I wrote so far.
{% link https://dev.to/liyasthomas/pay-your-rent-from-open-source-jh %}

---

**Here's some of the major takeaways I found while writing:**
- Keep it under 4 minutes long
- Don’t be too descriptive (people like to skim)
- List form articles do best
- Develop click-bait headings
- Comment on interested and relevant articles
- You have to engage and you have to do it more than others to grow faster
- Respond to every comment you receive

Keep these points in mind and you’ll be developing the perfect content for DEV.

{% link liyasthomas/i-m-writing-a-book-de-coding-the-passion-project-2c07 %}

---

If you want a heads up on my next projects, or just want to chat about the web, life and happiness make sure to follow me [@liyasthomas](https://twitter.com/liyasthomas) on Twitter 💙. If any of my projects helped you please consider [making a donation](https://paypal.me/liyascthomas).

![yep](https://media.giphy.com/media/XbxZ41fWLeRECPsGIJ/giphy.gif)
10 Signs of a good Ruby on Rails Developer
Published: 2020-04-01 04:30:06

Link: https://blog.joshsoftware.com/2018/04/20/10-signs-of-a-good-ruby-on-rails-developer/

I have been working as Ruby on Rails developer since last five years with Josh Software, I felt that I should write down my learnings about the best practices followed by the RoR developer. How I learned …? of course to learn something you need to commit the mistakes, thats how we learn right?

Let’s see, What all you should follow to be a ‘Good’ Ruby on Rails developer.
NGINX Set Let's Encrypt
Tags: nginx, letsencrypt, ssl
Published: 2020-04-01 03:54:31

> set Https บน nginx ด้วย Let's Encrypt

---

### How to start

#### -  Step 1 install certbot

```sh
$ sudo add-apt-repository ppa:certbot/certbot
```

#### -  Step 2 install Certbot’s Nginx package 

```sh
$ sudo apt install python-certbot-nginx
```

#### -  Step 3 edit config on Site Available

```
$ sudo nano /etc/nginx/sites-available/default
```

> /etc/nginx/sites-available/default

```
...
server_name example.com www.example.com;
...
```

#### -  Step 4 restart nginx 

```sh
$ sudo systemctl restart nginx
```

#### -  Step 5 certbot

```sh
sudo certbot --nginx -d <example.com> -d www.<example.com>
```

> output and select 2 

```
Output
Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
-------------------------------------------------------------------------------
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
-------------------------------------------------------------------------------
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):
```

#### -  open https with `` https://example.com ``