teleren/devto huggingface dataset:
How to add gitignored files to Heroku (and how not to)
Tags: webdev, javascript
Published: 2020-02-04 08:37:51

Sometimes, you want to add extra files to Heroku or Git, such as built files, or secrets; but it is already in `.gitignore`, so you have to build on the server.

You have options, as this command is available.

```sh
git push heroku new-branch:master
```

But how do I create such `new-branch`.

A naive solution would be to use `git switch`, but this endangers gitignored files as well. (It might disappear when you switch branch.)

That's where `git worktree` comes in.

I can use [a real shell script](https://github.com/patarapolw/aloud/blob/77133bb2950af19819afd99b17026eabdb16fd4c/deploy.sh), but I feel like using Node.js is much easier (and safer due to [pour-console](https://github.com/patarapolw/pour-console)).

So, it is basically like this.

```js
async function deploy (
  callback,
  deployFolder = 'dist',
  deployBranch = 'heroku',
  deployMessage = 'Deploy to Heroku'
) {
  // Ensure that dist folder isn't exist in the first place
  await pour('rm -rf dist')

  try {
    await pour(`git branch ${deployBranch} master`)
  } catch (e) {
    console.error(e)
  }

  await pour(`git worktree add -f ${deployFolder} ${deployBranch}`)

  await callback(deployFolder, deployBranch)

  await pour('git add .', {
    cwd: deployFolder
  })

  await pour([
    'git',
    'commit',
    '-m',
    deployMessage
  ], {
    cwd: deployFolder
  })

  await pour(`git push -f heroku ${deployBranch}:master`, {
    cwd: deployFolder
  })

  await pour(`git worktree remove ${deployFolder}`)

  await pour(`git branch -D ${deployBranch}`)
}

deploy(async (deployFolder) => {
  fs.writeFileSync(
    `${deployFolder}/.gitignore`,
    fs.readFileSync('.gitignore', 'utf8').replace(ADDED_FILE, '')
  )
  fs.copyFileSync(
    ADDED_FILE,
    `${deployFolder}/${ADDED_FILE}`
  )
}).catch(console.error)

```

## How not to commit

Apparently, this problem is easily solved on Heroku with

```js
pour(`heroku config:set SECRET_FILE=${fs.readFileSync(secretFile, 'utf8')}`)
```

Just make sure the file is deserializable.

You might even write a custom serializing function, with

```js
JSON.stringify(obj[, replacer])

JSON.parse(str[, reviver])
```

Don't forget that `JSON` object is customizable.
Add your project located on PC to GitHub, A detailed How To Article
Tags: github, addexisitingproject, versioncontrol, sourcecontrol
Published: 2020-02-04 10:54:26

---
title: Add your project located on PC to GitHub, A detailed How To Article
published: true
description: This tutorial will walk you through the step by step approach about how to add your local code base to your GitHub account.
tags: github, add exisiting project, version control, source control
---

This detailed tutorial http://bit.ly/2UoEXLe will walk you through adding an existing project to GitHub.

Following is the Quick Cheat Sheet to add existing repository to git has step by step approach to add and push an existing code base to a new GitHub repository.


`echo "# my-first-repo-on-github" >> README.md`
`git init`
`# Create New repository on GitHub`
`# git remote add origin url`
`git remote add origin https://github.com/your-awesome-username/name-of-your-repository.git`
`git remote -v`
`git pull origin master`
`git add .`
`git commit -m 'init'`
`git push origin master`
Build Your Own Personal Data Repository With Nostalgia
Published: 2020-02-04 15:26:12

<p>The companies that we entrust our personal data to are using that information to gain extensive insights into our lives and habits while not always making those findings accessible to us. Pascal van Kooten decided that he wanted to have the same capabilities to mine his personal data, so he created the Nostalgia project to integrate his various data sources and query across them. In this episode he shares his motivation for creating the project, how he is using it in his day-to-day, and how he is planning to evolve it in the future. If you're interested in learning more about yourself and your habits using the personal data that you share with the various services you use then listen now to learn more.</p><p><a href='https://www.pythonpodcast.com/nostalgia-personal-data-repository-episode-248/'>Listen Now!</a></p>
How to Turn a String into an Array of Characters: 3 Ways to do so.
Tags: javascript, tutorial, array, string
Published: 2020-02-04 17:19:35

Here are 3 different ways to convert a string into an array of its characters in javascript.


```javascript
const str = 'Hello';

//1. Using split() method
const arr1 = str.split('');

//2. Using spread operator
const arr2 = [...str];

//3. Using Array.from() method
const arr3 = Array.from(str);
```

Follow me on:
👉Instagram: https://www.instagram.com/islamcodehood
👉Twitter: https://twitter.com/islam_sayed8
👉Facebook page: https://www.facebook.com/Codehood-111...
👉Dev: https://dev.to/islam
Inheritance In ES6
Tags: es6, javascript, inheritance, oop
Published: 2020-02-04 19:13:32

# Inheritance In ES6

## Classes In ES6

**Implementing a Class**

- to Implement a class we use the class keyword.
- every class must have a constructor function.
  attributes of that class are defined using getters/setters(functions as well).
- as for attributes we use getters and setters.
- getter and setter are special kind of methods that allow us to set the value of an attribut, and get the values of an attribute.

```javascript
class Person {
  //getter
  //here we used the get keyword and then the name of the getter
  get Name() {
    return this.name; //here we simply return the value of that attribute but with the this key word
    //so that we get the attribute of the select instance of that class
  }
  //setter
  set Name(name_) {
    //and here we set the value of the attribute
    this.name = name_;
  }
  //getter
  get Age() {
    return this.age;
  }
  //setter
  set Age(age_) {
    this.age = age_;
  }
  //constructor
  constructor(name_, age_) {
    this.name = name_;
    this.age = age_;
    this.canWalk = function() {
      console.log("YAY !! I'm Walking");
    };
  }
}
```

```javascript
//this is an instance of a Person
let me = new Person("salah", 25);
console.log(me); //Person {name:'salah',age:25}

console.log(me.Age); //getter
me.Age = 22; //setter
console.log(me.Name); //getter
me.Name = "SALAH EDDINE"; //setter

console.log(me); //Person {name:'SALAH EDDINE',age:22}
```

## Inheritance

- In modern javascript we have the extends key work which makes easier to implement
- inheritance in between our classes.
- Male extends Person means that Male class has all the properties and methods of Person
  And also have it's own.

```javascript
class Male extends Person {
  //getter
  get Gender() {
    return this.gender;
  }
  constructor(name_, age_ /*,here we can add other attributes as well*/) {
    //in the child class(Male) we must call the parent constructor first
    //we do that using the super method and pass to it age_ and name_ parent properties
    super(name_, age_);
    //and now we assign the child property gender which in this case will have a fixed value
    this.gender = "male";
  }
}
```

```javascript
//this is an instance of a male
let MalePerson = new Male("mohammed", 15);
console.log(MalePerson); //Male{name:'mohammed',age:15,gender:''male}
```
NGROK on Rails
Tags: webhooks, rails, ngrok, ruby
Published: 2020-02-07 18:37:44

---
title: NGROK on Rails
published: true
description: Handling Webhooks in a Rails App
tags: webhooks,rails,ngrok,ruby
---

When writing code to handle incoming webhooks, it's a good idea to actually get the service to send some real ones in, the best API docs in the world won't beat a real integration!

_A Webhook is just a POST request to your server, when something happens on a third party service._

The problem comes when you want to test those webhooks locally, to actually see a real request and payload, and see how your controller handles it, maybe debug some payload param, etc.

The issue is that the service cannot call your local computer, as its not publically on the internet. This is where [ngork](https://ngrok.com/) comes in. It will open the default 8080 port on your machine, and direct any traffic to that port to a chosen localhost port. eg, to open up your default rails app :

```bash
$ ngrok http 3000
```

That command starts ngrok which opens its status screen which looks like:

![ngrok console](https://dev-to-uploads.s3.amazonaws.com/i/rgfqf3s1drtt5tye9d2p.png)

It even has a nice web UI which can be used to view, edit and replay requests, very cool:
![ngrok webui](https://dev-to-uploads.s3.amazonaws.com/i/icmam9a456l7slilau9k.png)

After starting ngrok above, the rails app on my machine is open to the world on the hostname `9fdb5bc4.ngrok.io` (you can assume I've closed that by the time you read this!)




Your service provider will have a webhooks config page, where you can put the hostname of the service for it to post to. eg

![Go Cardless webhook setup](https://dev-to-uploads.s3.amazonaws.com/i/a6qg2za8u75nmgx6y3mx.png)



So all is great, you get your webhook fired off, which routes to your rails app, which reports this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fliaxbk4a4qa44papa1l.png)
(You will only see the log output version of that on the `rails s` console!)

So it says add the hostname to the config, but we can do one better than that. If we add the following into `./config/environments/development.rb` :
```ruby
  config.hosts << ENV['NGROK_HOST'] if ENV['NGROK_HOST'].present?
```
Then we don't need to change our code when we restart ngrok (each time it starts it will give a random hostname, unless you pay!)


With that config line in place, all we need to do before starting rails is to export aa var, eg:

```bash
export NGROK_HOST=a234c154.ngrok.io
```

Then it will be added to rails `cofig.hosts` so it accepts requests.
Music Player UI Using Bootstrap 4
Tags: css, todayilearned, todayisearched, html
Published: 2020-02-05 03:54:16

We have lots of collection of the bootstrap component with own styling and design. So here we designed simple Music Player User-interface Using Bootstrap 4.

The music player manages you all song in a single application with attractive interfaces. Here we designed a simple and responsive player with font awesome icons.  In this element, we used button group and bootstrap color classes to our element more beautiful. 

Make it yours now by using it, downloading it and please share it. we will design more elements for you.


GET SOURCE CODE:-

https://w3hubs.com/music-player-ui-using-bootstrap-4/
Day 79: Drive
Tags: hiphop, code, coding, lifelongdev
Published: 2020-02-06 03:29:20

_liner notes_:

- Professional : Got up early to sit in on a Talk Prep session where we discussed Demos. Had a really good discussion and great takeaways. After the session, I got ready to hit the road. I made it all the way to West Palm Beach before talking the second Talk Prep session of the day. Got some more great discussion and thoughts from more team members.

- Personal : After the meeting, I continued the drive and made it to Miami and got a chance to hang out with my sister, nephew and brother in law. Had a really great time and ate some great food.

![Vulcano El Teide, Spain at night with a grassy plain and mountatins in the distance](https://dev-to-uploads.s3.amazonaws.com/i/wjd9j6bsxvs491teay95.png)

It's late and I have to get up early to start my day at Sunshine PHP! As usual, I'll be posting from the event on my travel blog thing. https://dwane.in Yup. That's it. I'm tired. haha

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube EpSlPgLanVQ %}
[astuce] Comment utiliser du SQL modulaire dans votre manifest XML
Tags: webdev, tutorial, joomla, blog
Published: 2020-02-05 17:12:15

---
title: [astuce] Comment utiliser du SQL modulaire dans votre manifest XML
published: true
date: 2020-02-05 02:40:21 UTC
tags: webdev,tutorial,joomla,blog
canonical_url: 
---

Salut les joomlers de l'extrême!

Voici une nouvelle astuce croustillante qui vient du coeur du code de Joomla!.

Saviez-vous que vous pouviez utiliser plusieurs fichiers SQL pour le processus d'installation de votre extension Joomla?

Ces fichiers sont lus de façon séquentielle (l'un après l'autre) dans l'ordre dans lequel ils apparaissent dans le fichier xml du manifest de votre extension.

Voici un exemple. Prêtez une attention particulière à la partie concernant l'installation (install).

<script src="https://gist.github.com/alexandreelise/958989a3495bfb60ad0a0e8c681044b6.js" data-inline></script>
Python enumerate
Tags: python, beginners
Published: 2020-02-05 14:19:54

In <a href="https://python.org">Python</a>, the enumerate() function takes a collection (e.g. a <a href="https://pythonbasics.org/list/">list</a>) and returns it as an enumerate object.

Consider any list, like the list

```python
grocery = [ 'milk', 'butter', 'bread' ]
```

How would you get the index of an element?

If you used C, C++, C# or Java before, you use a for loop with an index and use the index to get the value at that location.

## Enumerate List and Tuples

In Python, you use enumerate() for that. As parameter you want the iterable, in this case the grocery list.

```python
>>> grocery = [ 'milk', 'butter', 'bread' ]
>>> for idx, val in enumerate(grocery):
...     print("index %d has value %s" % (idx,val))
... 
index 0 has value milk
index 1 has value butter
index 2 has value bread
>>> 
```

This works for other data too. You can do it for tuples:

```python
>>> grocery = ( 'milk', 'butter', 'bread' )
>>> for idx, val in enumerate(grocery):
...     print("index %d has value %s" % (idx,val))
... 
```

## Enumerate Strings

You can do it for <a href="https://pythonbasics.org/strings/">strings</a>. As parameter of the enumerate function, set the string you want to enumerate. Then it outputs the characters with index.

```python
>>> for idx, val in enumerate("hello"):
...     print("index %d has value %s" % (idx,val))
... 
```

This outputs as expected:

```python
index 0 has value h
index 1 has value e
index 2 has value l
index 3 has value l
index 4 has value o
>>> 
```

**Related links:**
* <a href="https://www.python.org/dev/peps/pep-0279/">Python PEP on enumerate</a>
* <a href="https://gumroad.com/l/dcsp">Python course</a>
Feedback for a project
Tags: help, feedback, review
Published: 2020-02-05 16:13:20

I'd like to ask a community for a feedback on a little project I've made a while ago.
It's a small web app to generate CSS theme [https://nikitahl.github.io/css-base/](https://nikitahl.github.io/css-base/). Does it make any sense? Can someone actually benefit from it or get some sort of a value from it, or it's just a useless tool.
Please be honest.
Thanks.
Developers don’t talk about this enough …
Tags: career, interview, impostersyndrome, confidence
Published: 2020-02-06 03:58:03

I feel like developers don’t talk about this enough …

The dreaded first impression that fuels our imposter syndrome from a bad Interview.

You show up to your interview … you are way too nervous, you perform badly on the test. Before you know it, you are out.

The first impression you left behind is that you are stupid. After that, you spend the rest of your day/weeks/even months trying to become smarter.

How did you overcome that feeling?

What words did you tell yourself to remind yourself that you are amazing.
GitHub deprecates access token in URL!
Tags: github, php, tutorial
Published: 2020-02-06 07:13:58

Just recently I [posted brief comparison](https://dev.to/rodiongork/facebook-google-or-github-which-oauth-for-your-site-20ni) about using authentication with Facebook / Gmail / Github on web-sites.

I told that FB annoys me with often breaking updates to API, while others do not. **Well, recently GitHub made some update too!**

Luckily it is not complicated change so I'll post the example of quick fix and couple of links to instructions - just in case someone use it and missed notifications. Example is in PHP but you can easily understand and convert it to anything including curl :)

## How it worked before

For "Login via GitHub" we use link or button on our web-page, which point to the following url (with some parameters) 

> https://github.com/login/oauth/authorize

This leads user to open GitHub login form (if he/she isn't already signed in) and then returns back to our web-site, providing us with **authentication TOKEN**.

This token is then used to fetch various information from API. In the simplest form we shall call `/api/user` endpoint to get public github ID of the user who signed in (and sign him/her into our site with this ID).

**And here is the change**

Old-style passed the TOKEN as query parameter, e.g. `/api/user?token=...` - but now it is deprecated.

## How it is now? Get to code!

Nowadays Github API methods want us to provide TOKEN in the request headers instead. Not a big difference, luckily:

_Old code looked like this_

```php
    function github_fetch_user_data($token) { // old style

        // url includes token:
        'https://api.github.com/user?access_token=' . $token

        // suppose we already have some additional options to API request
        $options  = array('http' => array('some_option'=> 'Some_Value'));

        // structure to pass additional features to HTTP GET request
        $context  = stream_context_create($options);

        // do HTTP GET request at last
        return file_get_contents($url, false, $context);
    }
```

Now it is changed to provide `Authorization: token ...` header line and remove query parameter:

```php
    function github_fetch_user_data($token) {

        $url = 'https://api.github.com/user';

        // include 'header' field in the options
        $options  = array(
            'http' => array('some_option'=> 'Some_Value',
            'header' => "Authorization: token $token"));

        $context  = stream_context_create($options);

        return file_get_contents($url, false, $context);
    }
```

_As one may see from the links below, similar deprecation exists for other methods of API which passed authentication token in query parameters or as a part of "path" of the url.

## Links

[GitHub deprecation of passwords and tokens in urls, since November 2019](https://developer.github.com/changes/2019-11-05-deprecated-passwords-and-authorizations-api/#authenticating-using-query-parameters)

[GitHub "Webflow" authorization API](https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/#web-application-flow)
Web Components 101
Tags: coding, customelements, htmlelement, registerelement
Published: 2020-02-06 19:18:56

---
title: Web Components 101
published: true
date: 2020-02-06 11:54:31 UTC
tags: Coding,customElements,HTMLElement,registerElement
canonical_url: https://blog.jws.app/2020/web-components-101/
---

Web Components are a set of technologies that allow you to create reusable custom elements with functionality encapsulated away from the rest of your code. This allows you to define something like `<js-modal>Content</js-modal>` and then attach behavior and functionality to it.

In this post, I want to explore how web components do what they do.

{% codepen https://codepen.io/steinbring/pen/bGGpaLo %}

In the above [pen](https://codepen.io/steinbring/pen/bGGpaLo), there are two examples. The first one (`<js-description>Content</js-description>`) uses a custom element (defined in JavaScript using `customElements.define()`). It is definitely useful but if you look at the second example (`<js-gravatar>Content</js-gravatar>`), there is now a `<template>` element that allows you to define what is within the custom element.

I plan on building on some of these concepts in a later post. Have a question, comment, etc? Feel free to drop a comment, below.
Reddit Live Feed
Published: 2020-02-06 12:43:59

## What is it?
Reddit posts, live, as they happen, right now, in your face!

A React based site that loads all Reddit posts as soon as they're made.

[Reddit Live Feed](https://entozoon.github.io/reddit-live-feed/)
[Source](https://github.com/entozoon/reddit-live-feed/)
 
### Why?
Building Super Simple™ (at first) projects like this is **always a good way to improve React knowledge**, plus I love the concept of seeing the entirety of Reddit sluicing in.

### Ingredients
*React JS

### Source

[Source](https://github.com/entozoon/reddit-live-feed/)

All Reddit posts are actually available as `.json` files such as this, which I check every now and then in order to update the list of posts. It takes advantage of React by having the posts data stored in the components as state variables, which allows everything to automatically update on the page - for example the timestamp information (2 seconds ago, 3 seconds ago, etc).
Ready to explore your NPM scripts?
Tags: node, javascript, npm, opensource
Published: 2020-02-06 12:53:13

Explore the NPM scripts of your project and see how they depend on one another - 
You can try this open-source CLI tool I've made, called **npmapper**
Simply run `npx npmapper` on any project directory which has package.json in it and browse the results

I would love to hear your feedback :)

For more details, check this one here: https://dev.to/mbarzeev/mapping-your-npm-scripts-with-npmapper-1ih0
Needed a Web Server, quick and easy..
Tags: npm, html, todayilearned
Published: 2020-02-06 13:47:24

Today I was asked to create a simple static html page that reads a json file with some information to show it on a grid. I've created the structure, added some bootstrap css files and opened the index.html on a browser and an error...

Reason: CORS request not HTTP

The solution was to run a web server to access the static html page. I needed it quick and easy. Found out I could install it via npm and run it on the base directory.

So, to install the server:
$npm install -g http-server

And to run it:
$cd my_project_base
$http_server

And voilá!

Starting up http-server, serving ./
Available on:
  http://<ip>:8081
Goroutines demystified
Tags: go, beginners
Published: 2020-02-06 16:03:53

In programming languages, code is often split up into functions. Functions help to make code reusable, extensible etc. 

In <a href="https://golang.org/">Go</a> there's a special case: goroutines. So is a goroutine a function? Not exactly. A goroutine is a lightweight thread managed by the Go.

If you call a function f like this:

    f(x)

it's a normal function. But if you call it like this:

    go f(x)

it's a goroutine. This is then started <a href="https://golangr.com/concurrency/">concurrently</a>.

If you are new to Go, you can use the <a href="https://play.golang.org/">Go playground</a>

## Goroutine examples

Try this simple program below:

```go
package main

import (
	"fmt"
	"time"
)

func say(s string) {
	for i := 0; i < 3; i++ {
		time.Sleep(100 * time.Millisecond)
		fmt.Println(s)
	}
}

func main() {
	go say("thread")
	say("hello")
}
```

Execute it with:

```
go run example.go
```

So while say('hello') is synchronously executed, go say('hello') is asynchronous.

Consider this program:

```go
package main

import (
    "fmt"
	"time"
)

func main() {
    go fmt.Println("Hi from goroutine")
    fmt.Println("function Hello")
	
    time.Sleep(time.Second) // goroutine needs time to finish
}
```

Then when I ran it:

```
function Hello
Hi from goroutine

Program exited.
```

As expected, the goroutine (thread) started later.

**Related links:**
* <a href="https://golangr.com/goroutines/">More on Goroutines</a>
* <a href="https://golangr.com/">Learn Go</a>