teleren/devto huggingface dataset:
My journey to become a Successful digital marketer.
Published: 2020-05-16 22:08:31

●	 My journey to become a Successful digital marketer.
Hi guys, guess what I have something exciting to gist you, sit with me and let roll together;
I was just sitting in my room alone, thinking about this covid-19 lockdown, you known boredom wants to kill me, then I decided to have a chat with my friend, as we are discussing, gisting and laughing, Boom! He thrown the bombshell. You know what he said? He said, “Hey I’m undergoing a digital marketing course from Udacity Nanodegree Program and I think you should too”
I know what you are thinking, I didn’t show interest at first also, though have been thinking of taking digital marketing course but just haven’t decide where and when to take it. 
I don’t want to drag this further, but when my friend told me about all the benefit of taking this course with Udacity Nanodegree Program, I started showing interest, the benefit was massive, guys! The benefit, including the technical help, the project will be review by experts, the best part about the program is you get to work on real life project, that amazing! Isn’t it? 
That is not the end, doing the course of your program you will also learn the following 
•	U will learn how to create content 
•	Use social media to amplify your message 
•	Make content discoverable in search
•	Run Ads campaigns 
•	And advertise on facebook
 
Then the journey begins
I make research on my own log in to the Udacity’s digital marketing nanodegree program to have the full details of what this entails and I found out that they are the best. It is just as my friend told me.
 I was anxious to enroll then something came up.
The cost of the program! Its about $399 for a month and the cost will lasted for 3 months.
Then I started losing fate, maybe after all I won’t able to have this wonderful experience with the udacity digital marketing nano-degree program. It is sad right? 

The big Question
How will I overcome this problem? 
Can I afford the cost?
Is the program worth my time?
What about if they didn’t even meet up to my expectation?

The good news
Won’t you ask me how I got my questions answered?
Well I will tell you.
Udacity’s digital marketing nanodegree program is currently free for a month 
Which means the first month is absolutely free plus 15% off the remaining month and there is 7 days refund period if u not satisfied with the service.
Its amazing right? Yeah. I know.
Well let me give you the good news, am currently undertaking the course now and it is awesome, its beyond my expectation. Trust me you don’t want to miss this opportunity. 
Click on the link below to learn more about the udacity’s digital marketing nanodegree program today
https://www.udacity.com/course/digital-marketing-nanodegree-nd018?utm_source=studentproject&utm_medium=cpc&utm_campaign=ebook
Register today and let ride together on this wonderful journey.
Math.random() Use Cases
Tags: javascript
Published: 2020-05-16 22:03:28

`Math.random()` used when generating random numbers of a range.  Many times `Math.random()` used in conjunction with another method such as `Math.floor()` or user input to get a whole number at the end.

- case 1) Generate whole number ranging from `[0, 3]` (numbers from 0 to 3 both ends inclusive).

    * [Math.random()](en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) generates pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1).  

    * To only get whole numbers, we use [Math.floor()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) to round down.


```js
// multiply by 4; Math.random()'s upper end, 4 is exclusive
const randomNumber = Math.floor(Math.random() * 4);
```

- case 2) Generate whole number `[1, 6]`(numbers from 1 to 6 both ends inclusive).

    * Add one to randomly generated numbers.
    * Math.ceil() may look simple to use here but it will generate 0 as a result if Math.random() give 0.  

```js
// => `[0, 6]`
Math.ceil(Math.random() * 6)
```

   * We want `[1,6]`

```js
// => `[1, 6]`
//  Math.random() * 6 => [0, 5] then add one to each => [1, 6]
Math.floor(Math.random() * 6 + 1)
```

- case 3) Generate whole number from 1 to user's favorite whole number.


```js
const userFavNum = 5;
// Math.random() * 5 => [0, 4] then add one to each => [1, 5]
Math.floor((Math.random() * userFavNum) + 1)

```
🤙🏼 How I Handle Async Image Loading in React with Suspense-like library? 
Tags: react, image, suspense, lazyloading
Published: 2020-05-16 22:00:05

---
title: 🤙🏼 How I Handle Async Image Loading in React with Suspense-like library? 
published: true
description: Implementing Suspense-like image loading architecture.
tags: react, image, suspense, lazy loading
---

Long story short, I wrote a Suspense-like async loading, native, React ``<img>`` component almost two years ago. And today, I've published major changes to react-shimmer. (Thank you Mr. Quarantine 👌🏼).

