teleren/devto huggingface dataset:
Day 26 : Situated
Tags: hiphop, code, coding, lifelongdev
Published: 2019-11-05 05:03:13

_liner notes_:
- Saturday : Had a good time doing the radio show. You can check it out here: kNOwBETTERHIPHOP.com .

![John Witherspoon sitting in a wicker chair](https://thepracticaldev.s3.amazonaws.com/i/wccxi0y76lhq6v620cg5.jpg)

- Sunday : So the time shift happened and I think that messed me up! haha I just couldn't really get up to do anything till later in the day. I went over to my folks place to look for some materials to using in something I'm making. Watched some anime and did a little research, studying and coding.

- Professional : Today was another rough one. Started my day of setting up a return of something I bought that was defective. My trial period on my code editor was up and I'm supposed to be getting my license soon. Glitch was down for most of the day. Basically did some research for what I wanted to work on for the week. Also, set up my 401K, I think. haha.

- Personal : After work, I headed out to the Orlando Devs meetup. Found out this morning that they wanted me to stream the event. Thing is that I have never had any luck getting it to work at this particular venue. Pretty sure it's something with the restrictions placed on the WiFi. Never had these types of problems anywhere else. I was put on an email chain and said what I was using and what I think the issue may have been. Not sure what happened, but everything worked out. You can check out this video and more at https://otech.events Here's the video: 
{% youtube ASulzUz5NTI %}

![view from a bridge of a house between water fields and mountains in Bariloche, Argentina](https://thepracticaldev.s3.amazonaws.com/i/zjrgk5idejvv1ikvx472.jpg)

So yeah, it wasn't until I got situated at the meetup that I realized that I hadn't posted today. Just so many things happening. Didn't get a chance to write till I got home. I'm tired and going to bed. Might do some website data structure planning. Oh and I bought a new domain name. haha

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube SuVLvdH6TjI %}
useReducer with TypeScript
Tags: react, typescript
Published: 2019-11-05 05:02:13

---
title: useReducer with TypeScript
published: true
description: How we can strongly-type Reacts useReducer hook with TypeScript
tags: react, typescript
cover_image: https://www.carlrippon.com/wp-content/uploads/2019/11/useReducer-with-typescript.png
---

This video steps through how we can strongly-type Reacts `useReducer` hook with TypeScript.

Enjoy!

{% youtube 9BfwPyrFZzA %}
How to connect to DynamoDB with Python using Docker Compose? | Boilerplate, Starter Pack 🐳
Tags: python, docker, aws, devops
Published: 2019-11-05 04:45:09

---
title: How to connect to DynamoDB with Python using Docker Compose? | Boilerplate, Starter Pack 🐳
published: true
description: A Docker and Docker Compose starter kit and guide to help you get started with AWS DynamoDB using Python quickly.
tags: python, docker, aws, devops
cover_image: https://raw.githubusercontent.com/CT83/DynamoDB-Python-Docker-Compose-Starter-Kit/master/images/dyanamodb.png
---

A Docker and Docker Compose starter kit to help you get started with AWS DynamoDB quickly.

Use this as a boilerplate for your next project, I already did!

{% github CT83/DynamoDB-Python-Docker-Compose-Starter-Kit %}

I am assuming you are already familiar with Docker and Docker Compose, so I'll get right to it. 

#### What is [DynamoDB](https://aws.amazon.com/dynamodb/)?
Amazon DynamoDB is a fully managed proprietary NoSQL database service that supports key-value and document data 
structures.


### What does the `app.py` do?

1. The `app.py` uses Facebook's Hydra Config Management to pickup the desired configuration, from the .yml file and 
loads it. 
2. Then a connection is made to a DynamoDB  Instance.
3. Some basic database operations are performed using the [PynamoDB](https://pynamodb.readthedocs.io/en/latest/) library. 


### How to run?

There are 2 modes in which you can run the `app.py` in.

### 1. Local DynamoDB Mode - 
Here, A Local Instance of DynamoDB is spun up using, Docker and Amazon's [Official Local DynamoDB Image](https://hub.docker.com/r/amazon/dynamodb-local/).
 
All the database operations are then performed on this local instance.

1. `docker-compose up --build`

### 2. AWS DynamoDB Mode 
Here, the `app.py` will connect to the [AWS DynamoDB](https://aws.amazon.com/dynamodb/) Instance, this is how your code might run in the production.
In this mode you are expected to 
1. [Create a Python Virtual Environment](https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/) 
2. `pip install -r requirements.txt`
3. Create an `.env` file with your AWS Credentials, like `example.env`.  
4. Replace *docker* with *aws* in the `env-config.yml`.
3. Run using `python app.py` 


### That is it! 
This should help you get started really quickly! 

## 🐋 + 📀 + 🐍 = 🤓
Learn fullstack GraphQL
Tags: graphql, javascript, tutorial, beginners
Published: 2019-11-05 04:13:10

---
title: Learn fullstack GraphQL
published: true
description: This series looks at how to build a GraphQL server in two different ways, one using express-graphql and the other way is using Apollo. We also look at how to consume our GraphQL server 
tags: graphql, javascript, tutorial, beginners
---
![](https://thepracticaldev.s3.amazonaws.com/i/btt4g9jajwjxh1vp9op7.jpg)

Follow me on [Twitter](https://twitter.com/chris_noring), happy to take your suggestions on topics or improvements /Chris

- [Building a GraphQL Server using Node.js and Express](https://dev.to/azure/building-a-graphql-server-with-nodejs-andexpress-5hfh)
In this first part, we get to know GraphQL and how we can use node.js, Express and a library called express-graphql to build a GraphQL server. We also get to know GraphiQL a tool that renders as a web page that lets us interact with our server by helping us construct queries and mutations and get the results displayed for us

- [Creating a GraphQL Server with Apollo](https://dev.to/azure/creating-a-graphql-server-withapollo-jjj) In this second part we learn how to use the framework Apollo to build our GraphQL server. Apollo comes mega packed with features so if you are serious about GraphQL it's worth a look
- [Consuming an Apollo GraphQL server using React](https://dev.to/azure/consuming-an-apollo-graphql-server-usingreact-3kk4) 
In this third part, we look at how we would actually use GraphQL for real by first building a SPA, a single page application in React and then call our server. We learn how we construct queries and mutations but also how we use more advanced features such as polling.
What is a SQL query you are proud of?
Tags: sql, backend, discuss
Published: 2019-11-05 03:46:58

---
title: What is a SQL query you are proud of?
published: true
description: We have all had that moment where we impressed ourselves with our creativity. What is a time you did that with a SQL statement?
tags: sql,backend,discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zecupujkfmskljl02ibc.png
---

I wrote my first SQL queries today. I have had some exposure to them and know the basic idea of what they are doing, but I have never actually written a SQL query. Now that I am diving deeper into the world of backend development I am learning some SQL to help in my work with databases.

So far it is actually really fun to work with databases. It feels like with the constraints of the query language one has less to worry about than when programming in something like Javascript while still having the power to do some impressive things.

We have all had those moments where we impress ourselves with our creativity or ingenuity in finding a solution.
What is a time you did that when writing a SQL query? What was the query? Why did you need to write it? What are you most proud of in how you wrote it?
VIM | Getting rid of ESC key to switch to Normal mode 
Tags: vim, ide, vscode, editor
Published: 2019-11-05 03:38:45

It's important that you place your hands in a correct position to reach different keyboard keys, but it has been a pain for me ever since to reach the `ESC` key just to switch to normal mode.

Some say you have to remap the `CAPSLOCK` key with `ESC`, but that doesn't work for me since I need the `CAPSLOCK` key sometimes if I need to write capitalized phrases or sentences.

Obviously, remap is the only solution. With this, I can place my hands in one place, and not stressing my fingers to reach certain keys. 

You can put this in your .vimrc
```
" Press nn to return to normal mode when in insert mode
inoremap ii <ESC>
inoremap <ESC> <NOP>

" Press ii to return to normal mode when in visual mode
vnoremap ii <ESC>
vnoremap <ESC> <NOP>

" Press ii when in Command mode, to go back to normal mode
cnoremap ii <ESC>
```

The code above will allow you to use `ESC` functionality when pressing `ii` on these modes:

- Insert mode
- Visual mode
- Command mode

This doesn't mean that you can't use the `ESC`, it's still usable but if you prefer switching to normal mode, then `ii` is the key to press.

It will take some time to train your hands and build that muscle memory, but once you have, I can assure you that it's worth it.

**BONUS**

Saving your changes, instead of `:w` or `:w!`, you can either map this with your leader key:

`noremap <Leader>s :update<CR>`

***OR!!!***
```
" Press ww to do a w!
inoremap ww <ESC>:w!<CR>
" nnoremap ww <ESC>:w!<CR>
vnoremap ww <ESC>:w!<CR>
" Press nww to do a save on normal mode
nnoremap nww <ESC>:w!<CR>
```

This will allow you to save your changes without going to the command mode.

For Insert mode, press `ww` to save your changes.
When in Normal mode, press `nww` to save your changes.
Lastly on Visual mode,  `ww` to save your changes.

I hope the remapped keys will help you to be more efficient when editing files on Vim.


Thank you for your time!
JOYG: 1st shooter game in #unrealgine
Tags: vr, virtual, reality, unreal
Published: 2019-11-05 02:26:27

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/grdf6jlb1tnioqwey8kd.png)

Here is a 3 level game being made using Unreal Engine 4. Game dev is about 50% design and usage of the game engine/editor unlike coding which can be an  equal mix of code + design.

Just started but wanted to share my excitement! I'm still doing fullstack javascript but really wanted to get into virtual reality development.

A top down map of the game area/game world/rooms is being designed right now. After which I'll put in some walls and materials (marble etc) on the floors.


[unrealengine4demo](https://imgur.com/gallery/gnik8P0)
How to run Oracle DB on a Mac with Docker
Tags: database, oracle, docker, devops
Published: 2019-11-05 22:19:56

---
title: How to run Oracle DB on a Mac with Docker
published: true
date: 2019-11-05 02:08:00 UTC
tags: Database, Oracle, Docker, DevOps
canonical_url: https://www.petefreitag.com/item/886.cfm
---

Oracle puts out a Windows and Linux binary for their Oracle Database servers, but what if you want to run it on a Mac? The solution for a while was to use a VM and boot up the linux version. Nowadays using Docker is a little bit easier.

I will say that running Oracle DB on docker is not quite as [easy as running SQL Server on Docker](https://www.petefreitag.com/item/880.cfm), but it is also not too difficult.

**Download the Oracle Database Linux Binary**

Your first step is to download the _Download the Oracle Express Edition version 18c (xe) Linux rpm_ from [oracle.com](https://www.oracle.com/database/technologies/xe-downloads.html). Oracle's docker files do support other editions, but the Express Edition is sufficient for getting started.

**Clone the Oracle Dockerfile Repo**

Oracle has a GitHub repo with all its Dockerfiles, you can clone it (download it) by running:

```
git clone https://github.com/oracle/docker-images.git
```

**Copy Binary to Dockerfiles dir**

Within the git repository you just cloned, go to the OracleDatabase dockerfiles folder:

```
cd ./OracleDatabase/SingleInstance/dockerfiles
```

Copy the binary you downloaded in step 1 to the 18.4.0 folder within the dockerfiles folder:

```
cp ~/Downloads/oracle-database-xe-18c-1.0-1.x86\_64.rpm ./18.4.0
```

**Build a Docker Image**

Run the script:

```
./buildDockerImage.sh -x -v 18.4.0
```

The `-x` tells the script that you are installing the express edition, and the `-v 18.4.0` tells it which version you are installing.

This step will take a few minutes.

**Look for local docker image**

You should now have a docker image named `oracle/database:18.4.0-xe` which you can start using docker. Run `docker images` from Terminal to look for it and make sure it is there. The total size of the image will be around 8-9GB.

**Start an Oracle Database Using docker-compose**

Finally we'll create a docker-compose.yml file so we can easily startup the db whenever we need it:

```
version: "3" 
services: 
  oracle: 
    image: oracle/database:18.4.0-xe 
    ports: 
      - "11521:1521" 
    environment: 
      - ORACLE\_PWD=testing12345
```

Now we can start up our container by running:

```
docker-compose up
```

If you omit the `ORACLE_PWD` environment variable it will just generate a presumably random password and output it during startup. The startup takes a few minutes to initialize.

After it starts up you will have an oracle database that is accessible on your local machine on port `11521`.
Managing rxjs subscriptions with takeUntil()
Tags: angualr, rxjs, subscriptions
Published: 2019-11-05 01:43:23

Whenever posible we should resist the temptation to subscibe to our observables.   If we want to acccess the observable values in our template, it is better to use the async pipe.  The async pipe will handle the subscription lifecycle for us.  We simple don't have to worry about unsubscribing.

But in those situations where we must subscribe to an observable in our component, we need to handle the unsubscribe ourselves.  

The traditional way of unsubscribing is the keep a reference to the subcription and call unsubscibe in ngOnDestroy...

```javascript
export class MyComponent implements OnInit, OnDestroy {

  private numbersSubscription: ISubscription;
  private lettersSubscription: ISubscription;

  ngOnInit() {
    this.numbersSubscription= of([1, 2, 3]).subscribe(numbers => {});
  }

  someMethodCalledLater() {
    this.lettersSubscription= of(['a', 'b', 'c']).subscribe(letters => {});
  }

  ngOnDestroy() {
    this.numbersSubscription.unsubscribe();
    if(this.lettersSubscription) {
      this.lettersSubscription.unsubscribe();
    }
  }
}
```

I've used this pattern many times but found that it gets unwieldy when you have a number of subscriptions.  A better pattern is to use the takeUntil operator.  Lets refactor the same situation...

```javascript
export class MyComponent implements OnInit, OnDestroy {

  private onDestroy = new Subject();

  ngOnInit() {
    this.numbersSubscription= of([1, 2, 3])
      .takeUntil(this.onDestroy)
      .subscribe(numbers => {});
  }

  someMethodCalledLater() {
    this.lettersSubscription= of(['a', 'b', 'c'])
      .takeUntil(this.onDestroy)
      .subscribe(letters => {});
  }

  ngOnDestroy() {
    this.onDestroy.next();
    this.onDestroy.unsubscribe();
  }
}
```

This looks simpler to my eyes.  We can add any number of subscriptions and all we need to do is add .takeUntil(this.onDestroy) to each call.
Apple builds on a successful product
Published: 2019-11-05 01:30:25

The fact that many people still flock to buy these expensive and easily misplaced wireless headphones shows how attractive they are.  Apple's original AirPods appeared as a surprising state symbol and a resounding success at a time when Apple was desperate for it.

      To offset the continued decline in iPhone sales.  Apple now hopes to capitalize on this success with a new luxury version of an already luxurious product.
https://dailytechmonde.blogspot.com/2019/11/airpods-pro.html?m=1
Day 9 - Digging Deeper into CSS - The Box Model
Tags: html, css, codenewbie
Published: 2019-11-05 01:03:07

I'm back. I'm still struggling with keeping a good pace and for now I think I'm gonna hold myself to 2 hours of studying minimum on weekdays and 4 hours on weekends. Outside of those hours, I will still be reading different blogs and watch videos. I have weeks where I spend a lot of hours outside of work studying and coding then I crash. I crash because I am not sleeping regularly and for a better learning experience.

And with that, I am hoping this change is going to help me be consistent.

So I have taken a few HTML and CSS courses and followed some projects and even made my own. While I have learned a lot I want to get deeper into CSS and for the next few days, that's what I will be doing. 

Today, it's all about the Box Model and the things that I missed:

The Box Model is a concept that states that [every element on a page is a rectangular box and may have width, height, padding, borders, and margins.](https://learn.shayhowe.com/html-css/opening-the-box-model/)

**Sizing Inline Elements**

Inline Elements are elements that are displayed inline and takes the width of the content they hold. They do not take the full width of the page unlike block elements. As such, they do not accept properties such as weight and height. They also do not accept the vertical margin <code>top</code> and <code>bottom</code>.

I wanted to know if there is a way we can size an inline element using CSS and I found 2 solutions:

1- Setting the <code>width</code> and <code>height</code> in HTML either directly or using inline CSS.

a) HTML
<code> img src="sample.jpg" width="100px" height="100px" </code>

b) Inline CSS
<code> img src="sample.jpg" style="width:100px;height:100px;"</code>

2- Setting the display of the elements as <code>block</code> or <code>inline-block</code> in CSS.

a) <code>block</code> will sit in a single line and you might need to tweak more if you want to other elements on the same line.

b) <code>inline-block</code> will sit multiple elements on the same line.

**Using Border-Radius**
I may have seen more but the only time I used <code>border-radius</code>, it was on all corders to slightly round them or to make a circle.

The shorthand property for <code>border-radius</code> goes <code>top-left / bottom-right</code> and <code>top-right / bottom left</code>

To see how this worked, I hopped on code pen and played and saw how I could use that property to make shapes.
How to toggle Bootstrap navbar collapse button in React without jQuery
Tags: react, bootstrap, nav, navbutton
Published: 2019-11-05 00:41:34

---
title: How to toggle Bootstrap navbar collapse button in React without jQuery
published: true
description: Details the use of a Bootstrap jQuery-dependent functionality without jQuery.
tags: react,bootstrap,nav,navbutton
cover_image: https://thepracticaldev.s3.amazonaws.com/i/67yd2r5914eu1e4rzoqx.png
---
Do you use Bootstrap (CSS) in React? You would've come across the advise not to add jQuery for good reason. jQuery directly manipulates the DOM so will be in conflict with React's virtual DOM which assumes it's the only Oga in charge. 

But many cool Bootstrap components rely on jQuery and other Bootstrap JS plugins to work. One of such components is the **navbar collapse toggle button** and we can toggle it by dynamically adding (or removing) the _collapse_ class in the *nav-link*'s parent div.

![Nav Toggle](https://thepracticaldev.s3.amazonaws.com/i/dmufjw6bh7e53yuigixw.png)

```jsx
<div class={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarsExample09">
  <a className="nav-link text-info" href="/contact">Support</a>
  <a className="nav-link text-info" href="/login">Login</a>
  <a href="/request-demo" className="btn btn-sm btn-info nav-link text-white" >Request demo</a>
</div>
```

This seems to be the easiest way since we are still relying on Bootstrap CSS classes rather than write our own toggle functon from scratch. Using Hooks for state management and not forgetting _aria-expanded_ boolean, we can have a TopNav component like:

```jsx
import React, { useState } from 'react';
import Logo from '../images/logo_512x512.png';

const TopNav = props => {
  const [isNavCollapsed, setIsNavCollapsed] = useState(true);

  const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);

  return (
    <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
      <a class="navbar-brand text-info font-weight-bolder" href="/">
        <img src={Logo} alt="Logo" width="36" height="36" className="vertical-align-middle" />
        <span className="">Discounter</span>
      </a>
      <button class="custom-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded={!isNavCollapsed ? true : false} aria-label="Toggle navigation" onClick={handleNavCollapse}>
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarsExample09">
        <a className="nav-link text-info" href="/contact">Support</a>
        <a className="nav-link text-info" href="/login">Login</a>
        <a href="/request-demo" className="btn btn-sm btn-info nav-link text-white" >Request demo</a>
      </div>
    </nav>
  );
}

export default TopNav;
```

Easy peasy right?
How to add a splash screen for a progressive web app with React ?
Tags: react, ios, javascript
Published: 2019-11-05 00:35:12

Recently I was developing a Progressive Web App (**PWA**). A PWA is a web app that you can install on your smartphone without downloading it from a Store, cool isn't it ? These kind of applications are not going to replace native web apps right now but it seems it has become an [interesting technology](https://hackernoon.com/the-advantages-of-progressive-web-apps-pwa-versus-native-apps-5o2aq308m). 

Anyway, my problem was to add the splash screen of my application for iOS users. Now I know how to easily add a splash screen, and I will explain you how to reproduce the following exemple :

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/v57xrih2cs4dju1ev53c.gif)

First of all, we need to create a react app : 

```console
npx create-react-app my-app
```

Put your logo (we will call it logo.svg) in the public folder of the newly created react app. And now we are going to actually add the plash screen capability for all types of iPhone screen size : 

```console
cd my-app/public 
npx pwa-asset-generator logo.svg ./assets -i ./index.html -m ./manifest.json
```

The pwa-asset-generator script ([github repo](https://github.com/onderceylan/pwa-asset-generator)) generates all the existing iPhone screen sizes and puts it in the asset folder, but also it adds in the index.html and in the manifest.json all metadata needed by the phone to choose the correct image for the screen splash ! This tool is so amazing ! 

Now you can start the development server, take your 📱, access to your app with safari, install it to your phone and test the splash screen !
An attempt at making a chatbox
Published: 2019-11-05 00:24:35

Over the weekend, I wanted to work with forms a bit more and so I decided to make a little chatbox.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/y87qjesfjj3culekmad9.png)

You're able to ask a question on the form and get an answer printed below the form. It just takes the user input and sees if that input includes a question that our chatbox can answer. If it exists, then it prints out the answer below the form.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/o7pwogwo9lrahjnjk8b3.png)


Right now, it's only able to answer two questions but it can answer many more if I work on it more. In conclusion, I learned more about how 'submit' and 'forms' work now.