teleren/devto huggingface dataset:
Day 139 : One Week
Tags: hiphop, code, coding, lifelongdev
Published: 2020-05-15 23:51:02

_liner notes_:
- Professional : Wooo I was tired when I got up. haha. Had a team meeting. Found out that the demo I've been working on will be shown to other businesses. Pretty cool to see that the demo is running good enough that they want to show it to prospective customers. Had a going away party for the person who created the team that I joined. He's going on to work with a new start-up. That's the kind of thing he likes, so I'm sad to see him go, but happy he's going to be building something new. Super grateful to the work he and everyone has put into the team. Got to check out some suggested changes our education team did on my blog post. Good to see how other people view what I wrote to see what they take from it. I want to make sure I get what I'm trying to say across properly. Did some coding, but not as much as I would like.

- Personal : Last night, I went through tracks for radio show and then basically fell asleep.

![Two trees with very long branches with green leaves that almost cover the whole image with the sun peeking through the back](https://dev-to-uploads.s3.amazonaws.com/i/k51tgybp1tiroj3k8pdx.png)

So, I'm off for one week and will probably not post to the blog. Going to my parent's place so they can help me put windows into my van. Hopefully that goes well otherwise I'll have some large holes in the sides. haha. Also want to get a lot of code done for a side project next week. I'm out! Going to get ready for tomorrow's radio show.

Have a great night, weekend and week!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube WBsg3kjHj3c %}
My most important bash script
Tags: bash, scripting, linux, productivity
Published: 2020-05-15 23:46:07

---
title: My most important bash script
published: true
description: One bash script to rule them all
tags: bash, scripting, linux, productivity
---

> If you want to do something, make it easy to do.

Applying this principle has allowed me to increase my productivity over time while protecting me from drudgery. Since I spend a lot of time in terminals, a simple example of this is defining appropriate aliases for commands I use a lot, so I don't need to type so much. Sometimes though, an alias doesn't cut it, and I need to write a small script.

Historically, I would cd into a directory on my path, open up a file, write the shebang line, write the script, save it, make it executable, test it, and go back to whatever I was doing. However, since I was always doing those same steps, it made sense to write a script to help me write scripts faster. Here it is :

```
BIN_PATH="$HOME/bin/"
SCRIPT_NAME="$1"
SCRIPT_PATH="$BIN_PATH$SCRIPT_NAME"

if [ ! -s "$SCRIPT_PATH" ]; then
    echo "#!/bin/bash
" > "$SCRIPT_PATH"
    chmod u+x "$SCRIPT_PATH"
fi

vim "+${2-2}" "$SCRIPT_PATH"
```

I call it `scr`, as in `script`. Say I want to write a new script called foo. All I have to do is type `scr foo` in a terminal, write the body of the script, save, and I'm done. The next time I want to edit the script, I once again type `scr foo`, do whatever changes I need to do, save, and I'm done. Since this significantly decreases the effort needed to write scripts, it has allowed me to write more scripts to take care of a variety of tasks I perform often.

I hope this small script, or even the philosophy that inspired it, can be of some use to you.
Ruby - reference and foreign keys
Tags: reference, ruby, foreignkey
Published: 2020-05-15 23:45:41

There are several ways to add foreign key into our Ruby models. I have tried some of them. Some have been working fine but there are always cases where it does not work and I don't know why. However, I have found a way to add the foreign key that always work perfectly.

Let's say, for my model, a user has many playlists, and a playlist belongs to one user. This is the command that I should be running in the terminal:
```rails g migration AddUserRefToPlaylist user:references```

That's it. Happy coding.
Dev and Designers Clashing
Tags: discuss, watercooler
Published: 2020-05-15 23:45:06

