teleren/devto huggingface dataset:
How interesting I Find Travel and Tourism
Published: 2019-08-27 08:19:29

A lot of people have different reasons why they want to travel to a certain country and what they want to do there, as for me, my major concern and motivation of my job as a developer is not only to help build a world of technology but also to travel the world to attend conferences and see the great places like Google, Twitter, Facebook and Apple headquarters  etc.  This leading technologies in the world inspire me so much. For this reason, I find the United state of America(USA) a nation with so much to explore and view. You could read more from https://timbu.com/united-states-of-america. The State of Califonia is one of the many states in the USA that move me most, that's where most tech companies are found and most tech conferences take place there, One gets to visit regions like Silicon Valley, San Fransico Bay Area(also called Bay Area, the city beauty and nature are one of a kind having a beachside, that I love the most), then we move to New York just to name a few. As it is said the US is a place for everyone but I will say "When you go to the USA as a developer (beginner, junior or senior), don't forget to visit the region of San Franciso" just getting inspired can change a lot. For if something those not inspires you, then something will definitely pull you down.
pinoyteleserye
Published: 2019-08-27 08:15:52

If you enjoyed watching Pinoy Teleserye Dramas Full Episode, share Pinoy Tv Dramas Full Episode Full Episode Replay to your friends or leave a comment for <a href="https://www.pinoyteleserye.ae">Pinoy Teleserye</a> Dramas Full Episode here at pinoyteleserye.
Error when serving React app from sub-folder
Tags: help, react
Published: 2019-08-27 07:58:19

Hello there!