Introducing the Release v3.0.0 🤙🏼🌠
- Source code has been rewritten in TypeScript.
- Native ``<img>`` component props (all of them) are preserved.
- Enforced "separation of concerns" between the actual async handling logic and "loaders". New *pluggable-loader* architecture.
- Better dependency management + deploy/publish process.
- Zero dependencies.

Check it out! 😇

{% github gokcan/react-shimmer %}

![react-shimmer](https://thepracticaldev.s3.amazonaws.com/i/h47vgbiq6qbc8o2yvr4e.png)
You can build something scalable for less than the price of a Netflix subscription
Published: 2020-05-16 21:54:50

Building software in 2020 is really, really cheap. You can put together a full blown product, and start charging money for as little as $15 dollars a month, and in as little time as a few weeks to a few months. If price is the one thing holding you back from committing to building something, then you should stop worrying and get started now.

I’ve been building Imprint, a blogging platform that combines the audience and simplicity of Medium with the control of Wordpress. To my surprise, it's actually been a lot cheaper than expected building this out.

My total monthly cost? $15 per month. That’s pretty good considering the fact that Imprint is a relatively content heavy application. Here’s a breakdown of all the services I’m using to build Imprint, along with their costs. Hopefully you can use some of the tools in this stack too!

- Frontend hosting: I’m running a Next.js app on a Heroku hobby dyno. $7/mo

- Backend hosting: I’m hosting my API and reverse proxy on a DigitalOcean droplet running Dokku. $5/mo

- Domain: I’m paying for a .to, which is a bit pricier at $40/yr, or $3.33/mo. If you get a more standard .com, .net, or .co, it’d boil down to $1/mo.

- Transactional email: Mailgun for sending and receiving emails from the imprint.to domain. Free for first 5,000 emails

- File storage: AWS S3 stores all images, videos, assets. Free for first 5GB.

- CDN and image transformations: AWS Cloudfront provides the CDN for all my S3 images. Also provides on the fly image transformations. Free for 50GB of data transfers

- Database: MongoDB Atlas has been super reliable, and I’ve had no problems hosting my MongoDB/NoSQL database here. Free up to 2GB storage

- Error Logging: Sentry. Free for 5k errors

- Search infrastructure: Algolia saves so much time in both building a UI for a search bar and for the underlying search functionality. Free for up to 50k operations and 10k records per month

- Analytics: Google Analytics is informative, and totally free.

And this should all scale up, at a similar price, for AT LEAST the first 5,000 active users.

BONUS: A couple ways to get platform credits and save a hefty amount of money.
- AWS Activate. Could net you a couple thousand in AWS credits to get started. https://aws.amazon.com/activate/

- DigitalOcean Hatch. Apply to their program and get started with a ton of DigitalOcean credits.
https://www.digitalocean.com/hatch/

- YC Startup School. They’ve partnered with dozens of companies to provide amazing deals to all program participants. The program is free, and the curriculum is great.

- Github Education. If you’re a student, the Github Education Pack has countless deals for almost all of the services I’ve mentioned above. Take advantage of this if you can! https://education.github.com/pack

Original post: https://roland.imprint.to/post/5ebf7eb6a8e3ca00c2500ff8
Latest React Component Syntax, May 2020
Tags: react, javascript, webdev
Published: 2020-05-16 21:28:55

---
title: Latest React Component Syntax, May 2020
published: true
cover_image: https://img-a.udemycdn.com/course/750x422/1362070_b9a1_2.jpg
description: 
tags: react, js, webdev
---

It's May 2020, I just want to document the latest React Component Syntax so far.

Latest React version is v16.13.1, released in March 2020.

Engineers who are new to React often got confused about different syntax when reading through many tutorials and documents on the Internet. I hope this helps to clarify the recommended way to write the latest React Component.

### Functional Component with Typescript

```tsx
import * as React from 'react'

export interface Item {
  title: string
  done: boolean
}
export interface Props {
  initialItems?: Item[]
}
export default function TodoList({ initialItems = [] }: Props): React.ReactElement {
  const [items, setItems] = React.useState<Item[]>(initialItems)

  const onClick = () => {
    setItems([...items, { title: 'Fetched Item', done: false }])
  }
  return (
    <>
      <ul>
        {items.map((item) => (
          <li>{item.title}</li>
        ))}
      </ul>
      <button onClick={onClick}>Fetch More</button>
    </>
  )
}
```

### Functional Component - Arrow syntax

```tsx
const MyComponent: React.FC<Props> = ({ value }) => <div>Syntax</div>
```

### Class Syntax

```tsx
interface Props {
  value: number
}
interface State {
  text: string
}
class MyComponent extends React.Component<Props, State> {
  static defaultProps: Props = {
    value: 0
  }
  state: State = { text: 'Example' }

  render() {
    return <div>Syntax {this.props.value} {this.state.text}</div>
  }
}
```

#### References:

- [https://syntax.codes](https://syntax.codes)
- [Live Codesandbox](https://codesandbox.io/s/react-typescript-estfk?file=/src/MyCounter.tsx)
TIL (feat VSCode)
Tags: todayilearned, vscode, codenewbie
Published: 2020-05-16 21:27:28

You can now move your custom containers around with all of the containing views in one movement in VSCode. The short video below shows dragging a Terminal into the Activity Bar.

![move-composite](https://user-images.githubusercontent.com/39244918/82130516-84d3cf00-97e5-11ea-9500-31e8e15cccc5.gif)
🚀 Releasing ShineBoard - A beautiful way to share code
Tags: showdev, javascript, php
Published: 2020-05-16 21:17:16

# ShineBoard
## A beautiful way to share code

## Introduction
🎉 Hello ! Today, I wanted to show you the side project I was working on. Basically, I didn’t like pastebin for sharing codes - it’s not very beautiful and user-friendly. I know hastebin, but half of the time the website is down. Also, I always have tons of .txt, .yaml files on my Desktop, due to logs or configuration files. So this is why I created ShineBoard - a tool to make code sharing easier and a better experience.
❗️ It’s a « beta » version, I just would like to get some feedback about it.

## Presentation
![](https://i.imgur.com/E8wVJoW.png)

ShineBoard is a open-source platform to make sharing code easier. Wasted by all the .txt files you downloaded and the poor hastebin codes ? Switch now to ShineBoard :
* Open [shineboard.io](https://shineboard.io)
* Paste your file's content
* Hit `CTRL + S` to save the paste, and then `CTRL + V` to share the link

Alternatively, you can use the [CLI](https://github.com/ShineBoard/cli) to create paste from your terminal :
* Install with NPM (`npm i -g @shineboard/cli`) or with Yarn (`yarn global add @shineboard/cli`)
* Type `shine help` to get started
* To upload very quicly, run `shine add <file>`
* You can also choose to specify a name for this paste with the flag `--name` (or `-n`)
* If you which, you can force the language with `--language` (or `-l`)

## Informations
📋 ShineBoard is currently in a « beta » version. I just want to get some feedback before working on new features.
The project is open-source, so feel free to contribute (links bellow).
### About the Website :
Based on Laravel, I choose to use VueJS and VueRouter in SPA mode, for a better navigation : you won’t see pages loading more and more. There is also a simple API, which is called by the CLI.
### About the CLI :
It’s actually the first time I made a CLI - and I’m not sure if it’s the good way to do it. Just a simple Nodejs app. Let me know if it’s not that bad :)

❤️ Also, I you liked this post and this project, please consider starring the Github repository bellow :

## Importants links :
* Website : [https://shineboard.io](https://shineboard.io)
* Github :
  * [Website](https://github.com/ShineBoard/shineboard)
  * [CLI](https://github.com/ShineBoard/cli)
* NPMJS CLI : [https://www.npmjs.com/package/@shineboard/cli](https://www.npmjs.com/package/@shineboard/cli)
How to do 8 hours of work in 4?
Tags: productivity, sideprojects, motivation
Published: 2020-05-16 21:10:32

<img src="https://i.imgur.com/tYCcvmA.png"/>
<p>We all have read about productivity, some tips and tricks that will help us do an 8h work in 4h. I wanted to write this article for a long time, but first I wanted to try these habits by myself and see are they true. So, I try out a lot of things, some worked, others not. Here are the keys that worked for me. First one is…</p>

<h2 class="my-2">Concentration</h2>

<p>For me the most important tip is concentration. You should be focused in what you are doing, if you wanted to complete it in less time with same or better quality. You should find a way to get <span class="font-italic">into the zone</span> and try to stay there as much as you can. The easiest way is to create your own ritual that you will do before working. Doing it regularly, your subconscious will realize that after it your brain should stay concentrated because there is work to be done. </p>

<p>In order to stay there for a longer time you should isolate all distractions. Put your phone somewhere where it won't disturb you, clean your desk from anything that will distract you, try not to open social medias on the computer either.<p>

<h2 class="my-2">Planning</h2>

<p>Another crucial tip is planning. You can't do much work without a plan.
That's why before starting to do anything you should always make a plan if you want to achieve great results.
There are different ways to do it, you can make a simple todo list for the week, check list or you can just put your tasks into a table. You should find what works for you and  just do it.</p>

<h2 class="my-2">Task arrangement</h2>

<p>You should try to sort your tasks by difficulty, starting from the hardest one. As Mark Twen said "If it’s your job to eat a frog, it’s best to do it first thing in the morning. And if it’s your job to eat two frogs, it’s best to eat the biggest one first." By doing the toughest task first, the rest of the day will be an easier ride for you, else you are more likely to procrastinate it and never do it.</p>

<h2 class="my-2">Sleeping</h2>

<p>You can't do anything valuable without a good sleep. You endure without sleeping for a few day, but your productivity is decreasing because we are humans and we need recharging as everything else in order to do the job well.</p>

<p>These are the key tips and trick that are helping me doing more work in less time. Remember: - <span class="font-italic">"Starting is the hardest thing".</span></p>

<p>What are your habits to stay concentrated, comment bellow?</p>
World of WoqlCraft - Ep.8 Create Game of Thrones Graph within an Hour
Tags: database, graph, tutorial, livecoding
Published: 2020-05-16 20:59:42

---
title: World of WoqlCraft - Ep.8 Create Game of Thrones Graph within an Hour
published: true
description: Inspired by the famous Game of Thrones example of Neo4j, I tried to create the same graph (more or less) with just a script of Python using WOQL and TerminusDB within an hour, I call it speed coding. Did I succeed?
tags: database, graph, tutorial, live coding
---
Inspired by the famous Game of Thrones example of Neo4j, I tried to create the same graph (more or less) with just a script of Python using WOQL and TerminusDB within an hour, I call it speed coding. Did I succeed?

Find the source code from our [tutorial repo](https://github.com/terminusdb/terminus-tutorials).

Join the TerminusDB community at [Discord](https://discord.gg/Gvdqw97)
How to replicate a remote Postgres DB locally
Tags: postgres, database
Published: 2020-05-16 20:12:29

There have been times when I've wanted an exact copy of a database locally. If I'm writing a particularly complex database migration, it's nice to have a clone of a QA environment with sample data.

This is super easy using the [postgres client](https://www.postgresql.org/docs/current/reference-client.html) tools. You can stream the remote database directly into your local one!

**NOTE:** I always start with a fresh database locally to avoid any synchronization errors.

```bash
#!/bin/bash
set -eo pipefail
IFS=$'\n\t'

USER=postgres
HOST=localhost
PORT=5432
DB=postgres

REMOTE_DATABASE_URL=postgres://user:pass@host:port

dropdb -U $USER -h $HOST -p $PORT $DB
createdb -U $USER -h $HOST -p $PORT $DB
pg_dump --verbose --clean --no-acl --no-owner --if-exists $REMOTE_DATABASE_URL | psql 
--set ON_ERROR_STOP=on $DB -h $HOST -p $PORT -U $USER

echo "CATS: ALL YOUR *DATABASE* ARE BELONG TO US"
```

Now you can test your migrations over and over, resetting as you need, from the remote database!
Breakpoints & Strict Mode
Tags: javascript
Published: 2020-05-16 19:52:21


BREAKPOINTS AND STRICT MODE


Breakpoints are locations where the browser will pause the program, this enables the programmer to know if the error has occurred at that point of the script’s execution.

One can use breakpoints in the Google Chrome browser on a Mac by first right clicking on the page and then going to “Inspect”. On the line of code, to the left, there are three dots. Once clicked, after the options appear, proceed to “Break on” and select from the available options. 

The purpose of using breakpoints when debugging your code is so that you can systematically figure out where the error in your code is. Since the code will only be run until the breakpoint, one can then progressively debug code.  

Strict mode forces JavaScript to strictly apply syntax rules. The use of strict mode enables the script to run faster and more efficiently. It also encourages good programming technique since syntax error will result in load-time or run-time errors.

The way to run strict mode is by inputting the “use strict”;  statement on the first line of the file.
Acquisitions - [May 2020]
Tags: discuss, news, healthydebate
Published: 2020-05-16 19:52:02

I'm sure most of you might be already aware by now, but I recently read about a few articles on investments/mergers/partnerships across the technology world.

1. [Facebook invests $5.7B in India’s Reliance Jio Platforms](https://techcrunch.com/2020/04/21/facebook-reliance-jio)

2. [Facebook to Acquire Giphy in a $400 million deal](https://techcrunch.com/2020/05/15/facebook-to-acquire-giphy-in-a-deal-reportedly-worth-400-million)

3. [Intel is buying urban mobility platform Moovit in a $900M deal](https://techcrunch.com/2020/05/04/confirmed-intel-is-buying-urban-mobility-platform-moovit-in-a-900m-deal)

4. [Intel also investing $132 million in 11 startups](https://techcrunch.com/2020/05/12/intel-has-invested-132m-in-11-startups-this-year-on-track-for-300m-500m-in-total)

This is now becoming a routine trend but it'd be noteworthy to observe how these acquisitions pan out in a world that has been shaken to its very foundations. To understand more about this, I have the following questions for the Dev.to community:

----

- Which of these 2 sides would benefit from such acquisitions & why?
- How is it sustainable in a post-Covid era full of drastic changes?
[Series] JS Tips & Tricks - Ep. 2
Tags: javascript, webdev
Published: 2020-05-16 19:35:55


## Part 2

In part 2 of this series, we look at creating UUIDs, how to reverse all the characters in a string, and how to capitalize the first letter of a string parameter.



### **Snippet 4 - Create UUID for the browser**
To create a UUID (``Universally Unique Identifier``) we make use of the built-in Node-module crypto. The function beneath will create a UUID that is compliant with ``RFC4122 ``.

```javascript
function createUUIDInBrowser() {
  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
    (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
  );
}
```


### **Snippet 5 - Reverse the characters in a string**
The next snippet is reversing all the characters that are passed in the ``str`` parameter. A parameter value of ``Dev.to`` will return ``ot.veD`` after calling the function.

```javascript
function reverseString(str) {
  return [...str].reverse().join("");
}
```


### **Snippet 6 - Capitalize the first letter of a string**
The following Javascript snippet will return the input string with the first character capitalized. You can pass a second variable to the function ``lowerCaseRestOfString``, but this is not required (variable is default false)
The secondary variable will lowercase the rest of the the inputted string
```javascript
function capitalizeFirstLetterOfString([firstChar, ...restOfChars], lowerCaseRestOfString = false) {
  return first.toUpperCase() + (lowerRest ? rest.join("").toLowerCase() : rest.join(""));
}
```
# Template Literals in javascript
Tags: node, javascript, npm, typescript
Published: 2020-05-16 19:10:38

In a javascript, there was a different way of writing a string. the most common method is to use single and double quotes, for example
<pre>
'String by a single quote'
         and 
"String by a double quote"
</pre>
There was one more way through that you can write a string and that is backticks(`)
<pre>
`String by a backtick`
</pre>
Now why we should use this, the answer is With that syntax, you can dynamically add data into a string like this:
<pre>
const city= "Pune";
const country = "India";
console.log(`My current city is ${city} and which is located in ${country});

final result:- My current city is Pune and which is located in India
</pre>
There was an "old" way of concatenating strings:
<pre>
"My current city is "+city+" and which is located in "+country
</pre>
Help me get started with my MacBook pro
Tags: apple, macbookpro, tools
Published: 2020-05-16 19:07:21

10 year user of just Windows. 
I bootstrap my machine with chocolatey, user powershell extensively, and hate doing things manually.


What I do: docker, AWS, SQL server, powershell, azure devops, devops stuff. I'm experienced in bootstrapping stuff for windows and all but gonna have to get in the groove for Mac. Prefer when possible to approach tooling and all for cross platform  capability (learning go ) but not fully required.


I've seen great GitHub ansible projects for MacBook, but want to start a thread to get your insight and tips.
- any issues with docker I need to resolve
- I know I need brew. Anything else equivalent in addition?
- I want to set my default prompt to fish with starship or Oh My Zsh if a good reason. Starship works in powershell and bash so would keep things similar as I jump between them.
- any equivalent to "Everything" that provides instant search across all files from command pallet? I don't want to spend much.
- don't plan on dual booting. Do I really need parallels? Again trying to avoid extra licenses for apps I won't use routinely. Virtual box is fine?
- I don't want to use ssh for git. Do I use osx keychain or whatever they call it?
- best shortcut remapper so it's a bit closer to windows behavior?
- tool to bind shortcut to open specific app globally?