_cover image courtesy of [unDraw.co](https://undraw.co/)_

In which situations have you seen Devs and Designers clash? We both speak different languages, so it's understandable how this may happen.

I think empathy and respect are very important. I've heard comments from the dev community talking down on design work as if it were the least important part of the project.

What do you do to ensure developers and designers maintain a good relationship?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g4gcbjgag0u741pqsn0m.png)
_courtesy for [blackillustrations.com](https://www.blackillustrations.com/)_
What are favorite features of MongoDB?
Tags: mongodb, webdev
Published: 2020-05-15 23:28:13

---
title: What are favorite features of MongoDB?
published: true
description: I'm curious what everyone's most and least favorite features of MongoDB are.
tags: mongodb, webdev
---

Hey y'all! 👋

If you use MongoDB, for work or side-projects, what are your favorite features? What makes it worth using, for you?

Likewise, what are you least favorite features? What's a real pain in your backside?

I'm curious how other folks experiences have been!

Cheers!
simple age calc using python
Tags: python
Published: 2020-05-15 23:25:47

hello, today we will make a simple age calc using python 
first we will print a statement that includes "welcome to age calc"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/brcg2yuuwg6afn91k6rw.png)
second, we will make a variable called x and assign it to an input function "please enter your birth year :\n" an convert the type of input to integer
!NOTE!:\n for making a new line 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h3iypu2tlujq4mmjzb9z.png)
After that we will define a function and call it calc by using :def calc(x=x,y=2020)
after that we will return y-x
and call the function in print statement
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d63qvqsiwtc3zntcmwas.png)
thanks for reading , peace.
Angular Documentation (Fast)
Tags: angular
Published: 2020-05-15 23:20:30

Do you want an API for your project?

```
  // don't tarry, just install this.
  npm install -g @compodoc/compodoc
  compodoc -p src/tsconfig.app.json -s
```

Take a look at this:
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uxbe84k2pq5se5b7jx98.gif)

I was astounded at how quickly our entire project was documented in an API format.

