teleren/devto huggingface dataset:
Fix GIT after MAC OS Catalina update (xcrun error)
Tags: tips, programming, git, mac
Published: 2020-04-09 03:55:01

---
title: Fix GIT after MAC OS Catalina update (xcrun error)
published: true
description: memo of the steps required to fix developer path error after updating to Catalina.
tags: #tips, #programming, #git , #mac
---

Yesterday, annoyed by the hundredth message telling me there was an **update available** for my mac. 
![Software Update Notification](https://dev-to-uploads.s3.amazonaws.com/i/enrjjnhen3cwpc5lf7oj.png)
 I hate so much the notification numbers in my dock, and even more, the box that keeps appearing on the right top corner asking me when it should update:

![Update Available](https://dev-to-uploads.s3.amazonaws.com/i/wfwultahvn8ki51zjfet.jpeg)

> Where is the option "Stop annoying me, I will update whenever the fuck I want"?

So, I decided to update to Catalina. I did that already for my Mac at home, and the one in office, so I decided to do that for the laptop I was given for remote work. 
Of course, **it took more than half an hour**, but I planned that in the evening so everything went smoothly. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b03y17kj2kbaerve06o8.png)

What I forgot was that after the update, I got errors with GIT and had to run a bunch of commands to fix them. 
Since I found myself googling the solution every time, I leave them here for reference.

Basically, your IDE will inform you **the path to git is invalid**, and if you try using git from command line you will get this error:

```
(/Library/Developer/CommandLineTools), missing xcrun at: 
/Library/Developer/CommandLineTools/usr/bin/xcrun
```

To fix it, you just have to update  Xcode toolkit, therefore, just run 

```
xcode-select --install
```

authorize _install requested for command line developer tools_ and wait for few minutes.

( If that does not work, you probably have to update/remove-reinstall a Xcode at all - now that I am writing, I remember I struggled a bit more few months ago with the old mac at work)

After that Git will work.
But now every time you try to `git push/pull` you are requested the passphrase for key. Pretty annoying.

To save it in your KeyChain and avoid having to type your SSH Key passphrase all the times, or every time you restart ( Iterm or the Mac) run:
```
ssh-add -K ~/.ssh/id_rsa
```
[credit](https://stackoverflow.com/a/25721662) 

Hope it helps
Do you go back to edit your published articles?
Tags: discuss
Published: 2020-04-09 03:27:35

Hey Dev's!

So I've been wondering. I often spend days to write an article.
'Cause I never feel the article is complete and ready to be published.
Does the content make sense? Is it relatable? Did I spend all this time just rambling?
Maybe there's a wrong assumption? Wrong fact? Did I make a googie?
Maybe it's not relevant to other people? Maybe it's bland? Maybe I should add a diagram? Or an example?

When I feel that the article is decent enough and I've gotten tired of editing it, I quickly publish it before I can change my mind.
And being the self-obsessed person that I am, I often come back to reread them.
And often I feel like, maybe I could add reference to that article that I recently read. That quote. Maybe this Codepen.
Maybe active voice would've sounded better than passive here.

Once it gets into my mind, it bothers me that something is amiss in my article. And I edit it.
So yeah, here's my question.
- Do you guys do it too? Do you edit your articles if you find something to add/change in it?
- Or once it's published, you don't touch it again at all? Like, religiously. Add comments instead maybe?
- Or add new stuff with a new "Edited" section.
- Or store your ideas till you have enough of them to make another independent article?
- _"You're crazy Gaurang. Nobody thinks about their articles so much. Here, have a cookie 🍪"_

PS. I took more than half a day to post this question
Twiliohackathon Project Part 1 - The Setup
Tags: twiliohackathon, serverless, aws, javascript
Published: 2020-04-09 03:17:04

## The Problem

As we learn more about COVID-19, we are developing ways to reduce its spread. This is a step in the right direction for people who are uninfected – but what about the confirmed cases?

Hopefully, the confirmed cases of COVID-19 are receiving treatment in hospital or isolated at home. But they can’t visit with friends or family. I’m sure this would make anyone feel lonely. To compensate for this, we can create support groups through communication channels like SMS, Messenger, WhatsApp, etc. 

But what about people who lack a support group they can turn to?

## The Solution
A support group that includes everyone with a mobile phone!
Such a solution would allow anyone with a mobile phone to text something encouraging to someone who is undergoing treatment.

## The Tech Stack
**Backend**
This will comprise most of the application and be built using the Serverless framework.

Here is a diagram of the basic implementation (but note that this is a proof of concept and subject to change):

![diagram](https://res.cloudinary.com/rosborne/image/upload/v1586237115/blog-posts/twiliohackathon/01%20-%20The%20Setup/Web_App_Reference_Architecture.png)

**Frontend**
I will create a public-facing web page where those with receiving treatment can sign up to receive words of encouragement from strangers.

I will build this web page using Gatsby and React.

**APIs**
The main line of communication will be through SMS, so this will require Twilio’s Programmable SMS service. Messages are sent in one direction, meaning that no two-way conversations will take place. Once someone receives an SMS message, they can’t respond to it. This gives us room to customize the message sent by including the Giphy API to attach funny or inspiring GIFs. :smile:

## Final thoughts
The point of this application is to allow everyone an opportunity to send their love and best wishes to those undergoing treatment. It’s important to remember that while most of us (including me) are under quarantine, we aren’t alone. We have the power and resources to make a difference in someone’s life, even if it’s just by sending them a few nice words.

I’m posting this to share my idea, so please let me know what you think!

If you’re planning to do the same thing, let me know what your implementation is. :smile:
The technology stacks I use for software development (as a full-stack developer)
Tags: reactnative, csharp, aws, linux
Published: 2020-04-09 02:28:39

As a full-stack developer I enjoy building out a solution from top-to-bottom. Doing that involves learning and using various technologies at every layer of the stack.

![The tech stacks I use](https://dev-to-uploads.s3.amazonaws.com/i/2c3d29c8vi5z132pxlgh.png)

I like to take an agnostic approach to development; meaning that I’m not loyal to any particular programming language, framework, or tool. I try to assess fit, trades-off, and choose the best tools for the job among what I know. Sometimes that means learning something completely new when it makes sense.

I thought it’d be interesting to share the tech stacks for some of my projects:

![Personal/portfolio website (www.kg.codes)](https://dev-to-uploads.s3.amazonaws.com/i/dedfy90lf2m6ygcrmd2i.png)

Personal/portfolio website (www.kg.codes)
· Google Cloud Platform (server/hosting)
· Windows Server (server OS)
· Microsoft IIS (server software)
· MySQL (database)
· PHP (web API)
· PHP (website)

![‘Doctor search’ mobile app](https://dev-to-uploads.s3.amazonaws.com/i/8ypvn3kkceke4i2pr2np.png)

‘Doctor search’ mobile app
· Google Cloud Platform (server/hosting)
· Windows Server (server OS)
· Microsoft IIS (server software)
· MySQL (database)
· Node.js / JavaScript (web API)
· React Native / JavaScript (mobile app)

![‘Social media’ mobile app](https://dev-to-uploads.s3.amazonaws.com/i/t0zuzli554m3yq5zof1n.png)

‘Social media’ mobile app
· Amazon Web Services / AWS (server/hosting)
· Linux (server OS)
· Nginx (server software)
· PostgreSQL (database)
· .Net Core / C# (web API)
· Xamarin / C# (mobile app)

![‘Small business search’ mobile app (‘Set Up Shopz’ on the App Store)](https://dev-to-uploads.s3.amazonaws.com/i/j9lrr6zwxav93n7pqyzj.png)

‘Small business search’ mobile app (‘Set Up Shopz’ on the App Store)
· Google Cloud Platform (server/hosting)
· Windows Server (server OS)
· Microsoft IIS (server software)
· MySQL (database)
· PHP (web API)
· Xamarin / C# (mobile app)

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

‘Appointment scheduling’ web app
· Amazon Web Services / AWS (server/hosting)
· Linux (server OS)
· Nginx (server software)
· Cassandra (database)
· Spring Boot / Java (web API)
· Vue.js / JavaScript (website/app)

Let me know if you have any questions about what/why I use a certain thing.
Right now my favorites to work with are AWS, Linux, Nginx, PostgreSQL, Node.js, and React Native. 🙌🏾
One knowledge gap I see I have is NoSQL databases; I have no experience there.

What stack/technologies are ya’ll using right now?
Some elements hidden in full screen?
Tags: debugging, webdev, css
Published: 2020-05-25 15:43:54

---
title: Some elements hidden in full screen?
published: true
date: 2020-04-09 00:00:00 UTC
tags: debugging, webdev, css
canonical_url: https://remysharp.com/2020/04/09/some-elements-hidden-in-full-screen
---

This is one of those "I spent nearly a day debugging this and I don't want to forget, so I'm writing it here for all eternity\*

_\* Or as long as I renew the dns…_

<--more-->

## The problem

I had a React based project that had a main "board" view and triggered by the user, a modal would appear. This worked fine during development and though I didn't touch the code around the modal at all, the modal would not appear at all in mobile.

Why was that?

One thing I did notice, that eventually helped, was that the modal was only missing in full screen mode and when the website returned to non-full screen, the model would magically appear.

## Some context

This is a snippet of the code that React boots in the browser. It's not so much that React caused me a problem, but more that with libraries like React, Vue and so on, is that they attach onto a node in the DOM that's not _quite_ the root (I've suffered this in the past when trying to do a flex 100% wide and tall React app).

Note that the main board view the visitor sees is in `<Game>`.

```
<TableContext.Provider value={this.tableContext}>
  <Helmet>
    <title>{title(table)}</title>
  </Helmet>
  <UpdateNotice />
  <Game {...this.props} />
  <StandModal table={table} />
  <CloseWindowModal />
  <GettingStartedModal />
</TableContext.Provider>

```

The visitor would then load up the board and they tap "full screen", from thereon in, the modals, like `<GettingStartedModal>` is invisible.

It's in the DOM. In Chrome Canary I could see the modal in the DOM and I when I hovered over I could see devtools highlighting where _it should be_, but it wasn't there.

The modal didn't have any opacity, visibility or anything else funky going on. So, what was it 🤔🤷‍♀️

## Full screen context

The full screen API and selector applies at a DOM node level. In this case, the DOM node for the `<Game>` component was going full screen. The component was designed to stretch across the viewport, so that's the only thing that would be seen when in full screen.

This meant the full screen context was on the DOM node that was a _sibling_ of the modal.

**The modal would need to be a child of the full screen context.**

So that was it, I need to move the full screen to a higher up element. In the end I hacked about with React's `useRef` to make use of `document.body` but it certainly had me stumped for almost a day!

_Originally published on [Remy Sharp's b:log](https://remysharp.com/2020/04/09/some-elements-hidden-in-full-screen)_
Stack - Data Structures in JavaScript: Part #2
Published: 2020-04-09 02:13:36

In this blog, I will talk about our next data structure: a stack. 

A stack is a linear data structure that works with the logic of last-in first-out (LIFO). What does it mean? Let’s take a real-life example. 

Consider plates stacked in a cabinet.  

You put a plate in the cabinet, and then you put another on top of it and then a third one on top of the other and so on. When you want to get a plate, which one do you grab first?  You wouldn't normally pull a plate from the middle or bottom. So you grab the last plate you placed first, and the first plate you placed, which is at the bottom of the stack, last.  



This is how data is placed in a stack and taken out of it.  A stack therefore has 3 basic operations: 
- pop - remove the top item from the stack. 
- push -  add an item to the top of the stack. 
- peek - return the top of the stack. JavaScript doesn’t have a built-in method for this.



![Alt text of image](https://raw.githubusercontent.com/Urfan196/MyFIles/master/Lifo_stack.png?token=AMQWY7CE5WHRFHFN4MGHKDK6RPWTW)

#####So when can we use this data structure ? 
The main feature of a stack data structure is that it allows us to first retrive the data that was most recently added. For example, for surfing the web, we could use stack to store all of the user’s most recently visited pages. In this case, stack will enable the user to immediately return to the previous page when he or she clicks the back arrow.
My zsh ❤️ Aliases
Tags: productivity, programming, linux, bash
Published: 2020-04-26 11:47:40

---
title: My zsh ❤️ Aliases
published: true
date: 2020-04-09 00:00:00 UTC
tags: productivity, programming, linux, bash
canonical_url: https://includejs.dev/zsh-alias
---

This post features my ever-growing list of `alias`-es. I will write about my `oh-my-zsh` theme settings and plugins in another post 👍.

My `zsh` aliases are written in a separate file and loaded in my `.zshrc` file like so:

- **`source $HOME/dotfiles/zsh/aliases.zsh`**

I'm using [`homebrew`](https://brew.sh/) as my package manager.

## Miscellaneous aliases

- **`alias help="tldr"`**

Because those `man` pages can be quite intimidating, I prefer to use [tldr](https://tldr.sh/) for the first, quick glance.

- **`alias top="sudo htop"`**

Interactive process viewer - to see what's hogging your memory. Good for killing processes fast!

- **`alias yt="youtube-dl"`**

For quickly downloading youtube content. More about `youtube-dl` [here](https://github.com/ytdl-org/youtube-dl).

- **`alias reload="source ~/.zshrc"`**

For quickly reloading your `zshrc` config.

- **`alias finder="open -a Finder ./"`**

Open your current directory in Finder (I'm not super good with copying and moving stuff around in terminal yet).

- **`alias weather="curl -4 https://wttr.in/Brussels"`**

Check out the weather in your city.

- **`alias cat='bat'`**

`cat` with syntax highlighting and other stuff. More about `bat` [here](https://dev.to/scottw/bat-57pg-temp-slug-2229370).

- **`alias md='mkdir -p'`**

Make a new directory only if one (with the same name) doesn't exist yet.

- **`alias please=sudo`**

Because being polite is cool.

- **`alias d='dirs -v | head -10'`**

Display the last ten directories.
[TIL] Typescript index signatures
Published: 2020-04-09 01:46:04

I have recently encountered a problem while porting my toy react application from Javascript to Typescript, this toy-application , fetches all the popular repos from Github and displays them on the page. 

The object looks something like this: 
```typescript
const [repos, setRepos ] = useState<{}>({})
{
'All': object,
'Ruby': object,
'Javascript: object
}
```

Problem arises when you try to access the repos object, Typescript compiler throws a type mismatch error. ( Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.) 
```typescript
repos[selectedLanguage] 
```

To solve this, i needed to define an interface in which any string can be as index for the object, it looks something like this. 
```typescript
interface Repos{
  [key: string]: object
}
```

Use the interface as the generic type for setState 
```typescript
const [repos, setRepos ] = useState<{Repos}>({})
```

 And the problem goes away 
```typescript
repos[selectedLanguage] 
```
Wordpress + Web Components = Awesome ✨
Tags: wordpress, javascript, php, showdev
Published: 2020-04-09 00:53:19

---
title: Wordpress + Web Components = Awesome ✨
published: true
description: Integration Wordpress theme loop with Web Components
tags: wordpress,javascript,php,showdev
---

**Wordpress** is one of the most used content managers for a long time which offers great maturity and a great community around, with the passage of time many libraries and javascript frameworks have emerged that are modern development, leaving aside many Wordpress themes with jquery.

Nowadays there is a lot of talk about technologies that boost Wordpress such as **JAMStack** or **Headless Wordpress** to integrate it with Next.js, Nuxt.js or Sapper, and sometimes there are projects that by their nature are legacy or do not require a very large stack, for those cases you can easily use jquery and today I want to share one more alternative, which is the use of **web components**.

Web components have the peculiarity that they are indifferent to where they are used, whether within a javascript framework, some template engine such as **Blade**, **Halm**, etc., because the idea of web components to create custom html tags and therefore are used very similar as any html tag is used.

Here some examples:

```html
<sp-icon size="s" name="ui:Magnifier"></sp-icon>
<smart-button class="material">Click Me</smart-button>
<emoji-rain drops="50" active></emoji-rain>
```

In **Wordpress** to loop a certain number of posts the loop is used, where the html code is placed to show the title or the highlighted image, the web components as mentioned above are treated like the other html tags, so the web components are can use within **PHP**.

```php
<?php echo "<emoji-rain drops='50' active></emoji-rain>"; ?>
```

Here is a brief example of how to integrate a slideshow into the Wordpress loop.

**Create the npm package**

```bash
npm init - yes
```

**Install development dependencies**

```bash
npm i -D css-loader style-loader webpack webpack-cli
```

**Install the [macro-carousel](https://github.com/andrewslrm/wordpress-webcomponent-slider-demo) library that will be used to make the slideshow.**

```bash
npm i -D macro-carousel
```

**In the src / index.js file import the library, no need to call additional functions.**

```javascript
import "macro-carousel";
```

Inside **Wordpress** in the index.php or any other template file include the following code:

```php
<macro-carousel pagination loop>
   <?php if (have_posts()): while (have_posts()): the_post(); ?>
      <article class="slide">
       <figure>
         <?php the_post_thumbnail(); ?>
       </figure>
       <h3><?php the_title(); ?></h3>
    </article>
  <?php endwhile; endif; ?>
</macro-carousel>
```

The macro-carousel web component will create a slideshow and is used like any other **HTML tag**, the end result with a bit of styling is:

The code can be found on [Github](https://github.com/andrewslrm/wordpress-webcomponent-slider-demo) 😁
No time to sleep. Ding! It's time to work.
Tags: twiliohackathon
Published: 2020-04-08 20:54:39

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project.)

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)

[NOTE: I speak really bad English so bear with me for about 3 mins, or just look at the code(which is far more understandable in my opinion)).
## What I built
Hello everyone,

I build an alarm job using several great npm packages and of course the Twilio API. The purpose of this alarm is to wake me up on a schedule via an SMS. The user can adjust his schedule via a json file(so it's super easy) and then magic happens. The app creates a cron job, that triggers on the date times of the json. 

TADaaa
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f66a7oicecqk1jm887ya.jpg)

## Link to Code
The code is open source and is located at https://github.com/alator21/Ding-time-to-work. It is licenced with the Apache 2.0 licence.

## How I built it (what's the stack? did I run into issues or discover something new along the way?)

My stack contains:

- Node.js
- Typescript

It all started today when i randomly saw the twilio hackathon announcement.It caught my interest immediately. I knew that i could create something interesting with such amazing service as Twilio.I am fammiliar with typescript and Node.js so i was certain what stack i would use. Then i remembered that i have trouble waking up so that was my idea.

The first problem i encountered was, the timing. I hadn't use a cron job again so it was kinda unclear. Then i found the awesome npm package node-scedule(https://www.npmjs.com/package/node-schedule). It simplified my work instantly.It has an very easy and predictable API, allowing you to create easy cron jobs.

After i found the core function of the program, i had to design the classes.

Classes:

1. Moment. This class represents a single moment we want the alarm to ring.
2. Schedule. This class represents the whole schedule of days and times when the alarm must ring.
3. Alarm. This class get as an input, a schedule, and alarms on when its time.

The rest was easy. I created a json file(schedule.json) and i parse it. Then i had to convert days names to number(0,6). There was a catch there. Javascript's Date function has a getDate() that return the index of the name.To my surprise the index of Monday was 1 and 0. The index 0 is Sunday. Other than that the rest was was pretty straighforward.



Instruction on how to run the program, are on the github(README).


Thanks for reading



## Additional Resources/Info
https://www.npmjs.com/package/node-schedule
https://pm2.keymetrics.io/
Day 112 : Damn
Tags: hiphop, code, coding, lifelongdev
Published: 2020-04-09 00:38:14

_liner notes_:
- Professional : What a day! Tried to demo a project to a coworker that literally worked the day before and I hadn't touched the code and got an error. It was weird. The response was a captcha page from Cloudflare. Had another team member who works on the Node package help me out. I found a support ticket with a similar situation and it turns out that sometimes, with Glitch, depending on the IP address you get when your project wakes up, you may get blocked my Cloudflare. I just remixed my project, ran my setup script and got everything up and running. Demoed the project and my coworker said he was pretty impressed. He wasn't expecting to see anything for a while and was happy with what I did. He wants to demo it with another team member. Cool. Oh and had a few other meetings today.

- Personal : Not to get political, but damn. haha In coding news, I was able to add methods to the audio player web component I made so that I can play and pause the audio with buttons outside of the web component. Also got an Event Emitter implemented so that when the track changes, it will send out an event with the new track information so that elements outside can listen for it. I'm going to use it for sharing the track to Twitter. Oh and I can randomize the tracks so they play in a different order each time it loads.

![View of a grassland prairie in Grand Tetons in Wyoming with mountains in the background](https://dev-to-uploads.s3.amazonaws.com/i/22wveyr4woypa12b2a8o.png)

Going to do some research, watch "Dispatches from Elsewhere" (forgot to watch it on Monday) and go to bed.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube DztYoWXBfqw %}