teleren/devto huggingface dataset:
What You Can Learn from Your Dog about Mindfulness
Tags: mindfulness, presence, happiness
Published: 2019-05-19 22:16:10

---
title: What You Can Learn from Your Dog about Mindfulness
published: true
description: My dog has nothing to worry about, but it's not like he could do it if that wasn't true.
tags: mindfulness, presence, happiness
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rwz53bq8t55ahancvvzn.JPG
---

Since I've lived in apartments for the entire 3 years I've had my dog, Trooper, Zach and I have always had to walk him with a leash. Our current apartment has a nice bark park, which helps him get some energy out, but for the most part, he's on a leash.

It's easy to get bored while walking your dog on a leash. Sometimes, I pull my phone out to take a quick peek at an app (this is a whole separate issue, really 😜) while he's staring off into space or letting out little huffs at other dogs/humans.

After a while of him standing still, I think (rather impatiently), *"What are you* looking *at? Can you just do your business already?"*. Here's the thing: he has no choice but to be present in every single moment. Their brains aren't wired like ours to think about the future.

![](https://thepracticaldev.s3.amazonaws.com/i/b84s2n8z4k0eq8wa4pi0.JPG)
<figcaption>Bonus! Here's another picture of Trooper. :)</figcaption>

Trooper can really only think about what's right in front of him. Who knows if nature intended this, but I assume that animals are like this for a reason. *Wild* animals don't have time to worry about things that aren't even happening&mdash;they're too busy trying to survive predators and starvation.

Most of us don't really have to do that, at least not to the same degree. Trooper doesn't have to do that either since we take care of him, but what's the coolest side effect about him still having a limited perception? He's an extremely happy pup. He's content watching birds, sniffing flowers and poles, and sunbathing.

So, what can we learn about mindfulness from our dogs? You'll be a lot happier if you practice it. Try not to worry too much about things until they're actually a problem. Try to use your phone a little less. Look up. Look around. See the beauty in your surroundings.

---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to [https://ashleemboyer.com/newsletter](https://ashleemboyer.com/newsletter).

---

*Cover image by me. That's Trooper!*
Fetch Wont Send Or Receive Any Cookies
Tags: fetch, javascript, cookies, vue
Published: 2020-01-25 22:42:17

---
title: Fetch Wont Send Or Receive Any Cookies
published: true
tags: fetch,javascript,cookies,vuejs 
canonical_url: 
---

## Fetch won’t send or receive any cookies 🍪

Today I think I have fixed a bug that has niggled away at me for ages.

A severe case of [‘works on my machine’](https://blog.codinghorror.com/the-works-on-my-machine-certification-program/)

I have some code that consumes an external API that once authenticated would then, later on, make another API call to fetch the end users recent images.

This worked great…

Except for some users who reported they once logged on would not see their images.

However, for the longest time, I could not recreate this. It worked on my machine, It worked on macOS, Windows and Linux, It worked on safari, chrome and firefox. It worked on an iPhone 6s.

So, I added [logging](https://github.com/serilog/serilog-aspnetcore), then more logging. I even signed up for a trial [Browserstack](https://www.browserstack.com/) account to try as many different browsers and devices I could and still could not recreate the issue.

Then eventually while testing something else out I managed to recreate the bug using Apple’s iOS simulator using an iPhone 6S running iOS 11.2.

Being able to recreate the bug really is half the battle when it comes to bug fixing code.

So, armed with some breakpoints and a clearer idea of what was going on, I was eventually able to get the bug fixed and a working app pushed out to production.

The bug?

Well, I am not 100% sure how to explain it but the front end has some JavaScript code that uses the [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to call an [ApiController](https://docs.microsoft.com/en-us/aspnet/core/web-api/?view=aspnetcore-2.2) that checks for a session variable and based on that value returns data back to the front end client.

For most browsers and my development environment, the following code was enough to make that call and get the correct data back:

```js
fetch(this.apiUrl)
```

But, then for some browsers, I needed to modify the fetch API call to specify that cookies and credentials must be sent along with the request also.

This is the code that does this and is what I committed as the fix.

```js
fetch(this.apiUrl, {
        method: 'GET',
        credentials: 'include'
      })
```

The documentation for fetch does point to the issue somewhat

> By default, **fetch won’t send or receive any cookies** from the server, resulting in unauthenticated requests if the site relies on maintaining a user session (to send cookies, the credentials init option must be set).

> Since Aug 25, 2017. The spec changed the default credentials policy to same-origin. Firefox changed since 61.0b13.

> – [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

Why this was only needed for certain browsers I am unsure but my fix seems to work.

Success 🎉
My case against the "ternary operator" in Python
Tags: python, python3
Published: 2019-05-19 23:45:25

---
title: My case against the "ternary operator" in Python
published: true
description: Why we should avoid them
tags: python, python3
series: Python tips
---

## Ternary what?

Ternary operators, also known as [conditional expressions](https://docs.python.org/3/reference/expressions.html#conditional-expressions) in Python, can be used to make our code shorter:

{% gist https://gist.github.com/victor-o-silva/ffe4df0f5a7f6595e9fc0f3fac664c7c %}

But i don't like them for two reasons:

## 1. They often go against the Zen of Python

If you don't know the [Zen of Python](https://www.python.org/dev/peps/pep-0020/), start a Python interpreter and type `import this`. The Zen is a set of guiding principles for writing Python code.

Arguably, most of the time conditional expressions are likely to break 3 of these principles:

* Beautiful is better than ugly.
  * E.g.: `'Odd' if n % 2 else 'Even'` is anything but beautiful
* Sparse is better than dense.
  * E.g.: `'Odd' if n % 2 else 'Even'` is more dense than an if/else statement
* Readability counts.
  * E.g.: `'Odd' if n % 2 else 'Even'` is not as readable as an if/else statement

And, more importantly...

## 2. They often trick our test coverage

Conditional expressions may make us think that we've covered all possible branches with tests when we actually have not. Check the following example:

{% gist https://gist.github.com/victor-o-silva/d055ec7bb21423f7209edfee836c9f24 %}

If I run the tests with [coverage](https://coverage.readthedocs.io), this is the output:

![](https://thepracticaldev.s3.amazonaws.com/i/bw8qcknsgwl9wm38rw0l.png)

According to the image, I covered 100% of the lines, without missing any branch. But looking again at the code, we can see that there is no test for months of the second semester of the year.

If I use the classic if statement instead, the lack of coverage will be correctly detected:

{% gist https://gist.github.com/victor-o-silva/c56f7a52fb135a7cf1f9752f801a53e1 %}

![](https://thepracticaldev.s3.amazonaws.com/i/sxkngg6irn5zxfdo4hth.png)

If I run the coverage exporting the results to HTML, I can actually see which statement was skipped and which branch was partially run during the test:

![](https://thepracticaldev.s3.amazonaws.com/i/mgwwqybns8fqdowh47p3.png)

![](https://thepracticaldev.s3.amazonaws.com/i/hhdrwraq06wm6xghv8pl.png)

Now I know that I should write a test that calls `semester` with a value greater than 6 if I want the function to be 100% covered.

## Conclusion

These are the reasons why I avoid conditional expressions and advise people to avoid them too: they tend to break the Zen of Python and they can fool our code coverage tools.

Granted, not every piece of code does need to be 100% covered by tests, but the ones that do should be measurable in the best way possible, and we've just seen that conditional expressions can get in our way when we are pursuing that.
The new keyword
Tags: javascript, webdev, syntax, engineering
Published: 2019-05-19 23:31:55

---
title: The new keyword
series: Micro-Concepts in Object-Oriented Programming
published: true
description: A succinct explanation of the _new_ keyword in JavaScript
tags: JavaScript, web development, syntax, engineering
cover_image: https://thepracticaldev.s3.amazonaws.com/i/n4bjl5qq6yb55a1s1km6.jpg
---
## Let's make use of some syntactical sugar - `new`.

The `new` keyword does a bunch of neat shit for us, but to fully appreciate what it does, we've gotta review something else real quick:

### _Functions in JavaScript are both objects **and** functions._

This means that this code **actually works**:

```javascript
function sayHey() {
  console.log('Heeeeey');
}

sayHey.target = 'Tang';
console.log(sayHey.target); // will log 'Tang' to the console
```

**Cool!**

So functions are both objects and functions - we can access the function bit with parentheses (`sayHey()`) and we can access the object bit with dot notation (`sayHey.something`).

The object portion of functions is **always** there and it **always** has a prototype key in it. And the value stored at the prototype key? _It's a big ol' empty object and it's exactly where we want to store our functions._

Now we need to talk about the cool shit `new` does for us in JavaScript. The `new` keyword modifies the execution context of the function that immediately follows it by doing the following:
* It creates a property labeled `this` and assigns an empty object to that label
* On the `this` object from above, the hidden property `__proto__` is assigned the reference to the prototype property on the function being invoked
* It returns the object stored at the `this` property as long as no object is returned from the function being invoked (h/t to [Thomas Broyer](https://dev.to/tbroyer) for clarifying this point)



We would have to do all that stuff manually, but the `new` keyword **does** all of that for us.

Finally, let's take a look at it in action:

```javascript
function createCar(color, speed) {
  this.color = color;
  this.speed = speed;
}

createCar.prototype.go = function () {
  console.log('I prefer to drive ' + this.speed + '.');
}

const myCar = new createCar('red', 'fast');
myCar.go(); // will log 'I prefer to drive fast.' to the console
console.log('myCar is', myCar.color); // will log 'myCar is red' to the console
```
Here are few things I learnt after completing #javascript30
Tags: javascript, webdev
Published: 2019-05-19 21:06:31

I did #javascript30 challenge on 18th april but immediately I felt it's for beginners as browsing through the challenge I found working `console` object, trying `.map`, `.reduce` etc functional programming components. I thought its not worth it but then after 10 days I saw a twitter post about #javscript30. The person did a challenge in which he has to manipulate pixels from webcam. It immediately caught my interest and when I re checked challenge list I found `Unreal web cam fun` listed. Then I decided lets do this. So as mid level css/javascript developer here are few things I learnt - 

- *Flex box can be nested*. I never got to use flex box enough to understand it properly. In our day to day job or project we're most likey use some sort of library which already has some predefined class then we tweak it to make it look our own. During the challenge I used nothing but flex box to position and believe me it made positioning like peace of cake. 
- *You never know enough browser API*. I thought I knew most of new API which recently has been released. But I failed to realize that it can be pain to use it  on desktop chrome and android/iOS chrome/safari. When working on hobby project or trying to create something in order to learn some concept we tend to just get things done whithin the scope of what we're are learning. But what if you are learning `geolocation` API and while making a compass you neglected possiblity that it may break on phones. And in my case it did. While searching for a solution I got to know so many new API which is only available for Android/iOS chrome.
- *Animate but simple*. I knew new CSS3 animations and all but never got to use it extensively to understand common problems when applying it. While making a navigation in the challenge I spent hours figuring out why my animation is'nt working. And after few cups of coffee I figured it out why. We can not animate `display` or `width`. So I applied a hack. I moved element away from view port and brought it back. Tip: `tranform: translateX(-500px);` can be life saviour.

- *Javscript Coordinates are fun again*. I always avoided using coordinates in javascript. All the `clientX`, `offsetWidth`, `pageX` are confusing. But in the challenge there was a situation where I had to calculate the coordinate of some image elements to figure out when they enter and leave the view port so I can add enter and leave animation. It was difficult as hell but sooner it was peace of cake. Thanks to http://javascript.info/coordinates. So I created a cheatsheet for these confusing coordinates properties -
![https://pbs.twimg.com/media/D67HxxkUYAARPNI.png:large](https://pbs.twimg.com/media/D67HxxkUYAARPNI.png:large)

These are few top things I thought was worth sharing. If you're like me then you must give a try to #javascript30 by @wesbos. He's a great teacher.

P.S- My first blog. Ignore the mistakes 😎. Suggestions will be appreciated. Thanks
Web Development Part 2B: Fonts, Colors, Etc.
Published: 2019-05-19 20:43:11

---
title: Web Development Part 2B: Fonts, Colors, Etc.
published: True
description: 
tags:
cover_image: https://gallery.mailchimp.com/fbd7db24d41cbb15fbb6a072f/images/76567adb-d5bf-4b2b-aa20-ddbbcb8ce243.png
---

It's time to spice things up!
We're going to learn about fonts, colors, and a few other tricks! Don't forget to use the hashtag #TimTeachesCode on twitter! Remember, you can all contact me whenever you have questions or feedback.

This course is completely free and will be free forever. It takes a bit of time to prepare and support, so if you'd like to contribute, you can do so at https://paypal.me/tevko. Any contribution helps!

**This week: Making it Nice.**
In the last lesson, we used Grid and Flexbox to layout our FAQ page. We also added media queries to allow the content to display nicely on all screen sizes.

In this lesson, we're going to add more styles to our FAQ page. This means fonts, colors, underlines, backgrounds, and anything else you can think of! You'll need to do a lot of studying and browsing for this lesson, in order to learn about the different things you can do with CSS.
 
What you'll need to study

https://css-tricks.com/almanac/properties/

A few tips: 
- Make sure the CSS you're using is supported by all browsers, and not deprecated!
- Find some inspiration to help with your design.
- Make sure your color schemes, font sizes, and overall page design is accessible!


**Homework:** 
Reply to the email with a link to the updated codepen and a brief summary of what you've learned about CSS design. Also include your plans to continue studying CSS and how you'll keep this new skill sharp!

Extra points.
Read through https://daveceddia.com/implement-a-design-with-css/ and find a new design to replicate on your own!
Flatiron Blog #2 - Fruit Loops
Tags: flatiron, bootcamp, ruby
Published: 2019-05-19 19:46:05

---
title: Flatiron Blog #2 - Fruit Loops
published: true
description: Experimenting with arrays and loops
tags: flatiron, bootcamp, ruby
---

So the first month of Flatiron has been a whirlwind of new information. All these arrays, loops, iterations, OOR. All this information has me feeling loopy (get it?)

But I feel like I'm not retaining the information as well as I should. I have been doing the challenges but I feel like I need to "build" on my own. Building things on my own has helped me a lot with retaining info.

So I decided to start building. I started simple: getting ruby to generate fruit when prompted. I call it Fruit Loops (someone on Twitter gave me the idea). Here is the code (you can also view it <a href="https://repl.it/@SarahWilliams1/InsidiousVivaciousCubase">here </a>)


![](https://thepracticaldev.s3.amazonaws.com/i/begg9l5qoml1y1tlau2l.png)


So what happens is that the code is going to great you and ask if you want some fruit. If you answer yes, the code will randomly select a fruit from the array and give you some; then the program will end. If you say no, the program will say bye and end. If you say anything else (like ask it a question) it will reloop and re-ask you the question until you answer yes or no.

This was a great review of array and loops. But I'm having difficulty trying to use regex for this. You see, I want it to be able to select various answers of "yes" and "no" and not just "yes" and "no". But with a little more studying I'll probably will have it down next time.

I also started a mini project called "Free Fruit Fridays". Here's the code (Also <a href ="https://repl.it/@SarahWilliams1/MeagerMintySuperuser">here</a>

![](https://thepracticaldev.s3.amazonaws.com/i/nkpwsthnvl0l7ceyr1o1.png)

This isn't finished and the code needs work. But the idea is this: It's free fruit friday and the market is giving away 500 pieces of fruit to every customer that comes in. But, how will they be able to properly distribute the fruit to the customers and keep track? The generator starts by asking for the name of the customer and then asking how many pieces of fruit they want. Then it will randomly give then that # of random fruit. The process repeats until it runs out and then the generator will say that there is no more fruit.

I'm using similar methods that were in the previous experiment but I can't stop the loop from generating endlessly and need to figure out how to get it back to the beginning. I'm thinking of going more advanced on this one and using OOR. But it looks like I got Arrays and Loops down finally.

Ruby isn't so bad after all. Maybe by the next post I'll be doing advanced OOR.
ReactJS Buttons CheatSheet
Tags: webdev, learntocode, react, frontenddev
Published: 2019-05-21 06:51:42

---
title: ReactJS Buttons CheatSheet
published: true
tags: web-development,learn-to-code,reactjs,front-end-developmen
canonical_url: https://medium.com/@bhavaniravi/reactjs-buttons-cheatsheet-3d830533ac90
---

#### Using buttons? You got them all here

Most frontend devs life revolves around creating components and styling them. Me as a backend dev, found myself going through 4–5 StackOverflow links before I could get a single button component up and running. Here is a list of basic operations.

#### Create New React Project

```
npx create-react-app react\_button\_cheatsheet
```

#### How to Create a Button

![](https://cdn-images-1.medium.com/max/123/1*NH16OMNwflX1mvEJiBEmXA.png)

```
class UpgradedButton extends React.Component{
     render(){
          <button>Submit</button>
     }
}
```

#### Make It Look Pretty

![](https://cdn-images-1.medium.com/max/270/1*jOvomCaEfQ158lLGUxtIkA.png)

```
const StyledButton = styled.button`
    position: absolute;
    height: 10%;
    width: 10%;
    top: 50%;
    left:50%;
    font-size: 2.6vmin;
    cursor: pointer;
    box-shadow: rgba(255, 255, 255, 0.05) 0px 3px 20px;
    border-width: initial;
    background-color: grey;
    color: white;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: none;
`

**// change this line in UpgradedButton**  
// <button>Submit</button>
<StyledButton>Submit</StyledButton>
```

#### Change Color OnHover

Add this to the style components’ CSS string

![](https://cdn-images-1.medium.com/max/306/1*gBVcIyGdJZKyqulwfMRQkw.png)

```
const StyledButton = styled.button`
    ...
    ...
    ...
    &:hover {
       background-color: #445b65;
       color: white;
    }
`
```

#### Handle Onclick event

![](https://cdn-images-1.medium.com/max/397/1*vT7KSBiLDLEIRD5K-UMFKg.png)

```
handleClick = () => {
    console.log("Button clicked...")
}

...
...

<Button onClick={this.handleClick}>Submit</Button>
```

#### Change Text OnClick

```
handleClick = () => {
   buttonText = this.state.buttonText == "Start" ? "Stop" : "Start"      
   this.setState({buttonText: buttonText})
}
```

#### The Complete Code

{% gist https://gist.github.com/bhavaniravi/216cbefebec4e6d3c37ae5baced536ab %}

Something is missing? Leave it on the comment. [Liked what you read? Leave a shoutout on Twitter @geeky\_bhavani](http://twitter.com/geeky_bhavani)

![](https://cdn-images-1.medium.com/max/550/0*kNzShDyNud_q1xBX.jpg)
Product Hunt React Native Starter Launched
Tags: reactnative, sugarkubes, starter, mobileapp
Published: 2019-05-19 18:18:19

---
title: Product Hunt React Native Starter Launched
published: true
description: SugarKube React Native Starter.  
tags: reactnative, sugarkubes, starter, mobileapp
---

Hi Everyone, 

I launched a new [SugarKube](https://sugarkubes.io) featuring a React Native starter project on product hunt today. 

Could really use some love!!!

https://www.producthunt.com/posts/react-native-starter-project


I'd be really curious about this community's feedback on what would make a code and container marketplace useful. Is it starter projects like this or more advanced / feature complete stuff?

## Demo

Scan the QR code below or install from [expo](https://expo.io/@andrewpierno/react-native-expo-starter)!


![Expo](https://s3.us-west-1.wasabisys.com/public.sugarkubes/repos/react-native-starter-1/expo.png)


![Walkthrough](https://s3.us-west-1.wasabisys.com/public.sugarkubes/repos/react-native-starter-1/sliders.gif)

![Inside](https://s3.us-west-1.wasabisys.com/public.sugarkubes/repos/react-native-starter-1/inside.gif)

## Features

 - React Navigation routing (unauthenticated and authenticated routes)
 - App Demo Walkthrough (slide between cards)
 - Animation Example
 - Hamburger menu (Drawer)
 - Nested Pages with back button
 - Custom Font (Raleway)
 - Unejected Expo app



Thanks!
What Freelance channel do you watch on YouTube?
Tags: discuss, freelance, youtube
Published: 2019-05-19 18:02:48

---
title: What Freelance channel do you watch on YouTube?
published: true
description: 
tags: discuss, freelance, youtube
---

As a freelance web developer, what freelance channel on YouTube or podcast would you advice a beginner to subscribe to and why?

Thanks in advance
'ConnectPage' had no attribute 'add' Error in Python and Kivy
Tags: python, kivy
Published: 2019-05-19 17:45:24

Dear All,
Good day, when i try running this program the error message am getting is 
//'ConnectPage' had no attribute 'add'

My code can be found bellow

import kivy
import os
os.environ ['KIVY_GL_BACKEND'] = 'angle_sdl2'

from kivy import Config
Config.set('graphics', 'multisamples', '0')

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.uix.textinput import TextInput
kivy.require("1.10.1")

class ConnectPage(GridLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.cols = 2
        self.add.widget(Label(text="Username"))
        self.Username = TextInput(multiline=False)
        self.add_widget(self.Username)

        self.add.widget(Label(text="Password"))
        self.Password = TextInput(multiline=False)
        self.add_widget(self.Password)


class ADU360(App):
    def build(self):
        return ConnectPage()

if __name__ == "__main__":
    ADU360().run()


I really appreciate you guys help. Thank you in advance.