teleren/devto huggingface dataset:
React Native Square POS 
Tags: reactnative, react, javascript
Published: 2019-05-15 02:55:04

---
title: React Native Square POS 
published: true
description: A React Native module to accept credit cards using Square Point-of-Sale
tags: reactnative, react, javascript
---

Need to accept credit cards in a React Native application?  [react-native-square-pos](https://matix.io/react-native-square-pos/) is a great solution.

Square is a well-known solution for accepting credit cards via a mobile app.  Their famous Square Reader inserts into Android or iOS phones via the headphone jack or the Lightning port, allowing users to either swipe or tap credit cards.

If your app is based in the United States you can likely use the Square In-App Payments SDK for a smoother user experience.  Unfortunately, if you're not in the U.S. you're out of luck.

The solution for non-American residents is Square Point-of-Sale, a standalone application for Android / iOS which allows you to accept credit cards.

[Read more about how you can integrate Square Point-of-Sale into your React Native app](https://matix.io/react-native-square-pos/).
My First Dev Post
Tags: python, html, css
Published: 2019-05-15 01:14:54

---
title: My First Dev Post
published: true
description: 
tags: python, html, css,
---

Hey all, I'm a semi-new web developer. Attended General Assembly during the summer of 2018, to further develop my front-end web knowledge which helped me land a role as a Support Specialist at a Tech Startup. However, I am looking to dive into learning Python and wanted some advise on the best course of action to start learning.
Understanding hoisting in JavaScript
Tags: javascript, es6, webdev
Published: 2019-05-15 01:13:01

---
title: Understanding hoisting in JavaScript
published: true
description: Understanding hoisting in JavaScript
tags: Javascript, React, ES6, Web Development
cover_image: https://images.unsplash.com/photo-1529603992250-a55acb77d146?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80
---

One problem new JavaScript developers face is understanding that variables and functions are “hoisted”. While some developers intend for hoisting to happen, others are faced with unexpected results and don’t understand why. 

First, what is hoisting? 
```
// Outputs: undefined
console.log(car);
var car = 'Audi';
```

Hoisting by definition is to “raise or lift” and that’s exactly what JavaScript does when it runs our code. For example, JavaScript would have read our code snippet above as:
```
var car;

// Outputs: undefined
console.log(car);

// JavaScript sets our car variable afterwards
car = 'Audi';
```
As you can see our variable car is declared at the top of our file with a value set to “undefined”. Then once JavaScript gets to our variable it will reassign that variable to what we passed it.  

You might be asking yourself, what about functions? Functions are hoisted as well, but with a catch. Unlike variables, functions actually hoist the whole function definition, but only if it’s a function declaration.  For function expressions, the variable itself is hoisted, but the actual function definition is not. 
```
// Outputs: 'slyderz.co'
someFunc() 

function someFunc() {
	return 'slyderz.co'
}


// Outputs: site is undefined
site();

var site = function someFunc() {
	return 'slyderz.co'
}
```

That's all for now 😄. 
You can find me on Twitter/IG: @smithmanny
How to fix unwanted redirection's remaining in Google Chrome
Tags: googlechrome, redirect, troubleshooting
Published: 2019-05-15 01:03:51

---
title: How to fix unwanted redirection's remaining in Google Chrome
published: true
description: Google Chrome sometimes redirects to an unwanted direction whereas there is no such definition in your web server. It's because Google Chrome stored 301 redirection in cache. The problem can be fixed by "Developer tools" to create request with cache disabled.
tags: google chrome, redirect, troubleshooting
---

### Introduction

Google Chrome sometimes redirects to an unwanted direction automatically whereas there is no such configuration in your web server.
It's because Google Chrome stores 301 redirection history in cache.
The problem can be fixed by "Developer tools" in the browser to create request with cache disabled just once.

### How To

1. Run Google Chrome in your computer.
2. Open "Developer tool" by any one of:
    - Pressing F12.
    - Using the browser menu: "More tools" - "Developer Tools".
3. Open "Network" tab.
4. Check "Disable cache".
    
    ![Google Chrome's Developer tools](https://thepracticaldev.s3.amazonaws.com/i/veb0hjwozw655ihaa2e4.png)
    
5. Connect to a FQDN where you want not to redirect to another.
    - You will see the site as you wish.
6. Uncheck "Disable cache" to reset.

### Conclusion

Of course, it was my case, my failure.
I configured my web server to 301 redirect from FQDN-a to another, FQDN-b, for testing temporarily.
Then I was fallen into a state of affliction as all my trials to connect to FQDN-a brought me to FQDN-b, ahhh 😵
Perhaps, I should have used 302 temporary redirection for "testing"... 🙂

Thank you for your reading.
Happy computing.
Don't be Afraid to Admit Your Weaknesses
Tags: weaknesses, improvement, honesty, life
Published: 2019-05-15 00:43:17

---
title: Don't be Afraid to Admit Your Weaknesses
published: true
description: Listing out your flaws can feel awkward and uncomfortable, but guess what? We all have them, so let's bond with that discussion.
tags: weaknesses, improvement, honesty, life
cover_image: https://thepracticaldev.s3.amazonaws.com/i/844vqwg32l16d5i5p5o7.jpg
---

Do you know what it means when you can admit your weaknesses? It means you've probably recognized the following:

1. You are less afraid to be wrong
2. You aren't perfect
3. You have things to work on
4. You are working on the things

Other people figure these things *about* you when you openly admit your weaknesses. On Mother's Day, I was having dinner with my mom and grandma and we were talking about air fryers and cooking. *My grandma is an* ***exceptional*** *cook so it's a common topic of discussion.*

I haven't cooked in nearly 3 months because of my long commute, so they asked what I've been eating. I said something along the lines of, "Mostly microwave dinners, but I have a problem with impulsively buying fast-food during my drives." To that, my mom said, "You're openly admitting that???" And then my grandma swooped in with, "No, it's good she can admit it!"

I get that they are my family and the dynamic is different than that of one in the professional workplace, so I'll give you another example if you're still feeling skeptical.

A few years ago, I attended a weekend-long leadership workshop at my school. At one of the follow-up dinners, we went around the room and named something we wanted to spend 30 days improving. I named "road rage" because that's something I can be pretty bad about. The speaker was very surprised and we all laughed about it because it was relieving to hear such an honest answer.

People appreciate honesty and vulnerability. Good people will thank you for being open. It's how we relate.

---

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).

---

*[Image](https://unsplash.com/photos/i5HmKogqjyw) by [Limor Zellermayer](https://unsplash.com/@limorganon) on [Unsplash](https://unsplash.com).*
Saving dates on database saves your day
Tags: database, design
Published: 2019-05-15 00:37:04

---
title: Saving dates on database saves your day
published: true
description: Decision making for database minor design
tags: database,design 
---

A while ago, I had to add a discount system for a web app. The discount period is a week and the start can differ from a user to another. Later on, we want to filter those users who are on a discount and those who are not. 

The task seemed simple and quickly decided on using the following approach.

1. Create a discount `date` field in the user document on the DB (MongoDb)
2. After the week has passed, replace the discount date field to a `boolean` set to `false`.

The reason behind replacing a `date` field to `boolean` is to save up myself some lines of code and avoid dates comparison which can be tricky to compare sometimes, especially with multiple timezones. So I started implementing, finished, tested then deployed to production.

A few days later, I found out getting more data from the discount system can be useful. Imagine all the information about how well/bad the discount affects the users number over time, just by knowing when the users' discounts were created and ended. The problem is I only have the start date until the discount is finished, then neither start nor end dates are available anymore. How sad.. 

So I changed quickly to a better design, scratch off number 2 and add the
start and end dates. Let the code be longer, but now I got 
more reliable and specific data.

## Lesson learnt
1. Having dates about events in the database gives you more insight for your data 
2. Troubleshooting on production level can be tricky without enough information
3. Give enough time for designing your Database fields and how data flows with some use cases.
Prestamos / Loans
Tags: tdiskyt, loans, prestamos, reglas
Published: 2019-05-15 00:12:52

---
title: Prestamos / Loans
published: true
description: 
tags: #t.diskyt #Loans #Prestamos #reglas
---　　
    ████
    ████ 
    ████ 　
  ◥██████◤
   ◥████◤　　　 
    ◥██◤
     ◥◤
Reglas todo un Informático y Programador.
⬇︎Español-Spanish⬇︎

1ºNunca dejes entrar tu habitacion oh tu sitio de estudio.
2ºNo siempre dejes tus cosas a algien.
3ºSea creativo la hora de programar.
4ºSé tu mismo, y nadie te cambie como eres.

⬇︎Ingles-Englis⬇︎
1ºNever let your room enter oh your study site.
2ºDo not always leave your things to someone.
3ºBe creative when programming.
4ºBe yourself, and nobody changes you as you are.
How does one explain to non-tech people that it's difficult to anticipate all potential errors before deployment?
Tags: help
Published: 2019-05-14 23:43:35

---
title: How does one explain to non-tech people that it's difficult to anticipate all potential errors before deployment?
published: true
tags: help
---

Recent news in Australia is that a country-wide test called NAPLAN encountered technical difficulties in its second iteration of allowing students to take the test online. 

I was talking about it on Twitter and was trying to explain how that even if we had a bunch of techs/programmers sit together, brainstorm every possible edge case and test for them, there would still most likely be an edge case overlooked, sometimes due to imperfect information, other times due to resource constraints, etc.

The impression I get from non-tech people is that it **is** possible to account for every case, and to not to otherwise would otherwise signify incompetency.

Does anyone have a nice analogy/situation/scenario/explanation that gets that message across to enable them to be nicer and more empathetic to the difficulties associated with programming and anything tech-related?
Switching between binaries
Tags: bash, scripting
Published: 2019-05-14 21:52:40

---
title: Switching between binaries
published: true
description: bash scripting how to switch between binaries
tags: bash,scripting
cover_image: https://cdn-images-1.medium.com/max/800/1*TYr9ZaIGbFeWjARZCqWm7A.png
---

I am constantly changing my binaries for installation prerequisites and testing. I used to spend a bit of time change paths or updating **.bashrc** . This is a quick example of a bit of bash I used to reduce the manual steps involve around changing the oc binary(Openshift command line binary). Currently I have four versions of the oc binary on my PC 3.7, 3.9, 3.10 and 3.11, I put each binary in its own directory in **/opt/openshift**

![](https://cdn-images-1.medium.com/max/800/1*zXG7mgEcd2CCmpWXBu6GOg.png?style=centerme)

I have the oc binary [sym-linked](https://www.shellhacks.com/symlink-create-symbolic-link-linux/) at **/usr/local/bin/oc** so I only need to change where the sym-link is pointing. This script checks the current version that is sym-linked , list the versions present on the PC , asks you what version you wish to install and removes the existing sym-link and adds an new one.

```bash
#!/bin/bash
echo "########################################################################################"
echo Current version of oc
ls -la /usr/local/bin/oc
echo "########################################################################################"
echo Versions of openshift oc on the system
ls /opt/openshift
echo "########################################################################################"
echo "What version do you wish to install ?"
read version
sudo rm /usr/local/bin/oc
sudo ln -s /opt/openshift/$version/oc /usr/local/bin/oc
echo " "
echo "########################################################################################"
oc version
echo " "
echo "########################################################################################"
```

Once you have your script written you can make it executable by changing the Linux permissions

```bash
chmod u+x change_oc.sh
```
It can then be run

```bash
./change_oc.sh
```
Running it looks like this

![](https://cdn-images-1.medium.com/max/800/1*jC7XC2re8v9JXIqRvtn_Lw.gif?style=centerme)

[Myblog](https://austincunningham.ddns.net)
Pass props to an Emotion component
Tags: javascipt, react
Published: 2019-05-14 21:48:19

---
title: Pass props to an Emotion component
published: true
description: How you can pass props to an emotion component
tags: javascipt, react
cover_image: https://bit.ly/2JE7bwk
---

## So cool!
This is a quick post but said I share as I think it's really cool as you can essentially pass component props into your styles!!

We will use my own trusty sandbox that I normally use, we will change the background image by passing an image prop to the `Card` component.

{% codesandbox q88wyjjrqw %}

So let's pick a sexy picture from unsplash, let's use this one:
![Cool unsplash image](https://images.unsplash.com/photo-1557816580-686145586d02?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80)

We will use this as our background image, in the `index.js` file pass the image link to the `Card` component.  I shortened the image link as the original is a beast!

```javascript
render() {
    return <Card image={'https://bit.ly/2JE7bwk'} handleClick={this.handleClick} />;
  }

```

Now in the `Card` component destructure the `image` from props and pass `image` to our emotion `Component`

```javascript
const Card = ({ handleClick, image }) => {
  return (
    <Component image={image}>
      <div className="card">
.....
```

Now the big question is, how do we get this to our styled component seeing as it looks like we can't pass it props?

It's actually quite simple, we need to do this, essentially using an arrow function to get our props:
`props => props.image`

So in our case, we just need to do the following:

```sass
const Component = styled("card")`
  .card {
    background-image: url('${props => props.image}');
```

And voila it is done! I absolutely love this feature, makes it so easy to make components completely self-contained.

Final CodeSandbox:
{% codesandbox 74915yzz8q%}


I currently have 99 followers on Twitter [so it would be great if you could become my 100](https://twitter.com/PaulRyan7)!
Hosting static websites on Openshift
Tags: hosting, openshift, node, javascript
Published: 2019-05-14 21:46:56

---
title: Hosting static websites on Openshift
published: true
description: Hosting websites on Openshift
tags: hosting,openshift,node,js
cover_image: https://cdn-images-1.medium.com/max/800/1*EFWO2ndZaJPQadWav95T3Q.png
---

I had a site that I wished to host on Openshift.

## Express.js
Because the Node run time was supported I decide to host using a simple Express.js server. I had a git repository with an index.html file in the root. I ran npm init and excepted all the defaults.

![](https://cdn-images-1.medium.com/max/800/1*y0SGXo1kGNP9Yr1b3yJjkw.png?style=centerme)

That’s all I need to setup a Node app, I then proceed to add Express.js to it

```bash
npm install --save express
```

I also added a start script to the package.json

```json
"scripts": {    
           "test": "echo \"Error: no test specified\" && exit 1",
           "start": "node index.js"  
},
```

Added index.js Express server

```js
var express = require('express');
var app = express(); 
// serves files from the root directory
app.use(express.static('./'));
app.listen(8080, function () {    
  console.log('Listening at http://localhost:8080');  
});
```

I committed the changes to git remote repo. I created a new project in Openshift , browsed the catalog and selected Node.

![](https://cdn-images-1.medium.com/max/800/1*DLudZsgJhftBGDuWNmy_hA.png?style=centerme)

I entered an Application name and an the Git repository where my index.html was and click create. The Node version does’t overly matter for this small app.

![](https://cdn-images-1.medium.com/max/800/1*feRCaU3P8idh-DJoej-Dug.png?style=centerme)


The project proceeded to build and pull the git repo. You can check the progress on the Overview for the project

![](https://cdn-images-1.medium.com/max/800/1*A1FkfKEZUqybx_4-78sa7A.png?style=centerme)

Once the build was finished I was able to access my static site from the url provide by Openshift.

## Nginx
It turns out that Openshift as of May 2018 now has Nginx in the catalog. So the route to hosting static websites is a little easier. You sill need an git repo with a index.html in the root directory but you can get your site up with zero code. Create a new project and from the catalog select Nginx.

![](https://cdn-images-1.medium.com/max/800/1*8jQrOH5MNgrmTAxWcAqt5A.png?style=centerme)

The steps are much the same as deploying the Node app above i.e. Add application name and git repository, once the build is complete your site is up on the Route-External traffic.

[Myblog](https://austincunningham.ddns.net)
How to use CAReplicatorLayer to make activity indicator in iOS
Tags: ios, swift, replicator, indicator
Published: 2019-05-14 21:26:00

---
title: How to use CAReplicatorLayer to make activity indicator in iOS
published: true
description: 
tags: ios,swift,replicator,indicator
---

[CAReplicatorLayer](https://developer.apple.com/documentation/quartzcore/careplicatorlayer) is a layer that creates a specified number of sublayer copies with varying geometric, temporal, and color transformations

Here we use `instanceTransform` which applies transformation matrix around the center of the replicator layer

Below is how we use `replicatorLayer` to replicate lots of `line` and rotate them around the center.

```swift
let replicatorLayer = CAReplicatorLayer()
let animation = CABasicAnimation(keyPath: #keyPath(CALayer.opacity))

let line = CALayer()
let lineCount: Int = 12
let duration: TimeInterval = 1.0
let lineSize: CGSize = CGSize(width: 20, height: 6)
let lineColor: UIColor = UIColor.darkGray

let angle = CGFloat.pi * 2 / CGFloat(lineCount)
let rotation = CATransform3DMakeRotation(angle, 0, 0, 1.0)

replicatorLayer.instanceTransform = rotation
replicatorLayer.instanceCount = lineCount
replicatorLayer.instanceDelay = duration / TimeInterval(lineCount)

line.backgroundColor = lineColor.cgColor
line.frame.size = lineSize
line.cornerRadius = lineSize.height / 2

animation.fromValue = 1.0
animation.toValue = 0.0
animation.repeatCount = Float.greatestFiniteMagnitude
animation.timingFunction = CAMediaTimingFunction(name: .linear)
animation.duration = duration

replicatorLayer.addSublayer(line)
layer.addSublayer(replicatorLayer)

// x: 
// y: half the height, changing affects rotation of lines
line.position = CGPoint(x: 48, y: 75)

line.add(animation, forKey: nil)
```

Pay attention to `position` of the `line`. The larger the `x`, the closer to center. `y` should be half the height of the replicator layer size, changing it affects the skewness of the `line`.

<img width="584" alt="indicator" src="https://user-images.githubusercontent.com/2284279/57626103-809f2100-7595-11e9-9851-2df8b6013757.png">


Original post https://github.com/onmyway133/blog/issues/230
The purpose of abstraction.
Tags: abstraction
Published: 2019-05-14 20:02:42

---
title: The purpose of abstraction.
published: true
description: 
tags: abstraction
---

The purpose of abstraction is not to be vague, but to create a new semantic level in which one can be absolutely precise.

- Edsger W. Dijkstra

A reminder to my future self: If you always use jargon, always be willing to explain what it means.
Choosing GraphQL or Restful API?
Tags: javasript, webdev, beginners, node
Published: 2019-05-14 19:24:04

---
title: Choosing GraphQL or Restful API?
published: true
description: Which to use whether GraphQL or Restful API.
tags: javasript, webdev, beginners, nodejs
---

**GraphQL** vs **Restful API**

If your request is like this **/posts/query?sort=asc & limit=10 & format = json & id =888**, then at that point, use of **GraphQL is best**.

But in another scenario, where you request is like this **/posts/query **and you will be consuming all the parameters, then **RESTFUL API will be faster and reliable.**

Most reliable way of building an API is through the concept of Restful API.
Complex Configuration in Cypress.io
Tags: cypress, typescript, testing
Published: 2019-05-14 18:15:55

In our setup, multiple sites are deployed with the same code base. So it would make sense to reuse a lot of the testing code for all sites. 

To achieve this we decided to reuse the same Docker container and provide the needed configuration variables via the entrypoint script.

We have a config Folder in the cypress Folder and are building the final configuration file together from all the pieces.

To do so we use the `index.js` file in the pluginsfolder:
(we also installed the merge-json npm package)

```
const fs = require('fs-extra');
const mergeJSON = require('merge-json');
const path = require('path');


async function getConfigurationByFile(division, environment, locale) {


    let defaultConfig = {
        "env": {"localePrefix": locale}
    };

    const filePaths = [
        path.resolve(`cypress/config/${division}`, 'defaults.json'),
        path.resolve(`cypress/config/${division}`, 'pages.json'),
        path.resolve(`cypress/config/${division}`, 'seo.json'),
        path.resolve(`cypress/config/${division}`, `env-${environment}.json`)
    ];

    for (let filePath of filePaths) {
        const config = await fs.readJson(filePath);
        if (config.env) {
            Object.keys(config.env).forEach((key) => {
                config.env[key] = JSON.stringify(config.env[key]);
            });
            defaultConfig = mergeJSON.merge(defaultConfig, config);
        }
    }

    return new Promise((resolve, reject) => {
        resolve(
            defaultConfig
        );
    })
}

module.exports = (on, config) => {
    const division = config.env.division;
    const environment = config.env.environment;
    const locale = config.env.locale;

    return getConfigurationByFile(division, environment, locale);
};
```

Cypress does only allow to store key / value pairs `env` of the config. Therefore we apply `JSON.stringify()` on them and later on in the spec file we parse them back to JSON objects `JSON.parse(Cypress.env('<env_key>'))`

We have configured our Cypress.io Test Suite with Gitlab CI/CD. The pipeline can be triggered manually for the production and for the staging environemnt and is run automatically once a day.

## Need more details?

Please let us know if you are interested in more details!