**[Compodoc](https://compodoc.app/)** is for Angular. It takes 2 minutues to install and 2 minutes to serve up the example shown above.

[Here's a live example](https://javaman2.github.io/)

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

JWP 2020
How to improve your workflow? 🐱‍🏍
Tags: webdev, design, management
Published: 2020-05-15 23:11:26

###Hello everyone! 🤗
I had a little break with Dev.to blogging. I just felt like I needed to take one just for my sake with school and everything. Today I prepared a post that I think will help you a lot with improving your workflow. In the next part you will be able to find some tips and tricks in which I tried to explain my view on workflow improvements.


### 🤯 Sketching out your problem
A lot of people just go out and start programming without taking some time to define their problem. Defining a problem and taking some time to sketch it out will spark up your problem-solving mechanism which everyone has but just has to use it in the right way. I suggest taking a pen and paper to manually write out your ideas. I personally get a lot more creative when I'm with my pen and paper, rather than on my PC or laptop. 

![alt text](https://i.imgur.com/Tp2mST2.jpg "Solving")

### 🧐 Keeping track of progress
Keeping track of your progress while coding something will most definitely improve your workflow. I learned this while I was getting into some more intense projects in which I simply had to keep track of my progress so I simply don't forget something. There is a lot of platforms that help you a lot, but I personally use [Trello](trello.com) which saved me a lot when I was working alongside my designer. You can create a board and add a lot of lists like to-do, completed, tested. Also using Trello improves your SCRUM abilities when it comes to adapting to that sort of mechanism.

![alt text](https://i.imgur.com/FTcMDpK.jpg
 "Trello")

### 🐱‍💻 Writing reusable code
Writing reusable code is really important when dealing with complex projects. You must learn how to evaluate when you need to create functions that you will use multiple times in your project. In return that function will save you a lot of time that you would have spent on searching that same piece of code all over again. One more thing that you should note that really improves my speed and lowers my stress is simply writing really clean and cool looking code.

![alt text](https://i.imgur.com/WZwTTT4.jpg
 "Reusable")

### 🤖 Using every resource available
You should think about researching resources that you might find useful in your stack and use it. Using extensions is also one of the most important things I would state here. I highly suggest using Emmet Code Snippets. They help you learn syntax easier and simply cut down your writing time and plus it makes you feel like a boss.

![alt text](https://i.imgur.com/ZNJeq38.jpg
 "Resource")

### 👋 End statement
This would be the end of this post. I hope you enjoyed reading this and I hope that I helped someone with things they didn't know or just needed to expand their knowledge. I will try to continue making interesting content which goal will be to help you out in an entertaining way.
How to Create a Simple Blog in 4 Minutes
Tags: gatsby, github, netlify
Published: 2020-05-17 19:09:30

---
title: How to Create a Simple Blog in 4 Minutes
published: true
date: 2020-05-15 22:28:10 UTC
tags: gatsby, GitHub, netlify
canonical_url: https://codeisbae.com/create-blog/
---

### Prerequisites

- GitHub account
- Netlify account

## Getting Started

{% youtube dEga2O1JUQo %}

Creating a blog to share your ideas with the rest of the world might sound like fun at first, but you might be wondering how to actually do it. With free resources available via platforms such as Gatsby, GitHub and Netlify, you can create, host and deploy your blog in just a few minutes.

#### How To:

- Search for `gatsby blog starter` on Google, or simply use the following direct link - [https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog](https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog).
- Click on the Netlify button at the bottom of the image preview:
![Netlify button](https://www.codeisbae.com/static/bab7521a2a0895b79aefde9d623c5e05/6a03e/netlify.png)
- You will be redirected to Netlify site, click on the `Connect to GitHub` button to authenticate via GitHub and give Netlify the permissions needed to create a public repository where your blog will be hosted.
- Change the repository name as desired and click on the `Save & Deploy` button.
- After the blog is created by Netlify, you can visit it using the generated link.

Pro-Tip: You can personalise the generic website name generated by Netlify by changing it under `Site settings` on your Netlify profile or purchase a custom domain and use that if desired.

If you could this post helpful, go ahead to share it! Your feedback is highly welcome.
Goodbye World
Published: 2020-05-15 22:07:49

As you can tell by the title of this article. Our studio is closing up shop. Wooden H Studio is canceling our unnamed Spyro clone and disbanding our studio for several reasons.

Due to unforeseen circumstances regarding the COVID-19 pandemic, Wooden H Studio has decided to disband. We have lost several key team members on our team and the project can no longer continue with our original vision. The remaining team members decided that it is no longer in our best interest to continue to move forward with this project.

#### A Word from the Former Development Lead
"I just want to say I am honored to have led such a talented team of developers. Although we are going our separate ways now I will still remember you all as my teammates. It was fun while it lasted." 
\- Joseph Whittington (Former Development Lead)

#### A Word from the Former Art Director
"I had an awesome time working on this project with the team. We didn’t end up reaching our goal, but it was a great learning experience that I’m very thankful I got to be a part of. I hope to see everyone who worked on the project go on to do great things in their careers!"
\- Ashton Ritzel (Former Art Director)

Goodbye from all of us at Wooden H Studio
Angular 9 + Material + Transloco + Jest + Compodoc
Published: 2020-05-15 21:58:50

[![default](https://user-images.githubusercontent.com/7531596/81993396-d5142b00-9645-11ea-995f-98342b7d5c8f.png)](https://github.com/wlucha/angular-starter)  
# Angular 9 + Material + Transloco + Jest + Compodoc
Angular 9 Starter project with Material, Transloco, Jest &amp; Compodoc  
by [@wlucha](https://github.com/wlucha)

https://github.com/wlucha/angular-starter
Imersão CSS Aula 3 - Resultado
Tags: html, css
Published: 2020-05-15 21:56:40

A **Alura** estava disponibilizando um curso gratuito de HTML e CSS esses dias, explicando o básico para colocar um site no ar. O curso é bem explicado e as instrutoras sabem passar bem o conteúdo, sendo de fácil entendimento para todos.

Eu comecei o curso, mas não me passou pela cabeça compartilhar os resultados conseguidos até agora, então irei comparar com uma versão anterior recente. Do primeiro modelo até agora muita coisa mudou, por isso fico triste por não trazer os primeiros aqui. Mas, irei compartilhar os modelos daqui para frente.

No modelo anteriormente postado, as cores estavam bem esquisitas e difíceis de ler, pois o *background* que coloquei é uma imagem com cores fortes, sendo difícil encontrar uma cor de texto que equilibre com todo aquele fundo. Acabei resolvendo isso sem querer, quando comecei a brincar com a transparência da *section* "projetos". A versão anterior ficou com o topo diferente da *section* "projetos", então não ficou muito bonito.

![Primeira versão do topo do site](https://i.imgur.com/zJ82Sd2.png)
<figcaption>Primeira versão do topo do site</figcaption>

![Primeira versão da section projetos do site](https://i.imgur.com/eTkfh1n.png)
<figcaption>Primeira versão da section "projetos" do site</figcaption>

Na versão atual do site, eu estendi o *background* transparente da *section* "projetos" para o site todo. Para isso, criei uma *div* com *class* "fundo" para cobrir todo o *body* do HTML. Com isso, consegui "escurecer" um pouco a transparência do *background*, possibilitando clarear todo o texto do site, deixando-o com melhor facilidade de leitura. Também criei uma *section* "estudos", para compartilhar o que tenho no currículo.

![Segunda versão do topo do site](https://i.imgur.com/kdCUEnY.png)
<figcaption>Segunda versão do topo do site</figcaption>

![Segunda versão da section projetos do site](https://i.imgur.com/aQ6kgWP.png)
<figcaption>Segunda versão da section "projetos" do site</figcaption>

![Primeira versão da section estudos do site](https://i.imgur.com/9wZRHTn.png)
<figcaption>Primeira versão da section "estudos" do site</figcaption>

Por enquanto as mudanças foram essas! Quando eu fizer mais alguma alteração significante, voltarei aqui para postar. Para ver os códigos utilizados, cliquem no link abaixo. Lá estão os códigos desde a primeira versão do site. Até um próximo post!

{% github HiratsukaMi/imersaoCSS %}
useProgressiveLoading
Tags: react, typescript
Published: 2020-05-15 21:45:09


If you've ever worked with a slow moving API that you just can't work around, you've probably written something along these lines already. I thought it would be handy to have this as a hook, to drop into loading components and not have to rewrite the same piece of logic umpteen times.

There are definitely better UX patterns than this, and I am in no way advocating this as a good practice for loading behaviour, but sometimes you can't avoid unsavoury bits of UI like this.

```TSX
const text = useProgressiveLoading([3, 10, 15], ['Loading your profile is taking a litle longer than normal, please wait',
    'Still loading, please wait a while longer...',
    'Still loading your profile, thank you for your patience...']);

return (
  ...
  <LoadingText>{text}</LoadingText>
  ...
)
```

The hook takes two parameters, the first is an array of times in seconds, the second is an array of strings. The principle is really simple, the hook creates a timeout for each timing passed, and will update the `text` value each time the timeout fires. The two arrays must be 'balanced' in terms of length, or the hook will throw an error.

```TypeScript
import { useEffect, useState } from 'react';

export const useProgressiveLoading: Function = (
  timings: number[] = [5, 15, 30],
  strings: string[] = [
    'Still loading, please wait...',
    'Still loading, please wait a while longer...',
    'Still loading, thank you for your patience...',
  ]
): string => {
  if (timings.length !== strings.length) {
    throw new Error(
      `You passed ${timings.length} times and ${strings.length} - there should be the same number of each.`
    );
  }
  const [text, setText] = useState<string>('');
  const [timers, setTimers] = useState<number[]>([]);

  useEffect(() => {
    timings.forEach((delay: number, index: number) => {
      const timer: number = window.setTimeout(
        () => setText(strings[index]),
        delay * 1000
      );
      setTimers(oldTimers => [...oldTimers, timer]);
    });
    return () => {
      timers.forEach(timer => window.clearTimeout(timer));
      setText('');
    };
  }, [timings, strings]);

  return text;
};
```

That's all there is to this one, its pretty simple!

You can install this from [npm](https://www.npmjs.com/package/@anthonyhumphreys/hooks) or check out the repo on [GitHub](https://github.com/anthonyhumphreys/hooks)

As always, suggestions, improvements etc all welcome!

This post was for day 4 of my [#100DaysOfCode](https://twitter.com/hashtag/100DaysOfCode) challenge. [Follow me on Twitter](https://twitter.com/aphumphreys) for more.
useTSDX
Tags: react, typescript, npm
Published: 2020-05-15 21:41:13

# Publishing hooks

One of the main outcomes I wanted from building this blog was to maintain a companion library of useful hooks. I'm writing most things in TypeScript these days (yeah I jumped on that hype train pretty hard, and haven't looked back...)

Publishing a custom hook is as easy as publishing a component for react. That being said, I'd never published a library built with TypeScript so wasn't entirely sure what was needed. That's when I remembered [Jared Palmer's](https://twitter.com/jaredpalmer) amazing TSDX CLI, I think I first heard about it on the [SyntaxFM](https://syntax.fm/) podcast.

I simply ran `npx tsdx create hooks`, dropped my code in the `src` directory, modified the github action included and hey presto, I've got a library live.

I'll certainly be making more use of this tool, for libraries and React Components.
useTheme
Tags: react, typescript, reactnative
Published: 2020-05-15 21:37:18

Recently I was working on a React Native project and I was asked to come up with an a dark theme for the app and make that the default, with an option for the user to switch to light theme at any time without having to restart the app (looking at you Microsoft Teams...). In order to do this, and to tidy up the styling of the app in general, I decided to create a theme context for the app. We are using vanilla React Native styling for this project, so I decided to roll my own theme context provider solution.

# Context Provider

For my use case I came up with the following provider:

```typescript
interface IThemeContext {
  theme: Theme;
  activeTheme: Mode;
  setTheme: Function;
}

export default createContext<IThemeContext>({
  theme: lightTheme,
  activeTheme: null,
  setTheme: (mode: Mode) => null
});
```

`theme` being the object representing the currently active theme.

`activeTheme` is an enum, `Mode` which is either `DARK` or `LIGHT`.

`setTheme` calls a setter for a useState hook which drives the value of `theme` based on the current `Mode`.

The code for the actual hook is actually quite simple, and arguably unnecessary, though it avoids me having to repeatedly import and use a context provider, and allows for some future functionality.

```typescript
export default function useTheme() {
  const { theme } = useContext(themeContext);
  return theme;
}
```
useDocumentation - useState callback
Tags: react
Published: 2020-05-15 21:36:16

# useDocumentation

## Setting the scene

Between talks at React Europe Conference I was working on a chat interface in React Native, backed by Amazon Lex. I encountered a fun bug, where the message typed by the user was rendering very briefly, only to be mysteriously whisked away again when the response came back from Lex and the message was supposedly appended to the array of sent and received messages.

![GIF showing the broken behaviour](https://reacthooks.dev/43af337d3e62fff41766b3b8f538494e/fail.gif)

## The broken code

```javascript
const appendMessage = ({ message, from }) => {
  setMessages([...messages, { message, from }]);
  if (from === "me") {
    sendToLex(message);
  }
};
```

For a little context - this function takes an object which contains a message and the sender (either 'me', or 'bot'). If `from` is set to `me` then the `message` is sent to Lex as well as being set in the component's state.

## The fix

Okay, so first thing is to actually _read_ the [documentation](https://reactjs.org/docs/hooks-reference.html#usestate). That doesn't mean opening it and scrolling for a bit, but actually reading it. If I'd done this, i'd have spotted:

> Functional updates
> If the new state is computed using the previous state, you can pass a function to setState. The function will receive the previous value, and return an updated value. Here’s an example of a counter component that uses both forms of `setState`:

Ah. So by simply changing

```javascript
setMessages([...messages, { message, from }]);
```

to

```javascript
setMessages(oldMessages => [...oldMessages, { message, from }]);
```

This now works, producing the following behaviour

![GIF showing the working behaviour](https://reacthooks.dev/01eae0d903645f1a1be07c9e7e427c1a/success.gif)


That's all there is to it. This is analagous to the 'old' way of setting state using:

```javascript
this.setState(oldState => ({ value: oldState.value }));
```

...which I should've really thought about when writing the function in the first place!

## TL;DR

![RTFM XKCD Web Comic](https://imgs.xkcd.com/comics/rtfm.png)
Video: Building a no-code application to text positive news with Parabola, News API, Watson NLU and Twilio
Tags: nocode, tutorial, video, ibmwatson
Published: 2020-05-18 13:23:15

---
title: Video: Building a no-code application to text positive news with Parabola, News API, Watson NLU and Twilio
published: true
date: 2020-05-15 21:35:27 UTC
tags: No Code,Tutorial,Video,Watson
canonical_url: https://maxkatz.org/2020/05/15/video-building-a-no-code-application-to-text-positive-news-with-parabola-news-api-watson-nlu-and-twilio/
---

Earlier I published two blogs posts where I share my experience building a no-code application that texts positive COVID-19 news:

- [Parabola, Watson NLU, News API and Twilio – tools I used to build a nocode application](https://dev.to/maxkatz/parabola-watson-nlu-news-api-and-twilio-tools-i-used-to-build-a-no-code-application-4k3k)
- [Tutorial: building a no-code application to text positive news with Parabola, News API, Watson NLU and Twilio](https://dev.to/maxkatz/tutorial-building-a-no-code-application-to-text-positive-news-with-parabola-news-api-watson-nlu-and-twilio-34ka)

I also recorded a video that shows how I built the application:
{%  youtube 0gBu5jfWP9E %}
Hope you will find it useful. Let me know if you have any question.