teleren/devto huggingface dataset:
GatsbyJs - Add environment variables
Tags: gatsby, windows10, linux
Published: 2020-04-21 17:31:26

---
title: GatsbyJs - Add environment variables
published: true
date: 2020-04-20 00:00:00 UTC
tags: GatsbyJs,Windows10,Linux
canonical_url: https://www.jskap.com/blog/gatsby-add-environment-variables/
---

  

![](https://friendly-heyrovsky-86d9f9.netlify.app/opengraph?&author=kapilgorve&title=GatsbyJs%20-%20Add%20environment%20variables&tags=GatsbyJs,Windows10,Linux)

  

## Development Environment[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#Development-Environment)

- Create a new file named as `.env.development` at the root of your project.
- Add your variable to the newly created file. Example - `TEST_KEY=123`
- Change your `npm run develop` command to set environment.

For Windows -

```
    "develop": "set GATSBY_ENV=development && gatsby develop"
```

For Linux -

```
    "develop": "GATSBY_ENV=development gatsby develop"
```

- Restart your dev environment. So Gatsby will load your new env file.
- You should be able to access your env variables using `process.env.TEST_KEY` in any js file.

## Production Environment[<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#Production-Environment)

- Create a new file named as `.env.production` at the root of your project.
- Add your variable to the newly created file. Example - `TEST_KEY=123`
- Change your `npm run build` command to set environment.

For Windows -

```
    "develop": "set GATSBY_ENV=production && gatsby develop"
```

For Linux -

```
    "build": "GATSBY_ENV=production gatsby build",
```

This is only if you want to build on local.

If you are using any providers like Netlify use the Linux version. You will also need to add environment variables in the service provider.

For Netlify it is in `Site Settings > Build&Deploy > Environment`

  

This post was originally published at https://www.jskap.com/blog/gatsby-add-environment-variables/

  

👋 Hi! I’m Kapil. I am always chatty about building things, sharing my learnings, freelancing. Come say hi to me at [https://twitter.com/kapilgorve](https://twitter.com/kapilgorve)
Copy file content to clipboard in terminal
Tags: linux, shell, ubuntu
Published: 2020-04-19 23:51:59

In Mac you can use `pbcopy`:
```bash
$ pbcopy < hello.txt
```

In Linux which is using X11 (I am using ubuntu), you can use `xsel` command:
```bash
$ sudo apt install xsel
$ xsel -b < hello.txt
```

To copy some program's output to clipboard, we can use pipe:
```bash
$ date | xsel -b
```
Then if you use "ctrl-v", you will see the copied date.
MIJO chatbot store site manager PART 1
Tags: twiliohackathon, ecommerce, chabot, mijo
Published: 2020-04-19 23:47:27

---
title: MIJO chatbot store site manager PART 1
published: true
description: Manage a simple store through a chatbot and Twilio WhatsApp
tags: twiliohackathon, ecommerce, chabot, mijo
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ynbvqf74zth5exfby7iq.jpg
---

# Intro
I decide to try this new approach because I think the chatbots are becoming more valuable becoming very good personal assistance. And this can be a new way to develop the front end of many services in the future.

## What MIJO gonna do
It can create a store site with a simple base gatsby template and deploy a static site. When the customer checkout in the store it sends a message (through the chatbot) to the owner telling him about the customer and his order.

## Tech Stack
The main stack is NodeJS because of the compatibility with Gatsby which is the static site generator for the stores. And has the SDK for Twilio. For the server and REST API manager the beloved ExpressJS.

## Goals
I defined the next goals to end the project:

1. Create the ExpressJS project
2. Customize Gabsty Ecommerce template
3. Integrate with Twilio API
4. Improvements

# Progress
I already have the NodeJS Express project generated and working on the customization of the Gabsty e-commerce template to support custom product management with son files and on the checkout, action sends data to the express server.

![ExpressJS project](https://dev-to-uploads.s3.amazonaws.com/i/lqqdi8ufkxxtcvkgvddh.png)

I chose [https://github.com/parmsang/gatsby-starter-ecommerce/tree/master/src] Gabsty starter for the store template I liked the minimalistic design (THANKS TO parmsang for this beautiful design), but for the site, It has to be customized to remove some functionality and add custom functionality to support the new way of managing the site.

![Gabsty e-commerce starter](https://dev-to-uploads.s3.amazonaws.com/i/mffxzp8q9oj8r3z5mufy.png)

A tricky part here is I want to reuse the node modules folder for the express project and the Gabsty generated sites because of the space consumption of having a lot of sites and each one with its owns node modules.

# Next step
I have to make ExpressJS generate a new Gatsby site and publish it in a static folder, the endpoints to add and remove products and the checkout handler. So wait for the next update.
No, you don't need to learn the language before you learn a framework
Tags: opinion, beginners, frameworks
Published: 2020-04-19 23:01:13

---
title: No, you don't need to learn the language before you learn a framework
published: true
description: Sometimes it's okay to skip steps when learning to code.
tags: Opinion, Beginners, Frameworks
---

Imagine you just moved to a new country that speaks a different language. Now imagine you're out-and-about, and you **really** need to use the toilet. In a panic, you Google how to ask someone for directions to the bathroom in this country's language. 

Inside of every page you view, you find people arguing you first need to learn the language's grammar, conjugation and master its alphabet before you should even *attempt to* ask a local how to find the restroom. Someone who has been speaking the language for over 10 years even says that people who try to string together sentences without mastering these principles first make the whole language worse for everyone else who uses it.

**You just need to use the bathroom, and it can't wait.**

Anyone who is new to programming can probably relate to this story. Too often, a vocal minority of programmers on Stack Overflow, Reddit and Twitter will preach that a novice coder must master the syntax, data structures and best practices of a language before they are *even allowed* to ask questions. They certainly must know all of this before they're allowed to a use a framework!

**Programming languages are just tools to get things done.** Can you imagine if people demanded the same level of mastery with screw drivers and hammers before you were allowed to assemble Ikea furniture? And heaven forbid you use a power drill before you've *mastered* the screw driver!

Babies aren't expected to learn grammar or verb tenses before they're allowed to speak. They start by learning the words that are most useful to them to get the things they want ("mommy", "daddy", "cookie"). Much like babies mimicking the words they hear around them before they start forming their own sentences, copying and pasting code you don't entirely understand is a part of the programming language learning process. 

Where you start in your programming journey will depend on what problem you're trying to solve. Maybe you start with a high-level web UI framework like React. When you start building things, you'll pick up some JavaScript along the way. As you run into challenging problems, your Google searches will likely lead you to discover established best-practices that help you grow as a developer. And if you stick with it, eventually you'll become fluent.

If you're new to programming, welcome! Look for the tools that can help you build the things you're interested in, and start coding. It's okay to be imperfect. There is almost no beautiful code in the wild: just coders doing the best they can with what they have.
weekend.dev Episode 1
Tags: podcast, javascript, typescript, programming
Published: 2020-04-19 22:58:34

---
title: weekend.dev Episode 1
published: true
description: podcast about weekly happenings in the front end world
tags: podcast, javascript, typescript, programming
---

Hey folks, listen to my first ever podcast. Would love feedback!

I discuss stuff that happened this week in the JavaScript world.

https://anchor.fm/weekenddev/episodes/Episode-1---crankjs--romejs--types-vs-tests-ed0cqk/a-a1vq8eq
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-04-19 22:57:12

day 41/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today still in form, implements onsaved, onsubmited, thinks about globalkey, validate
https://github.com/triyono777/100-days-of-code/blob/master/log.md

yesterday i just fall asleep before i start my 100daysofcode, n today wakeup early n doing 100daysofcode twice,
Set up your PHP environment on UBUNTU
Tags: php, ubuntu, laravel, beginners
Published: 2020-04-19 22:48:08

Recently I had the idea to move my environment for coding in PHP to Ubuntu. I don't have a bad history using windows but I've read that in Linux you have an easy installation of tools for coding, so I created a dual boot on my computer and started.

Disclaimer: I'm not an expert using Ubuntu but I'm learning and I thought that it could be a great idea to share what I've learned and another thing is that I'm learning English, so I really appreciate if you tell me of any grammar mistake.  

To set up my PHP environment using Laravel/Homestead I followed these steps listed below. 

First we need to download Virtual Box version 6.* with the command 

    sudo apt install virtualbox-6.1

After that we need to turn off the secure boot on your machine, this if you're using a modern laptop. You will find this option in the BIOS of your system.

Once you turned off Secure Boot on your machine, download the latest version of vagrant to avoid any error from the official site of releases: [https://releases.hashicorp.com/vagrant](https://releases.hashicorp.com/vagrant/)

Then if you downloaded the .deb package you can click it and install it. 

We're going to use laravel/homestead which is bounded with all the software needed to have an isolated environment in your machine for PHP. 

You need to add the vagrant box to your machine with the command 

    vagrant box add laravel/homestead

This will add to your vagrant boxes the laravel box that contains all the software needed for development on PHP with laravel.

Once you've added the box and configured everything you need in the Homestead.yaml file, provision the vagrant machine with your current user, not the sudo user.

The last thing to do is create a new group in your machine called **vagrant** with the command: 

    sudo groupadd vagrant

Next, add your current user to that group using the command 

    sudo usermod -aG vagrant $USER

Now the last thing to do is change the owner:group of your files. 

    sudo chown -R axele:vagrant ./project

And now you can create files and everything you need inside the vagrant machine.

Thanks for reading.
COVID-19, mobile apps that preserve privacy. And the winner is ….
Tags: android, ios, covid, mobileapps
Published: 2020-04-19 22:43:24


The World struggles and needs to choose between data privacy and the interruption of new chains of SARS-CoV-2 (COVID-19, Coronavirus) transmission.

Here is a summary of the best mobile apps preserving the data privacy built by Governments (https://github.com/fs0c131y/covid19-tracker-apps)

We count 34 mobile apps from countries all over the World, from Argentina to Vietnam.

* Some apps focus on cities or provinces (e.g., Madrid – Spain, Lombardia – Italy)
* Google Play (store) (it is a guess) accepts to name an app “COVID” only if a public administration publishes it (try it from your location: https://play.google.com/store/search?q=covid)
* The mobile app written by Iran is not available on the store and needs to be installed outside the app store
* Apple Store (it is not a guess) accepts to name any app with “COVID” (try it from your location on the https://apps.apple.com)

Most mobile apps indicate that their authors pay strict attention to the data privacy of the users or that the mobile app is not mandatory to use.

* Some mobile apps require the mobile phone number of their smartphone’ owner to enable the Ministry of Health to contact them
* Geolocations are kept in the mobile phone
    * Geolocations are shared only if the user accepts it
* The authors (Ministry of Health) may ask the geolocation of the user if he/she is infected
* The user is aware of its possible infection by another person if he/she has walked near an infected person in the last 14 days
* Data about phones near the user does not reveal personal identities
* Data about phones near the user are stored on user’ phone [and not centrally]
* Other third-party services will not be able to track the user’ identity
* Users are in control of their data and can revoke consent any time
* User’ data will only be used for COVID-19 contact tracing
* The author of the app collects anonymized data to improve the software

By far, the availability of the source code facilitates the work of software engineers and fasten the deployment of applications taking good care of the data privacy of individuals, Israël, Iceland and Pasteur Institute and Greater Paris University Hospitals paved the way to other public administrations.

A mobile app will never save the World from the virus, but it may reduce its spread in the long run (remember that we need to flatten the curve).

--- 

Full details are available here: https://altf1be.wordpress.com/2020/04/20/covid-19-mobile-apps-that-preserve-privacy-and-the-winner-is
Designing a pragmatic coding interview. Part 1.
Tags: career, tutorial, showdev, programming
Published: 2020-04-19 22:36:04

In the following series of posts, I'll be sharing the internals of designing a pragmatic coding interview that I got to know after interviewing folks for different tech positions for some time and here comes the first one.

### 🧰 Preparing a repository with the assignment.

Let me use [this Github repo](https://github.com/coreskills/python-developer-2020-04-16) as an example.

There are 4 basic rules that go like this:

1️⃣ Make sure to create boilerplate for everything that doesn't test for the skills you're looking for in your candidates. This will save everyone a lot of time while providing enough signal to make a hiring decision.

2️⃣ Make sure to provide a predefined automated way of testing candidates' solutions. This is how you define the minimal criteria necessary for passing your test.

3️⃣ Turn your assignment repo into a template. In Github, it goes as a default feature so you have an easy way to replicate one repo per candidate there.

4️⃣ And last, but not least. Define an issue template that explains the task to the candidate. This one saves you a good deal of time when creating a repo setup for every new candidate.

That's it for this one. Short & sweet. In the next post, we'll zoom in each of the rules.

✌️ Stay tuned & stay healthy.
I created a package to mock schema.graphql with one command
Tags: graphql, javascript, typescript, apollo
Published: 2020-04-19 22:26:05

npm: https://www.npmjs.com/package/fast-graphql-mock
github: https://github.com/kuskoman/fast-graphql-mock

Install (globally):
npm: `npm i fast-graphql-mock -g`
yarn `yarn global add fast-graphql-mock`

It's a very simple library (with quite a lot of dependencies...) for creating mock graphql mock server using one command.

Usage:
```shell
fast-graphql-mock
```

possible flags:
`-f` file, if name is different than `schema.graphql`
`-p` port, default is 4000

Running the library in a directory with schema file should run apollo server with playground.

This library has been there for a while, but I decided to advertise it a little bit since I think it can be usefull to all frontend devs using graphql

I will be really grateful for all bug reports.
Making Your First Twitch Bot
Published: 2020-04-19 22:19:00

# Introduction

In this post, I'll walk through implementing a Twitch bot. Specifically, I'll be going through initial configuration to connect to Twitch with Node and the `tmi.js` package, as I feel the documentation available makes this less straightforward than it should be. 

I'll be referencing code from [this repo](https://github.com/gortron/twitch-bot), which I put together for this post.

# Implementation

Start with the instructions and sample code (or pull from my GitHub repo, linked above) that Twitch provides [here](https://dev.twitch.tv/docs/irc). Once you've created an account for your bot, [registered it](https://twitchapps.com/tmi/) for the `tmi.js` packages' OAuth, and have a local clone of my/or GitHub's repo, then you're ready to set up your `.env` file and `bot.js` script to connect to Twitch.

The code Twitch provides in their getting started guide asks you to put your OAuth credentials and other environment variables directly into the `bot.js` script. This is an anti-pattern, and makes it easy to expose credentials you want to keep secret. 

Instead, we'll use the `dotenv.js` package to manage environment variables. 
1) Add the dotenv package with `yarn add dotenv`
2) Add a `.env` file to your project's root directory
3) Add the following code to the `.env` file:
```
BOT_USERNAME=<YOUR BOT'S USERNAME>
OAUTH_TOKEN=<YOUR BOT'S TMI OAUTH TOKEN>
CHANNEL_NAME=<TARGET CHANNEL'S NAME>
```
Example syntax:
```
BOT_USERNAME=mytwitchbot
OAUTH_TOKEN=oauth:fsjgslgd4jkdfgsds5sjskl
CHANNEL_NAME=mytwitchusername
```
4) Update code in `bot.js` to reference the environment variables:

```javascript
const opts = {
    identity: {
      username: process.env.BOT_USERNAME,
      password: process.env.OAUTH_TOKEN
    },
    channels: [process.env.CHANNEL_NAME]
  };
  const target = opts.channels[0]
```

Your set up is complete!  To run, call `node bot.js` in your shell. 


# Conclusion

In this post, you reviewed how to configure your environment variables to connect to Twitch. I hope it was helpful. Feel free to reach out to me if you have trouble connecting your own bot to Twitch.
Unicron scheduler
Tags: cron, schedule, python, crontab
Published: 2020-04-19 22:05:02

---
title: Unicron scheduler
published: true
description: A smart scheduler to run jobs once daily but retry as needed
tags: cron,schedule,python,crontab
---

![Unicron docs](https://dev-to-uploads.s3.amazonaws.com/i/3oxsmjb2ixwjco7b9mp4.jpg)

I wrote this Python tool named Unicron to run daily webscraping and tweeting tasks on my laptop without using unnecessary storage or API limits or posting too often. I hope this is useful for others.

https://michaelcurrin.github.io/unicron/#/

Unfortunately, crontab alone can't run them reliably on a laptop which is not always on and online. And running all jobs hourly (when they only need to run once a day) is overkill for resources, but that's what I've been today. 

Now I have a tool what integrates with crontab that will run your tasks exactly once a day and will keep retrying them throughout the day if they fail. Keen to hear thoughts on this! Or to find if there is a solution for Mac out there already.
Docsify Tutorial
Tags: docsify, javascript, documentation, tutorial
Published: 2020-04-19 21:59:57

---
title: Docsify Tutorial
published: true
description: Quickstart for creating and configuring an elegant docs site
tags: docsify,javascript,docs,tutorial
---

I wrote a tutorial on how to build an elegant docs site using existing markdown docs and Docsify loaded on the frontend. I even split off the template folder into its own repo for easy use.

- https://michaelcurrin.github.io/docsify-js-tutorial/#/
- https://michaelcurrin.github.io/docsify-js-template/#/

I hope these are useful here. The tutorial repo has got more forks than my other repos so somehow people are finding and enjoying it.
How to Add Facebook Pixel to Liferay [Easy Guide]
Tags: liferay, facebook, pixel, marketing
Published: 2020-04-19 21:23:13

You can easily install Facebook’s remarketing/retargeting pixel in Liferay. 

In this article, we will show you how to install Facebook remarketing/retargeting pixel in Liferay.

## What is Facebook Pixel?

When you visit a website, you start seeing their ads on Facebook? This is called retargeting. 

Its like Google Analytics code which give information about user location, device information and in Facebook case its provides detailed information about user behaviour. 

This allows Facebook to retarget users visiting your website on Facebook.

## Step 1: Get Facebook Pixel Code

Assuming you already have the Facebook Ad account and you have the Pixel code.

You can follow official guide for [Facebook Pixel](https://www.facebook.com/business/help/952192354843755?id=1205376682832142)


    <script>
      !function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', 'XXXXXX');
      fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none"
      src="https://www.facebook.com/tr?id=XXXXXX&ev=PageView&noscript=1"
    /></noscript>


## Step 2: Add Facebook Pixel code using Theme
If you want only basic integration of the Facebook remarketing and code available on every pages of Liferay instance you can add Pixel code in theme.

In your theme edit theme template.

    theme-name/src/templates/portal_normal.ftl

Add pixel code before closing of the head tag.

Once theme is updated and deployed, Facebook Pixel will be available on all the pages.

Note: If you change the theme or use custom theme for some public pages. Facebook Pixel will not fire on that Liferay page.
Is a Data Science bootcamp a good option for a Designer?
Tags: career, datascience, education, beginners
Published: 2020-04-19 21:23:07

Ok.
I'm a ux designer,
and I'm seriously considering a Data Science Bootcamp.
I have some technical background. But I'm not sure this would be enough to successfully complete the bootcamp.

**Did you guys ever tried a Data Science bootcamp?**
**If yes, Could you please provide me some insights on that?**