I'm trying to serve a React application from a sub-folder. It's currently a very simple SPA running on the root URL (e.g. http://myserver:3000) and I'd like to serve it from a sub-folder (e.g. http://myserver:3000/newroot).

I've spent the day trying many things, most of them revolving around the use of a *"homepage"* variable in my *package.json*:

```json
{
  "name": "cra_test",
  "version": "0.1.0",
  "private": true,
  "homepage": "/newroot",
...
```

I've found many people (and docs) reporting this as a (part of a) solution but when I do so and rebuild then rerun my app (`npm run build` and `serve -s build`) it yields nothing but a blank page with the following error in the browser console:

![screenshot](https://i.imgur.com/8JuQS5D.png)

Pardon the literal french on the first two warnings, it reads:
> The script at [...] was loaded while it's MIME type (text/html) isn't a valid JavaScript MIME type

These two errors **exclusively** appear when I use *"homepage"* in my *package.json*. For testing purposes, I've reproduced all those steps on a freshly created (with *create-react-app*) app, the issue is the same, so it's most likely not due to coding errors.

After hours of trial and error, I'm basically clueless as to how to solve this.

I'd be grateful for any insight on the issue or for any alternative solution to the initial problem (serving the app from a sub-folder), thanks in advance!
Git- Automatic pull on production server?
Tags: git, gitpull, production
Published: 2019-08-27 07:55:55

---
title: Git- Automatic pull on production server?
published: true
description: 
tags: git, git pull, production
---

Hi, 

I'm hosting my own Gitea server on which I have most of my web projects stored.

After pushing changes to a repo, I always have to connect to my shared hosting server on which I cloned the repo and run "git pull".

I know I could setup a cronjob to run this command every few minutes, but is there a better solution, which would allow an instant deployment?


Thanks!
Typescript. Simple React components.
Tags: react, typescript, beginners, tutorial
Published: 2019-08-27 07:39:14

---
title: Typescript. Simple React components.
published: true
description: How to write components with friendly interface, but also with strict typings.
tags: #react #typescript #beginners #tutorial
---

Hello there. I very like to use React and Typescript. Almost in each new project need simple components, like atoms, for example: button, input, checkbox etc. I have some best practices to make it friendly for all members of team, but also with strict typings. Let's get a look, maybe it will be helpful for you too.

### Button

```jsx
import React from 'react';

interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  block?: boolean; // Your some custom prop
}

export const Button: React.FunctionComponent<IProps> = ({ block, children, ...shared }) => {
  return <button {...shared}>{children}</button>;
}

Button.defaultProps = {
  type: 'button',
}
```

That's it. You have custom `Button` component, that supports all native button attributes with strict typings. You can put common things for all buttons in project, like styles or some business logic.

For use ```import React from 'react'``` instead of ```import * as React from 'react'``` add in your `tsconfig.json` property `esModuleInterop: true`

### Input

```jsx
import React from 'react';

interface IProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
  value: string;

  onChange(value: string): void;
}

export const Input: React.FunctionComponent<IProps> = ({ children, onChange, ...shared }) => {
  return <input onChange={e => onChange(e.target.value)} {...shared} />;
}

Input.defaultProps = {
  type: 'text',
};
```

The Omit helper type was added in Typescript 3.5. If you use previous version of Typescript, just add this string:
```type Omit<T, K> = Pick<T, Exclude<keyof T, K>>```

### Checkbox

```jsx
import React from 'react';

interface IProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
  onChange(value: boolean): void;
}

export const Checkbox: React.FunctionComponent<IProps> = ({ children, 
onChange, ...shared }) => {
  return <input onChange={e => onChange(e.target.checked)} {...shared} />
}

Checkbox.defaultProps = {
  type: 'checkbox',  
}
```

Now you can use it like here:

```jsx
<Checkbox checked={false} onChange={toggleCheckbox} />
```

It is end of small tutorial. If it will be helpful for someone, I can continue to explain some good things of React and Typescript. Thanks for attention.
What is your best API of 2019?
Tags: discuss
Published: 2019-08-27 06:47:32

---
title: What is your best API of 2019?
published: true
description: Awesome collection of 50 public APIs of 2019. Free and open APIs for your front-end applications.
tags: #discuss
---

I'm big fan of Public APIs. So, whenever I found any good API that can make my applications useful and powerful then Add them on my website called [Public APIs](https://publicapis.io). Here I make 50 public APIs collection as a blog post.

[Awesome APIs of 2019](https://public-apis.xyz)

Feed me with more cool and useful APIs suggestions.

What is your best API of 2019?
Synchronicity and what do you do when you find your own blog post as a solution?
Tags: discuss, learning
Published: 2019-08-27 06:26:27

So this is synchronicity at work, I just commented on a post/question by  Ben Halpern https://dev.to/ben/when-is-learning-what-to-google-good-enough-37e7 that ties in partly with a Twitter poll I put up earlier this evening.

So you have a problem, you do a Web search, and in the results is your own blog post with the solution, how does that make you feel?

Answer the poll and be honest, I chose option 2 for sure.

{% twitter 1166072768414277634 %}
Extending the Array class to calculate the Fibonacci sequence
Tags: javascript, todayilearned
Published: 2019-08-27 05:56:15

Today I learned how to do something wrong. Well, okay, that's not entirely true. I've been doing wrong things for a long long time. 

Take extending native objects. The general opinion is that this is bad practise and should be avoided, for [various good reasons](https://stackoverflow.com/questions/14034180/why-is-extending-native-objects-a-bad-practice). There are [better ways](https://javascript.info/extend-natives) of doing this apparently, even [subclassing](http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/). 

So, today I learned yet another way of doing [Fibonacci sequences](http://rosettacode.org/wiki/Fibonacci_sequence#JavaScript) and, as you can see from that RosettaCode link, there are _lots_ of interesting ways in lots of different languages. My way isn't in that collection (yet). Maybe someone'll beat me to it.

So I was extending the `Array` object with a method to generate an `n`-length array with an optional code-block to initialise each member. I came up with this:
```javascript
Array.prototype.times = function (a, c) {
    if (a)
        for (var b = 0; b < a; b++)
            this[b] = "function" === typeof c ? c(b, this) : b;
    return this
};
```
Then I started thinking of ways to test it and went through a few different things, finally quite accidentally stumbling over the Fibonacci sequence which can be generated like this:
```javascript
var fibonacci = [].times(81, function (i, array) {
    return (i < 2)
     ? i
     : array[i - 2] + array[i - 1];
});
print(JSON.stringify(fibonacci));
```
That generates Fibonacci-0 to Fibonacci-80. After that JavaScript loses precision and the series breaks down.

Somehow, I don't think that MDN is going to add `.times` to its list of [Array object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) methods, but I really wish they had something like it. Meanwhile, here in my little internet backwater, I'll be using it. 

Bottom line: Don't do this. It's bad practise. It might get you reprimanded by your team leader. It might even hasten the end of the world.
Which Python Version is Your Live Project Using?
Tags: python, discuss
Published: 2019-08-27 05:41:46

Not long ago - about **three years ago**, whenever someone asked me which Python version should be used for our new project? - I would replay: we start Python 2.7 and later on maybe move to Python 3.x.

**One year ago** I received similar question: should we start our new project with version 2? - I was very confident in my reply: Nope, we start 3.6 as the proven stable 3 version.

**Today**, believe me or not, for starting a project I would already recommend Python 3.7.

My current thoughts on Python versioning are:

- **2.7** is **very stable** and **performant**, but will **not be supported** after 2020.
- I have the feeling **3.6** is used in **most new projects** today. Is my feeling right?
- **3.7** has many standard **library improvements** and the **performance is competitive with 2.7** - see [here](https://hackernoon.com/which-is-the-fastest-version-of-python-2ae7c61a6b2b). These I know also from experience.
- **Python >= 3.8**: After [the BDFL proudly left the building](https://mail.python.org/pipermail/python-committers/2018-July/005664.html), and I say this with really high respect to [Mr.Rossum](https://gvanrossum.github.io/), a new [governance model](https://www.python.org/dev/peps/pep-8016/) was introduced. I am looking forward to see if this will have negative / positive effect or no effect at all. 

**My questions for you are:**
* **Which Python version is your current live project using?**
* **Which version would you recommend for starting a new project?**
I’ve completely rewritten two projects with React Hooks, here is the good and the ugly
Tags: react, reacthooks
Published: 2019-08-27 05:37:12

![img](https://miro.medium.com/max/2314/1*wvpm5rhYqardQHVLvGzbEw.png)

The Article: https://medium.com/@unbug/ive-completely-rewritten-two-projects-with-react-hooks-here-is-the-good-and-the-ugly-48c28a103f52

The project on GitHub: https://github.com/unbug/codelf
React Native Cookbook — Free Concise Video Tutorial
Tags: reactnative, react
Published: 2019-08-27 05:31:16

![img](https://miro.medium.com/max/1284/0*bas5fTzAv6tZyObz.png)
Article: https://medium.com/@unbug/react-native-cookbook-concise-free-video-tutorial-f53b9c84216

GitHub: https://github.com/unbug/react-native-train

Free advanced React Native course on Udemy:
https://medium.com/@unbug/free-advanced-react-native-course-on-udemy-deb7f2074e03
Time Series database drawbacks
Tags: database, design, backend
Published: 2019-08-27 05:24:58

---
title: Time Series database drawbacks
published: true
description: Issues I have encountered with time series databases
tags: database, design, backend
---

## Use case
Lately, I needed to create an analysis page on the app to count how many shoes a shop has. The database set up is MongoDB so I looked for a good database design suitable for analysis.

My analysis is
1. Yearly, monthly, daily count of shoes
2. A shoe has the maker name and color

After searching, I found Time Series can be done on MongoDB from this [article](https://www.mongodb.com/blog/post/time-series-data-and-mongodb-part-1-introduction). Still, needed a bit more solid production-level tutorial, and luckily I found it [here](https://dev.to/riccardo_cardin/implementing-time-series-in-mongodb) on Dev Community by the awesome Riccardo Cardin!

## Solution
Assuming these datasets we have for the shoes counters, I started implementing it and it was ready.

```
Dataset

Makers: ['Nike', 'Adidas', 'Onitsuka Tiger']
Colors: ['White', 'Black', 'Red']
```
The way I set up the Analysis DB is to have the collection `Shoes` containing a document/year. When the document first created, all counters are set to 0 then incremented daily.

```javascript
DB Shoes Collection document 

{
  created_at: ISODate("2019-01-01T00:00:10.000Z"),
  year: 2019,
  nike: 15000,
  adidas: 10000,
  tiger: 8000,
  black: 25000,
  white: 1000,
  red: 8000,
  // months is an array of 12 elements
  months: [
    {
      created_at: ISODate("2019-01-01T00:00:10.000Z"),
      nike: 200,
      adidas: 1000,
      tiger: 80,
      black: 200,
      white: 1000,
      red: 80,
      // days is an array of days/month
      days: [
        {
          created_at: ISODate("2019-01-01T00:00:10.000Z"),
          nike: 20,
          adidas: 100,
          tiger: 8,
          black: 120,
          white: 8,
          red: 0,
        }
         // rest of days
      ]
    }
    // rest of months
  ]
};
```
### Advantages
- This structure is powerful because the document size doesn't change after creation so IO processes are not as expensive, this document size would be around 35 Kbs
- Fetching the document and getting what you need (e.g. Nike shoes number on 2/8/2019) can be tricky at first sight, but thanks to Functional programming, create 1 function and reuse it
- The structure is neat and very well-organized.


### Drawbacks
Let's say we want to use some filtering on the Graph to find Black Adidas shoes count on 15/4/2019. The above DB structure fails to give us any information about overlapping joined counters, they're just atomic mere counters.

The only way around it I could think of is creating new counters with every possible joint. This is absolutely a terrible idea, hence, decided to put down the Time Series DB for now and find another design for this use case.
Destiny, The Game: Clan Banner Design
Tags: design
Published: 2019-08-27 03:41:54

Here is a design I did last week for the Admins in my gaming community. They wanted to upgrade the Clan Banner for the game "Destiny", one of the best games of all time. They are planning to put the banner on a shirt and the leader asked if anyone had Graphic Design experience. I was not going to let this opportunity go to waste, so, I said what anyone would have said if they wanted to get more experience. "Sure wasup?".

We spoke about what they wanted and to improve upon the original design. I went into my handy dandy "Figma", a great free tool to create mockups and layouts and tried out a few things. I created the first two and then got his opinion. He told me about his vision a little more in detail. He then said, "Bro don't worry just work your magic if your gonna put this on your portfolio or resume".

When he said that, the constraints came off and I went at it. I created three (he doesn't know about the last two) and I showed him the one I really enjoy the most. He was ecstatic and joyful and I felt like he wanted to pop out of my laptop. I was thrilled that he liked it that I didn't think to tell him about the other two.

He is now getting the opinion and approval of the other admins. Hopefully, I will be able to show off the design on the shirt in the future.
globalThis - Access environment-agnostic global `this` value
Tags: javascript, react, beginners
Published: 2019-08-27 03:02:47

Hey! 👋

Check out today's Dev Tip! 👇

> Follow me on Twitter [@shahzaibkhalid](https://www.twitter.com/shahzaibkhalid) for more Dev Tips! ✨


globalThis provides a standard way of accessing the global `this` value i.e. the global object in an environment-agnostic way. 🚀
 
> 🛑 This is a stage-3 proposal on the ECMAScript list of proposals and although the functionality is shipped in most of the new browsers, consider polyfilling it to support older browsers.


Accessing the global object requires different syntax in different JavaScript environments:

👉 `window` or `frames` - On the web
👉 `self` - In Web Workers
👉 `global` - In Node.js


Let's suppose we want to share some functionality on both, Web and Node.js, e.g. checking if `Set` natively exists in our environment
or not? We've to check the environment first! ❌

```javascript
const doesSetExists = () => {
  if (typeof window !== 'undefined') {
    return typeof window.Set === 'function';
  } else if (typeof global !== 'undefined') {
    return typeof global.Set === 'function';
  } else {
    throw new Error('Unable to locate global object');
  }
}
```

Using `globalThis` - it drills-down to a single line and environment-agnostic ✅ 🔥

```javascript
const doesSetExists = () => typeof globalThis.Set === 'function';
```

Hope you learned something new today. Do let me know what do you think about this Dev Tip in the comments below. 👀

Peace. ✌️
VSCode Tailwind Extension And Rails (ERB)
Tags: tailwindcss, rails, erb, vscode
Published: 2019-09-14 19:34:05

---
title: VSCode Tailwind Extension And Rails (ERB)
published: true
tags: [tailwind, rails, erb, vscode]
canonical_url: https://scottw.com/vscode-tailwind-extension-rails
---

If you are having trouble getting an extension like [VSCode Tailwind](https://github.com/bradlc/vscode-tailwindcss) to work in VSCode, a smart place to start debugging is the language mode.

For example, for me, a file named `application.html.erb` had the language set to `html.erb` instead of the expected `erb`. This in turn, caused the VSCode Tailwind extension to be ignored since it was not registered for `html.erb`.

Long term, there may be a way to have this extension look for any erb (\*.erb - although that too may be problematic). In the short run, we can tell VSCode to map any `html.erb` file back to `erb` like this:

```
"files.associations": {
    "*.html.erb": "erb"
  }

```

This change fixed my immediate issue, but it ended up causing another bug. Previously, I had done a similar fix for Emmet by mapping `html.erb` to `html`. Now of course since the file type was being changed to `erb` Emmet needed the following update:

```
 "emmet.includeLanguages": {
    "html.erb": "html",
    "erb": "html"
  }

```

The ease of configuration overrides is both a blessing and a curse. It is very easy to make one small change and have it run amuck. But it is much better than being boxed into something with no way making it work (even just temporarily).
3 Reasons to Be and Stay Lazy
Tags: productivity, mentalhealth
Published: 2019-08-27 02:24:47

I’m a lazy person (let’s be honest here, who isn’t).

Though my parents keep telling me ever since I turned 18 that it’s a very bad habit, I’m confident that it’s the key to a better life, and a better future.

Here are my reasons:

### 1. Save Time

Being lazy means you will find ways or means to get more things done in lesser time efficiently.

If I can express my feelings in two words, I wouldn’t use three; if I can make a delicious grilled cheese sandwich in three steps, I wouldn’t make it four.

Or if I want to create a detailed list of my favorite restaurants in the city, I wouldn’t bother writing it down in a notebook, like my non-tech savvy auntie did.

With so many top [task management software](https://quire.io/compare/best-task-management-software-for-creative-teams) out there, including Asana, Basecamp and Quire, it’s actually quite easy to do so.

### 2. Less Waste

Being lazy means you are less likely to buy stuff, and thus less likely to throw them away.

I remember two years ago, I had to move from an apartment to another every three months, and with each time that I moved, I carried lesser and lesser belongings with me.

Now, I find myself disliking the idea of buying more goods, since it always makes me feel like adding unnecessary weight onto my shoulders.

Why buy a new T-shirt when you’ve already got enough to wear for one week? It’d be like having the extra credit card that you’ll never use in your purse.

![project management software](https://thepracticaldev.s3.amazonaws.com/i/35136e0r37ih8i2xz5m0.jpeg)

### 3. More Fun

Once you save yourself time and energy, it’s no doubt that you’ll have more time for other things and people.

For example, you can have dinners with your families, watch DVDs with your friends, go camping with your dog, and even learn something new.

In all, I think laziness is a good thing.

If you’re like me, you like [getting things done](https://quire.io/blog/p/Setup-GTD-Method-in-Quire.html) fast without burdening yourself and still having the time for activities and games, let’s be lazy, or stay lazy.
Join the CSS Future with CSS Grid (from CodePaLOUsa 2019)
Tags: cssgrid, css, tutorial, webdev
Published: 2019-08-27 00:40:15

I just got back from presenting at CodePaLOUsa in Louisville Kentucky. This is the first time I have successfully self-recorded a conference talk I've given.

In celebration, I thought I'd share it with the Dev.to community! If you're interested in getting started with Grid, you're the perfect audience for this presentation!

{% youtube 6nmtebhd7FM  %}
Setup monitoring for existing Serverless projects in 2 minutes
Tags: serverless, aws, monitoring, tutorial
Published: 2019-10-20 23:25:46

---
title: Setup monitoring for existing Serverless projects in 2 minutes
published: true
date: 2019-08-27 00:00:00 UTC
tags: serverless, aws, monitoring, tutorial
canonical_url: https://serverless.com/blog/setup-monitoring-for-existing-serverless-projects-in-2min/
---

One of the challenges when working with the Serverless Framework and lambda is how to monitor your software. There exist various solutions for this, but nearly all of them require time and work to instrument your codebase. Today I will show you how in 2 minutes, with zero instrumentation, you can add monitoring to your existing Serverless project.

First, make sure you have your terminal open in the directory containing your Serverless project. Then run the `serverless` command without any arguments. You will then be presented with an interactive set of prompts to configure your service for monitoring! Create an account and it will handle the rest for you.

 ![screen recording of the interactive serverless setup flow](https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/setup-monitoring-existing-project/sls-monitoring.gif)

Then run `serverless deploy` to redeploy your project with monitoring enabled. After that, you can open the monitoring dashboard for your service by running `serverless dashboard`.