teleren/devto huggingface dataset:
TwilioHackathon - DevicePolice Available Now! 
Tags: twiliohackathon, react, node, showdev
Published: 2020-04-13 18:41:56



## What I built

DevicePolice is a small tool that helps you curve your habit of spending too much time on your device. As a result of COVID-19 and the quarantine, more people are staying at home and consequently spending more time on their device. However, staying at home doesn't mean you have to give up all activities. There are plenty of things that you can do in the comfort of your own home.

## How it works

1. A user sign ups for an account using their phone number.
2. They get transported to a dashboard or pieces of one at least 😰 
3. They set a timer. How many hours, minutes, or seconds they want
4. Request is sent to Node and Express server.
5. The server starts a timer independent of what state the client is in => you can close the browser or refresh the page and the timer is still running. 
6. When the timer is over, you get a text message to your phone reminding you to get off your device! It also includes a recommendation for something else you can do :smile:

Note: there is also a feature to **delete** your account if you no longer want to use it. We don't keep any of your information (phone number, etc...) after you delete your account 👍



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

## Demo Link
 
Check it out!
[Device Police](https://dreamy-easley-c0f78a.netlify.com/) 

## Link to Code

[frontend](https://github.com/htnguy/device-police-frontend)
If you just want to try it out locally: 
```bash
git clone https://github.com/htnguy/device-police-frontend.git
```
[backend](https://github.com/htnguy/device-police-backend)
```bash
git clone https://github.com/htnguy/device-police-backend
```

## How I built it

### Backend

- NodeJS - server runtime for JS
- Express - web framework
- Mongoose - ODM that makes working with MongoDB feel like heaven
- MongoDB - database for storing users, verification tokens, etc...
- Twilio Node Helper - The whole point of this hackathon => Makes interacting with Twilio SMS API much easier. 
- JSONWebTokens - authentication
- Bored API - getting a random activity that you can do instead of being on your device.

### Frontend
- React - the wonderful UI library that we all know and love. 
- Gatsby - Awesome static site generator
- Axios - making API Request from client

## Deployments

Backend - Heroku (it is free and super easy to deploy your node app)
Frontend - Netlify - great hosting for Gatsby and React app.

Both of these have continuous integration with Github => push new changes => redeploy app :smile: 

## Walls that I bumped into

- Coming up with an idea - This part was the most difficult aspect about this project. I was so conscious of what other people have done, so that this project doesn't seem redundant. 
- Authentication - this app does not store any emails or other credentials besides your phone number and a password, So coming up with a reliable and secure way of authenticating a user was one of the top priorities.


### Let me know how I can make it better 💡
Depois do Café - Episodio 7 - Trabalhando em Ambientes Internacionais
Tags: podcast, ambientesinternacionais, portugues
Published: 2020-04-13 20:02:59

---
title: Depois do Café - Episodio 7 - Trabalhando em Ambientes Internacionais
published: true
description: Nesse episódio pocket edition a gente fala sobre a nossa experiência de trabalhar em um ambientes internacionais, nós comentamos como foi começar a trabalhar em Inglês e com pessoas de outras nacionalidades, além de brasileiros. 
tags: podcast, ambientes-internacionais, portugues
---

{% spotify spotify:episode:1Loh4oPJdB0WjWiV1732qf %}

Você também pode ouvir no seu aplicativo preferido: [iTunes](https://podcasts.apple.com/br/podcast/depois-do-caf%C3%A9-com-airton-zanon/id1480842641), [Breaker](https://www.breaker.audio/depois-do-cafe-com-airton-zanon), [Google Podcasts](https://www.google.com/podcasts?feed=aHR0cHM6Ly9hbmNob3IuZm0vcy9lMGU0MDU4L3BvZGNhc3QvcnNz), [Overcast](https://overcast.fm/itunes1480842641/depois-do-caf-com-airton-zanon), [Pocket Casts](https://pca.st/bpyo3i4y), [Radio Public](https://radiopublic.com/depois-do-caf-com-airton-zanon-6r2oLq), [Spotify](https://open.spotify.com/show/4cqX5o40bClwqtYHv9X7Lp)

Nesse episódio a gente fala sobre a nossa experiência de trabalhar em um ambiente internacional aqui na Holanda, nós comentamos como foi começar a trabalhar em Inglês e com pessoas de outras nacionalidades, além de brasileiros.

Este foi um episódio da Série Pocket Edition, na qual vamos lançar um episódio menor que o normal toda semana, durante este lockdown, para comentar o que estamos fazendo depois do café.

----------------------

Participantes:

Airton Zanon - [@airtonzanon](https://twitter.com/airtonzanon) (twitter)
Elisa Pedrosa Reis - [@liisapedrosa](https://twitter.com/liisapedrosa) (twitter)

----------------

Links comentados:

Canal do youtube do Gavin: https://www.youtube.com/channel/UCskEPRzGlsYHs_a5SJyCXag
Canal Slack de Brasileiros Expatriados: https://join.slack.com/t/brazil-tech-expats/shared_invite/zt-975uiifq-CxUOV4cdyMgG9~bF5mCvHg

----------------

 Para mais episodios e saber mais sobre o podcast acesse https://anchor.fm/depoisdocafe.

Siga-nos no twitter [@dpsdocafe](https://twitter.com/dpsdocafe)
April 25 — Daily CodeNewbie Check-in Thread
Tags: codenewbie, checkin, beginners, discuss
Published: 2020-04-25 12:00:22

---
title: April 25 — Daily CodeNewbie Check-in Thread
published: true
description: A daily thread to ask questions, share progress, and stay accountable!
tags: codenewbie, checkin, beginners, discuss
series: Daily Checkin
---

You are encouraged to use this daily thread to:
- Ask for help (all questions encouraged)
- Explore topics you’re curious about
- Share something you’ve written or read
- Celebrate your wins
- Stay accountable to your goals
- Support your fellow programmers

Happy Coding!

---

_Interested in joining the twice-weekly live [#CodeNewbie Twitter chats](https://twitter.com/search?q=codenewbie)?  You can find us [on Twitter](https://twitter.com/search?q=codenewbie) each Wednesday at 9pm ET (1am GMT on Thursday) and Sunday at 2pm ET (6pm GMT)!_
Readable code
Published: 2020-04-13 22:54:13



Programmers play a big role in creating an interactive interface that can be used to bring about the real outcome of every activity that human beings are involved in. In each case, there are specific codes that are used to ensure that the program suits the targeted purpose which varies from one app or website to another according to their needs. Changes in the system may result in the need for adjustments to the existing program.


Every developer should strive to write code that is flexible to changes as a way of improving its purpose to the user. Since the program is involved in the day to day interactions with the world, a change in the world dictates a similar change to programs so that they can be applied to increase efficiency. Once another developer is contracted, the developer can have a difficult time while trying to understand the codes used by the original programmer. Hence, there is a need for developers to write readable codes that is easier for other developers to understand.

**Try figuring out this code:**
![bad code](https://miro.medium.com/max/1400/1*waghFCxAfEwyQIDP9qGOeA.png)

Moreover, the original developer may even forget the codes used with time and hence be unable to make changes when need be. As a result, the changes needed may not be effectively be made. To ensure that consistency and flexibility of programs to changing the nature of the world, there is a need to have a readable code that every developer can interpret. 

Example of an organized code block
![good code](https://cdn-media-1.freecodecamp.org/images/jaJg1ODAb7FcbQbWaQ8FwegEmTD4IsTtx7Of)

Below are some common practices to consider when writing codes.

**Commenting**: Writing comments in your code helps other developers to be able to point out what each code block or function does and that enables them to easily navigate to which targeted part to be updated or fixing of bugs. 

**Naming Scheme**: Naming functions and variables based on their purpose is an effective way to tell developers the purpose of each function in the code. The use of a camel case is a great way for naming functions and their purpose. For instance, function sayHi() will be a self-explained function that greets a user.

**Indentation**: Proper indentation helps organize codes in many ways, making codes more readable by showing where lines of code end.

**DRY Principle**. Don't Repeat Yourself. The DRY principle encourages developers to organize their code to make it reusable instead of repeating the same code over and over.


There are many other ways to write readable codes other than the four mentioned above.
Readable codes are easy to interpret and hence changes can be easily be adjusted. New developers need to consider the use of readable codes in their programs since they are more convenient to work with.
A Faster Way to Track Down Bugs
Tags: github, git, productivity, tutorial
Published: 2020-04-14 02:41:18

*Most of my time working as a software engineer is spent tracking down and fixing bugs. While a good portion of the bugs are my own doing, some of the bugs were created by other engineers, which makes the task more ambiguous. As the codebase grows, finding bugs becomes increasingly difficult. It's a time sink and super boring to manually click through every suspicious commit to find the culprit. However, you can automate this process by using a tool called git bisect.*


## What is git bisect?

Git bisect is based on a binary search algorithm, but don't worry, you won't need to dust off your old data structure textbooks! Git does all the work of repetitively dividing the commits in half, checking out commits, and helping you identify when new changes were introduced.


## How do you use git bisect?

To let git know you want to start the process run :

git bisect start 

git bisect good < commit’s SHA, tag or branch > 

git bisect bad < commit’s SHA, tag or branch > 


Git will checkout a commit between the two commits you provided. It will ask you to determine if that commit is good or bad, so play around with that copy of your code and see if the bug still exists. If it still exists, run git bisect bad again. Git will continue to narrow down the commits until you find the culprit -- allowing an easier process of elimination. Using this, I realize I had the advantage of expending less brain power on finding the bug and more brainpower on fixing it.


## Did you find the bug?

If so, run: 

git bisect reset

This will tell git to stop bisecting. Then you can check out the offending commit, and start refactoring. 

 

*Warning: For this to work well, you will need a linear commit history.*

Without a linear commit history, the history wouldn't show a true reflection of when code changes were made. To achieve a linear history, utilize git rebase and git squash and merge. 


Comment below to tell me if it worked for you!

I originally wrote this post on https://www.blackgirlbytes.com/
Invonto Announces $5M Program for Businesses Affected by Coronavirus
Published: 2020-04-14 17:15:49

At Invonto, we are closely monitoring COVID-19 developments. The health and safety of our employees and customers are our top priority. Since March 16th, we have been operating virtually and will continue to do so until it is safe to operate normally.

We understand the impact the current crisis is having on small and medium-sized businesses across the USA. Many businesses are finding it difficult to stay operational and support customers remotely. Without the proper technology infrastructure, we fear many businesses will not be able to stay efficient and retain their customers for long. Conversely, we have seen that companies that have invested in digital solutions have supported themselves and even thrived during this difficult time. We believe that the right technology has the power to help businesses meet customer needs, maintain revenue streams, and support employees. In an effort to support struggling US businesses affected by the crisis, Invonto will be launching a $5 million program to partner with businesses in need of improving their technology solutions.

We are extending our support with several key initiatives:

We will host client applications on our Amazon AWS and Microsoft Azure infrastructure at no cost for one year.

We will provide development and support resources on an hourly basis without requiring any commitments and retainer fees. No project is too small.

We will offer a pay-as-you-go model that includes no down payments. Payments can be deferred up to 60 days from the initiation of our services.

We will substantially reduce our development and consulting fees for new projects.

We will expand our services to help businesses support and maintain existing systems to ensure they stay operational.

We are using Google Meet, Zoom, and Slack for communication. We also have a suite of solutions required for software design, development, and project collaboration. We are making all of these tools available to our customers so there will be no upfront or additional costs for managing projects.

Interested businesses must meet the following requirements for eligibility:

US-based companies only
Businesses with less than 1000 employees

We are not healthcare professionals. We cannot be on the frontlines against the Coronavirus. However, we don’t want to stay on the sidelines either. We still want to do our part.

By taking these measures, we hope to help companies meet their current technology needs and prepare their business for accelerated growth when the current crisis ends. In addition to our $5 million program, we are also talking with biotech and pharmaceutical companies researching solutions for Coronavirus and offering our technical assistance.

If you know someone who has a project in mind, please [fill out this contact form](https://www.invonto.com/insights/covid19-support-initiatives/). If you have any questions, please feel free to contact us at any time.

Stay safe and healthy!
TDD by Example: Part 1: The Money Example
Tags: tdd, kentbeck
Published: 2020-04-14 17:32:11




## Summary

Beck opens this part of the book giving a summary of what to expect. He lays out the rhythm of TDD and what the reader will find surprising. There isn't much to summarize here so I'll just quote him.

> 1. Quickly add a test.
> 2. Run all tests and see the new one fail.
> 3. Make a little change.
> 4. Run all tests and see them all succeed.
> 5. Refactor to remove duplication.


> The surprises are likely to include
>  - How each test can cover a small increment of functionality
>  - How small and ugly the changes can be to make the new tests run
> - How often the tests are run
>  - How many teensy-weensy steps make up the refactorings

## Commentary
These seem simple enough and self explanatory. I didn't think I would have any thoughts other than, "Let's start!". But then I remembered how often I've tried to add a test and had no idea what to do. 

I don't see:
0. How to know what test to write

I think step 0 could be the most important. It would help answer not just what the next test is but how many there are and what they cover. It might help answer what kind of test to write. Which would probably be lead to: 

-1. The many kinds of tests and what they cover.

But it's likely that those two steps would require a different book.
E2 - Creating the Web Form
Tags: html, tutorial, php
Published: 2020-04-14 18:37:00

Open your index.php file (see Create project folder) and follow these steps:

1.&nbsp;Add an HTML html element and a body inside it.
```html
<html><body></body></html>
```

2.&nbsp;Add an HTML form element inside the body with blank action and method attributes (we’ll set them later).
```html
<form action="" method=""></form>
```

3.&nbsp;Add an HTML div element inside the form and add a label and an input element inside it for the first name field.
```html
<div> <label>First Name:</label> <input name="first_name"> </div>
```

4.&nbsp;Repeat step 3 for the last name field.

5.&nbsp;Add an HTML button element inside the form with inner text: submit.
```html
<button>Submit</button>
```

6.&nbsp;Try running the code. Notice it does nothing when submitted as the action and method aren’t set. Set the action to "process_my_form.php" and the method to "get" so we can process it in the next stage.

The final code should look something like this:
```html
<html><body><form action="process_my_form.php" method="get">
    <div> <label>First Name:</label> <input name="first_name"> </div>
    <div> <label>Last Name:</label> <input name="last_name"> </div>
    <button>Submit</button>
</form></body></html>
```

Parent topic: [Example 2](https://dev.to/herobank110/example-2-saving-data-from-a-form-4g33)
E4 - Using PHP Debugging Tools in Visual Studio Code
Tags: php, vscode, tutorial
Published: 2020-04-14 19:11:41

If you have not already setup XDebug in Visual Studio Code, please refer to the earlier stage, [Setting up PHP debugging in Visual Studio Code](https://dev.to/herobank110/additional-setup-43ko#php-debug). This post assumes you have XDebug installed and the launch configuration is created.


1.&nbsp;Copy this code into a file `index.php` as a starting point.
```php
<?php
function makeMessage($name, $age)
{
    // Make the name have a capital first letter
    $first = strtoupper($name[0]);
    // Make the rest have small letters.
    $end = strtolower(substr($name, 1));
    // Save the two parts in the name variable.
    $name = $first . $end;


    // Ensure the age is in the valid range.
    assert(0 < $age && $age < 1000, "age must be between 1 and 999");


    // Return the final message.
    return "$name is $age years old!";
}


$message = makeMessage("david", 99);
echo $message;

?>
```

2.&nbsp;Click on line 18 where $message is set and add a breakpoint from Run > Toggle Breakpoint (hotkey <kbd>F9</kbd>).&nbsp;A red circle will appear on the left side of it.
   ![setting a breakpoint](https://dev-to-uploads.s3.amazonaws.com/i/9xfi1tgu931z68ylslgw.png)

3.&nbsp;Start debugging on the Run tab by clicking Run (hotkey <kbd>F5</kbd>) in Listen for XDebug mode.
   ![run tab](https://dev-to-uploads.s3.amazonaws.com/i/0kn0narie1j6822vvv5i.png)

4.&nbsp;Open this page in your browser (make sure Apache is started.) You should see the browser will not show anything and the Visual Studio Code window will gain focus.
   ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/etjncnjqws8va4kazh7y.png)

5.&nbsp;Use the step into button to investigate inside the `makeMessage()` function.
   ![step into button](https://dev-to-uploads.s3.amazonaws.com/i/veayog8351p3568ehqqp.png)

6.&nbsp;Use the step over button for a few lines.&nbsp;You will see the state of local variables in the Run tab when they are assigned values.
   ![step over button](https://dev-to-uploads.s3.amazonaws.com/i/1j0huzuctymmoosgj14v.png)
   ![variables in run tab](https://dev-to-uploads.s3.amazonaws.com/i/cvbu12v040yn7xhldok9.png)

7.&nbsp;Enter a debug command in the Debug tab (View > Debug Console) to check the first letter in $name.&nbsp;You can enter any valid expression here.
   ![debug console](https://dev-to-uploads.s3.amazonaws.com/i/odao95ttvu2trv3zrv0q.png)

8.&nbsp;Press Continue to let the execution return to normal speed.
   ![continue execution button](https://dev-to-uploads.s3.amazonaws.com/i/idbfaaicujpv8148feku.png)

9.&nbsp;When you return to the browser, you will see that the output is ‘David is 99 years old!’

Parent topic: [Example 4](https://dev.to/herobank110/example-4-debugging-php-in-visual-studio-code-407p)
Drafts and scheduled publishing
Tags: 11ty
Published: 2020-04-14 20:19:29

A nice feature I had in Jekyll was drafts and the option to schedule publishing of content.

In Jekyll you placed drafts in a separate folder called `_drafts` and when you built the site with the flag `--drafts` they where included.

I have gone a different way in my Eleventy site, and keep the drafts in the same folder (`_posts`) as the published content. To mark something as draft I add it to the front matter: `draft: true`.
Combined with that I have the following functions in `.elevent.js`.

These functions do things based on environment, you can read how to add environment variables to Eleventy in [this other post I wrote](https://andeers.com/2019/03/eleventy-essentials/ "Eleventy Essentials on Andeers.com").

``` js
const drafts = (item) => {
  if (!eleventyVars.development && item.data.draft) {
    // If not development, and draft is true, skip it.
    return false
  }
  // Return everything by default.
  return true;
};
```
This function is used as a array filter callback to skip the drafts if the current environment is not development.

## Scheduled publishing

For scheduling content I do a similar approach, I check the defined date vs the current date, and skip the item in production if it's in the future.

``` js
const future = (item) => {
  // If item date is before now it's safe to publish it.
  if (item.date <= now) {
    return true;
  }

  // If it's in the future we can publish it in development.
  if (eleventyVars.development) {
    return true;
  }

  // In future and not development, skip it.
  return false;
};
```

The scheduling check only works when the site is deployed/built. So I have used ifttt.com to automatically rebuild my website hosted on netlify.com each night.

## The complete solution

I have all of this in a helper function I use to generate the collection.

``` js
function getPosts(collectionApi) {
  const globs = [
    './_posts/*',
  ];
  const now = new Date();

  const drafts = (item) => {
    // See function above.
  };
  const future = (item) => {
    // See function above.
  };

  return collectionApi.getFilteredByGlob(globs)
    .filter(item => !!item.data.permalink)
    .filter(drafts)
    .filter(future)
    .reverse();
}
```
It's important that you add these checks to all collections you output, so your drafts are not published on the archive page or in the rss feed.

If you want to look at my whole code you can [check it out on Github](https://github.com/andeersg/andeers.com/blob/master/.eleventy.js "Andeers.com on Github").

## Possible changes

If you want to keep the drafts in a separate folder the `getPosts` function could be changed to include the drafts folder in the globs-array instead of checking the draft variable. I'm considering doing this my self.