teleren/devto huggingface dataset:
100 Days of Code | Day 0: Planning 
Tags: 100daysofcode, codenewbie
Published: 2019-11-25 01:40:06

I’ve attempted to complete the popular #100DaysOfCode challenge multiple times. Each time, I’ve fallen off somewhere around the third or fourth week for various reasons, including a lack of motivation, getting really busy with school and my personal life or just simply forgetting to update my progress on the journey while still being active and coding daily. Despite all of my previous failures, I’m going to attempt to complete the challenge again. In the event that I don’t complete this challenge I will continue to try again until I am successful.
Due to all of my previous failures, in completing the 100 Days of Code challenge and in other areas of my life, I’ve spent a great deal of time trying to understand what separates successful people from unsuccessful people. One of the things that I’ve learned is that successful people fail just as much as unsuccessful people, if not more, the difference is they continue to persevere. They learn from their failures,and turn them into wisdom when they try again.
So here I am trying again. Here is what I am doing differently this time around, I’ve broken up the 100 Days of Code Challenge into much less intimidating sizable chucks. I will be working on the challenge every weekday and resting on the weekends. Every five days, M — F will consist of one week. Every four weeks will equal to one month and at the end of five months I will have completed the 100 Days of Code challenge. To most people this may seem super obvious but it wasn’t until I broke the challenge down into these small easily digestible segments that I realized how doable this is. The time is going to pass by regardless so I may as well be working on leveling up as a developer
Here’s The Plan:
Each month I will work on completing a different one of the 6 certifications offered by free code camp. I’ve already completed the responsive web design coursework and completed all of the required projects. Next I’ll begin working on the Front End Libraries Coursework followed by JavaScript Algorithms & Data Structures and so on until the end of five months when I’ve completed all of the coursework and will be able to receive my Full Stack Web Developer Certification from Free Code Camp.
One of the main reasons that I’ve been previously unsuccessful in completing the 100 Days of Code Challenge is that I simply forget to update everyone on my progress. This time around I’ve set a calendar reminder every weekday at 8pm so I can update my followers on my progress as well as a reminder for the beginning of the week so I can check to make sure I am on track and the beginning of each month so I can reflect on the previous month and see what’s working well or what I may need to change.
I’m excited to embark on this journey again and confident that this time around things will be different. If you’re interested in following along on my code journey or helping in holding me accountable. Follow me on Twitter @nyathot
Day 3
Published: 2019-11-25 01:35:24

Hello everyone, I apologize that I haven't posted recently I received some exciting news that I will be beginning a software development job in December! With all the excitement I completely forgot about posting to my favorite website!

So on day 3 I accomplished quite a bit, using HTML, CSS, and ReactJs I was able to get the beginnings of my website going. The website will be used to make appointments and will allow users to send messages directly to me. 

I ran into some issues in the setup phase as this is my first React project and tbh I still have no idea what I am doing with that stuff! But at the very least I do know more in regards to HTML and CSS so I at least got a good groundwork going for my project. 

Tomorrow I hope to go shoot some photos and hopefully get a good one that I can use on the website. So to finish this I just have a few questions for you guys and gals and feel free to dm me or comment below.

1. Do you guys prefer React or Angular in most cases?

2. What was your experience when you first started in software 
   development?

Hope you all have a wonderful week and I look forward to your responses!
How to set up backend API mocks in JavaScript.
Tags: node, javascript, testing
Published: 2019-11-25 01:09:58


## Why mock an API?
​
There are many benefits of API Mocks:
1. Developing frontend components that normally depend upon the services, when the services are not available;
2. Testing frontend components (frontend unit tests generally use mocks for more reliability); and
3. If backend and frontend development are happening in parallel, providing a contract/dummy response to work with whilst the backend is in development.
​
## How to mock
​
In the following example, I will be using [mountebank](http://www.mbtest.org/docs/gettingStarted). There are other solutions out there, but we'll be using this one for the purposes of this article.
​
1. Install mountebank globally: `npm install -g mountebank`
2. Install the mountebank helper in your project: `npm install mountebank-helper`
2. Create a file nameed `mbSetting.js` and write:
​
	```js
	const mbHelper = require("mountebank-helper");
	// create a imposter, and assign a port number to it
	const imposter = new mbHelper.Imposter({ imposterPort: 3430 });
	// define an object as HTTP response
	const mockResponse = {
	  uri: "/structure",
	  verb: "GET",
	  res: {
	    statusCode: 200,
	    responseHeaders: { "Content-Type": "application/json" },
	    responseBody: JSON.stringify({
	      Contents: [{ Key: "content1" }, { Key: "content2" }]
	    })
	  }
	};
	// bind the response object to a route
	imposter.addRoute(mockResponse);
	// start mb server with routes set before
	mbHelper.startMbServer(2525).then(function() {
	  imposter.postToMountebank().then(() => {
	    console.log("Imposter Posted, domain is http://localhost:3430");
	  });
	});
	```
​
3. Start the mountebank server: `mb --nologfile`
4. Run the Node.js file you just created: `node mbSetting.js`
5. Send an HTTP request to `http://localhost:3430/structure`, and the response from this endpoint should be:
​
	```json
	 [{ Key: "content1" }, { Key: "content2" }]
	```
Collapse
Cant use the blessed approach just yet? A quick way to solve browser redirects after auth using react-router
Tags: react, webdev, javascript, ux
Published: 2019-11-25 01:02:30

Kent Dodds delineates a pretty good approach to auth in a react app here: https://kentcdodds.com/blog/authentication-in-react-applications

If you're using react-router and useContext in your app just auth that way. Its very convenient to have `AuthenticatedApp` and `UnauthenticatedApp` as the sides of your ternary in that authentication check. 

If for some reason you cant get this in as a ticket and you need to solve redirects quickly in an additive fashion (very little refactoring necessary) use `location.state`! Location state lets us pass data on a router action like `history.push`. 

Assuming you already have redirecting unauthenticated users to an unauthenticated view, the method of fixing bad redirects generalizes to two parts

1. Find the react router redirect `to` prop or history.push action that is causing that redirect and refactor it to this. 

Before
--
`<Redirect to='login' /> (could also be) />` or this`history.push({pathname: 'login', state: { redirectPathName: pathname, redirectSearchParams: search})`

After
--
```javascript
const { pathname, search } = useLocation()
// in route declaration
<Redirect to={{pathname: 'login', state: { redirectPathName: pathname, redirectSearchParams: search}} />

```


2. Find the login method that pushes to the new authenticated route.

Before
--
```javascript
handleLogin(username, password) {
   const { push } = useHistory();
   // handle login stuff
   // onSuccess do this
   push('/')
}
   
```

After
--
```javascript
handleLogin(username, password) {
   const { push } = useHistory();
   const { state } = useLocation();
   // handle login stuff
   // onSuccess do this
   push(state.redirectPathname ?  { pathname: state.redirectPathName, search: state.redirectSearchParams ?? '' }  : '/')
}
```
Some Button That Delivers... Literally 
Tags: webdev, design, css, html
Published: 2019-11-25 01:00:40

Today we will be looking at some [button designs](https://codemyui.com/tag/button/) that delivery literally using drones and trucks, plus a few regular old buttons with but with some added functionality when you click on em. 


#Button to Delivery Truck #1 - [Codepen](https://codepen.io/aaroniker/pen/eYOVrNa)
[![Button to Delivery Truck #1](https://codemyui.com/wp-content/uploads/2019/11/Order-Button-to-Top-Down-View-Delivery-Truck-on-Road-Animation.gif)](https://codemyui.com/order-button-to-top-down-view-delivery-truck-on-road-animation/)

#Drone Delivery In Progress - [Codepen](https://codepen.io/suez/pen/MWWPBVo)
[![Drone Delivery In Progress](https://codemyui.com/wp-content/uploads/2019/11/Button-to-Drone-Delivery-Progress-Bar-Animation.gif)](https://codemyui.com/button-to-drone-delivery-progress-bar-animation/)

#Button to Delivery Truck #2 - [Codepen](https://codepen.io/nerdmanship/pen/veWyKg/)
[![Button to Delivery Truck #2](https://codemyui.com/wp-content/uploads/2017/10/button-to-delivery-truck-animation.gif)](https://codemyui.com/button-delivery-truck-animation/)

#Button to Email Signup Form - [Codepen](https://codepen.io/YarivFrd/pen/NXomOV/)
[![Button to Email Signup Form](https://codemyui.com/wp-content/uploads/2019/03/Button-to-Email-Subscription-Field.gif)](https://codemyui.com/button-to-email-subscription-field/)

#Attention Grabbing CTA Button - [Codepen](https://codepen.io/dan10gc/pen/JOomvd/)
[![Attention Grabbing CTA Button](https://codemyui.com/wp-content/uploads/2018/08/Attention-Grabbing-CTA-Button-Animation.gif)](https://codemyui.com/attention-grabbing-cta-button-animation/)

#Let that Button Shine  - [Codepen](https://codepen.io/timrijkse/pen/gwRBQg/)
[![Let that Button Shine ](https://codemyui.com/wp-content/uploads/2018/09/Angled-Button-With-Glint-Effect-on-Hover.gif)](https://codemyui.com/angled-button-with-glint-effect-on-hover/)

#Button to Full Blown Form - [Codepen](https://codepen.io/gregh/pen/rjbmXb/)
[![Button to Full Blown Form](https://codemyui.com/wp-content/uploads/2018/09/Button-into-Modal-Form-Animation-1.gif)](https://codemyui.com/button-into-modal-form-animation/)

#Fun Cartoony Button for the Not So Serious - [Codepen](https://codepen.io/ImranPardes/pen/YvmRpz/)
[![Fun Cartoony Button for the Not So Serious](https://codemyui.com/wp-content/uploads/2018/07/Pure-CSS-Cartoon-Style-Angled-Button.gif)](https://codemyui.com/pure-css-cartoon-style-angled-button/)

Want more? Check out the [button designs gallery](https://codemyui.com/tag/button/) on CodeMyUI.
Start With React360
Tags: react360
Published: 2019-11-25 00:55:02

---
title: Start With React360
published: true
description: Simple steps to start with react360
tags: react360
cover_image: https://thepracticaldev.s3.amazonaws.com/i/kfbrlgag7txt4ysyh7pb.png
---
Hi guys, this is how you can get started with React360

## How to start with React360?

How to start with React360? 🤔

Before going to the _How?_, Let me tell you What is react360.

From the official documentation [react360](https://facebook.github.io/react-360/) is defined as follow:

> React 360 is a framework for the creation of 3D and VR user
> interfaces. Built on top of React – a library designed to simplify
> the creation of complex UI – React 360 allows you to use familiar
> tools and concepts to create immersive 360 content on the web.

Well, Facebook has several open source technologies one of them in the web world is [Reactjs](https://reactjs.org/) 👈check it out, I love it 😍 _You might love it too_.

Basically Reactjs is kind of the backbone of Facebook's open-source tech.

I am not going to write a story about Facebook's tech😉.

Like I was saying, you can easily start with React360 just by following these steps:

## Step1: You should have a computer with [Node.js](https://nodejs.org) installed.

- **Mac:** On Mac, it is recommend installing [Node.js](https://nodejs.org) through [Homebrew](https://brew.sh/).
- **Windows:** Get the Windows installer from the [nodejs.org download page](https://nodejs.org/en/download/).
- **Linux:** Go to the [nodejs.org package manager page](https://nodejs.org/en/download/package-manager/) to find specific instructions for your Linux distribution.

## Step2: Install React360 globally

> **Note:** you need to have an internet connection to fetch the data from npm registry

Run the command below in your command line

```
itguymax:projects apple$ npm install -g react-360-cli
```

This fetches the latest version of the CLI and installs it on your system.

## Step3: Initiate your **React360** project

To initiate your React360 project run the following command

```
itguymax:projects apple$ react-360 init devCDouala360
```

This creates a new directory called **devCDouala360**, with all of the files needed to run your project.

## Step4: Launch your project 🚀

To launch your project, run the following command

```
itguymax:projects apple$ cd devCDouala360
itguymax:devCDouala360 apple$ npm start
```

The server will inspect your project and gather all the data it needs to serve up your JavaScript files.

## Step5: See the result on the browser

To see your project, open your web browser and navigate to [http://localhost:8081/index.html](http://localhost:8081/index.html).

![alt React360 devc douala 360](https://thepracticaldev.s3.amazonaws.com/i/m78oyao326i9lf1j8fjb.png)

## Conclusion

This was just to get you started with React360. Hope you enjoyed reading it. A further post on the topic with an amazing app demo is at the corner.
stay tuned✌️


This post originates from [itguymax.me](https://www.itguymax.me/)
SQL Queries 
Published: 2019-11-25 00:17:24

SQL stands for Structured Query Language (to not take anything for granted, query is a term meaning to retrieve data). It's a very useful for programmers when dealing with databases of all sizes. 

There are a number of different database management systems that use SQL, I currently use PostrgeSQL and SQLite3. Each management system has their own specifics to how to access the data but for the most part they generally cross over. 

For our example we will use SQLite3 and will go over a very simple database and introduce _how_ to access the data so that you can go and traverse even larger and more complex databases in the future.

If you are unsure if you have SQLite3 you can open up your terminal and type 

```
which sqlite3
```
if the output is 

```
/usr/bin/sqlite3
```
then you are good to go. If not you can go to https://www.sqlite.org/docs.html
to find out how to install on to your computer 

Since we are all set up lets start by making a very simple database. In this example I will create a database but wont go into to much depth as this is more about accessing data than creating it


```
sqlite3 practice 
(creating a database called practice)

sqlite> CREATE TABLE people(
        id INTEGER PRIMARY KEY,
        name TEXT,
        age INTEGER,
        favcolor TEXT
        );
(we've created the table)

sqlite> INSERT INTO people (name, age, favcolor) VALUES
        ('Peggy', 68, 'red'),
        ('Reptar', 27, 'green'),
        ('Link', 33, 'green'),
        ('Marge', 36, 'blue');
 (we've added some data)

```
Here we see we have created a very simple database with four columns, and we've added four rows. So how do we now access this data?

As you can see in the above example there are words in all caps. These are keywords in SQL. You don't _have_ to write them in all caps but industry standard suggests that you do. Keywords in SQL are easy to use. Here is a list of the possible keywords to use https://www.sqlite.org/lang_keywords.html

in order to get data we will first use the SELECT keyword. SELECT does exactly what it sounds like- it will SELECT something. The next keyword we'll use is FROM, to tell SQL _where_ to _select_ _from_ i.e.

```
sqlite> SELECT name_of_column FROM name_of_table
```

'*' is another thing you can use to indicate "all". Its fine with smaller databases but as standard its better to be clear and specific. So we could type something like 

```
sqlite> SELECT * FROM people
(and our output would look like this)

1|Peggy|68|red
2|Reptar|27|green
3|Link|33|green
4|Marge|36|blue
```
it gives us the id, name, age, and favcolor
Communicating Visually While Working Remotely
Published: 2019-12-07 16:41:07

---
title: Communicating Visually While Working Remotely
published: true
date: 2019-11-25 00:00:00 UTC
tags: 
canonical_url: https://www.geekytidbits.com/my-remote-communication-tools/
---

One thing I have learned in since I started working remotely about five years ago is that communicating clearly is very important. Remote working has many benefits but inherently better communication is not one of them.

Context can be easily lost. The other person may be in a different timezone. Cultural jargon you understand can be lost with other cultures. There is a time delay when using asynchronous means of communicating (chat, comments).

There are things I’ve learned to help overcome these challenges. Communicating clearly, with concrete examples is one of them. Making sure to “spell things out” and not assume my reader will know insider jargon or acronyms. But, one of my favorite things to do is communicate with screenshots, annotations, animated GIFs and videos **often**.

I’ve spent quite awhile finding tools I like and setting things up to make me productive. I’d like to share my setup in hopes it spurs some ideas in others.

## Tools

- [macOS screenshots](https://support.apple.com/en-us/HT201361) - The built in tool to “Copy picture of selected area to the clipboard” (mapped to Command + Control + Shift + 4 by default) is easy, fast, and a good tool for quickly selecting an area of my screen. I use it when I don’t need to annotate and I can copy/paste from clipboard to my target app. ![macOS Screenshot](https://www.geekytidbits.com/my-remote-communication-tools/macos-screenshot.png)
- [Monosnap](https://monosnap.com/) - When adding some text, drawing a box, or pointing with an arrow will help communicate something more clearly, I use Monosnap. Also, I like using Monosnap for making videos since it supports easy sharing. ![Monosnap](https://www.geekytidbits.com/my-remote-communication-tools/monosnap.png)
- [Gifox](https://gifox.io/) - This is a simple tool for record animated GIFs and has drag/drop support which makes it suitable for quick sharing on GitHub and Slack. ![Gifox](https://www.geekytidbits.com/my-remote-communication-tools/gifox.png)

## Keyboard Shortcuts

I have keyboard shortcuts setup for these tools, in a progressive order. This makes using this quick and easy to remember.

- Screenshot: Command + Shift + 1 (macOS Copy picture of selected area to the clipboard)
- Annotated Screenshot: Command + Shift + 2 (Monosnap)
- Animated GIF: Command + Shift + 3 (Gifox)
- Video: Command + Shift + 4 (Monosnap)

![Keyboard Shortcuts](https://www.geekytidbits.com/my-remote-communication-tools/keyboard-shortcuts.png)

## Sharing

If the app I am sharing to supports copy/paste or drag/drop I will use that. For example, I do this when sharing screenshots and animated GIFs to Slack or GitHub. This allows my audience to see the visual quickly without having to click a link.

For all other cases (including email), I will upload the media to Google Drive and share the link. Monosnap and Gifox both support sharing to Google Drive.
Turn off your notifications
Tags: career, watercooler, mentalhealth
Published: 2019-11-27 14:48:28

---
title: Turn off your notifications
published: true
date: 2019-11-25 00:00:00 UTC
tags: career, watercooler, mentalhealth
canonical_url: https://drew.tech/i-turned-off-my-notifications
---

## I think out loud

I develop my thoughts as I say them. I always have, even from a young age. Both my parents do it, so maybe that explains it? It helps me reason about complicated things. I generally come up with a better plan when I think through thoughts out loud.

If I'm:

- coding
- brainstorming
- planning

I'm _probabblllyy_ talking to myself.

![sound wave](https://developerspin.com/images/Speaker.png)

> My brain is plugged directly into a speaker that's always turned on.

Recently, at 25 years old, I realized I'm super annoying to other people when I do this. I guess I thought everyone else was interested in what I was thinking? (stupid, I know)

My loving fiancée helped me realize others can't focus while I'm ruminating over details of a project or planning out what my next week is going to look like, all audibly.

### This should have been obvious, right?

Except it's not - not to most of us. A few of us live with someone like me; someone who continually talks out loud and says things you probably aren't that interested in. But all of us carry something with us that does the same thing - **our phones**.

## I turned off my Gmail notifications

> I just turned off unread badges for gmail and I’ve never felt more calm.   
>   
> Happy Monday. [pic.twitter.com/YcSWgAPXHH](https://t.co/YcSWgAPXHH)
> 
> — Drew Bredvick (@DBredvick) [November 25, 2019](https://twitter.com/DBredvick/status/1198958279512211456?ref_src=twsrc%5Etfw)

 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

I _thought_ it was going to be a big deal.

I _thought_ I was going to miss something important.

I thought wrong.

### Ignore your notifications

Turn off your phones this holiday season and spend time with the ones you love, and don't worry about the notifications that pile up.

After all, I'm reasonably sure that no one's "I'm thankful for" list contains email notifications.

**Happy Thanksgiving**
How to Add Path Uniquely to $PATH
Tags: bash, zsh, linux, unix
Published: 2020-02-24 13:06:41

---
title: How to Add Path Uniquely to $PATH
published: true
date: 2019-11-25 00:00:00 UTC
tags: bash, zsh, linux, unix
canonical_url: https://tech.serhatteker.com/post/2019-11/how-to-add-path-uniquely-to-path/
---

There are 2 easy options for this: Add as a "configuration" or a "function". 

## Configuration
Add below into your `.profile/.bash_profile/.zprofile`. You can add it
into `.bashrc/.zshrc` as well but I do not prefer this method. Since environment variables should be set in `~/.profile`.

Add a path to `$PATH` if it is not already in `$PATH`:

```bash
[[ ":$PATH:" != *":/path/to/add:"* ]] && PATH="${PATH}:/path/to/add"
```

For instance add `~/projects` dir to `$PATH`:

```bash
[[ ":$PATH:" != *":${HOME}/projects:"* ]] && PATH="${PATH}:${HOME}/projects"
```

If you need the path at the start use `PATH=/path/to/add:${PATH}` instead of `PATH=${PATH}:/path/to/add`.

## Function

Also you can use a function to do this:

```bash
path-append () {
        if ! echo "$PATH" | /bin/grep -Eq "(^|:)$1($|:)" ; then
           if [ "$2" = "before" ] ; then
              PATH="$1:$PATH"
           else
              PATH="$PATH:$1"
           fi
        fi
}
```
It will check whether the path given is already in the `$PATH` and also lets you append it "after" or "before" to `$PATH` as desired —default is "after":

For example:

```bash
$ echo $PATH
/usr/local/bin:/usr/bin:/bin

## Add to the end; default
$ path-append /sbin
$ echo $PATH
/usr/local/bin:/usr/bin:/bin:/sbin

## Add to the start
$ path-append /usr/sbin before
$ echo $PATH
/sbin:/usr/local/bin:/usr/bin:/bin
```

All done!