teleren/devto huggingface dataset:
What about scalability?
Tags: it, scalability, codequality, software
Published: 2020-07-30 01:07:48

---
title: What about scalability?
published: true
description: 
tags: it, Scalability, quality, software
---

### Let me tell you, it's beautiful 

Systems are expected to grow at any time, and you know "Any time" even at middle of night. Also you won't know when a new pandemic is going to be propagated in the world and people need to make almost everything using the computer and your system will increase traffic even 500% of the expected.

It sounds good, but be careful scalability isn't something you have to do just when the system fails or maybe when a big deal is near. You have to think is scalability from the beginning. Because is so difficult to scale in/out a monolith, here is a list that i think you should have in mind from the beginning:

- Don't create logs in the server, it's difficult to maintain when you have to duplicate your server.
- Avoid a LAMP, MEAN servers, please move your database to another connection.
- Integrate a monitoring tool, will be easy if you can see what is happening before sign in into the server.
- Create Microservices, and avoid to use always the same programming languages, there is a language according the task.
- Use external service for assets (img, pdf, csv, txt ...), I usually use S3 it's cool.

After follow those tips, will be easier to move your system to a high scalable site, and some other benefit come in the package like easy to maintain, availability, cost effective site. Yes if you are able to reduce the server size when there are no users using it your wallet will be happy.

And at the end, obviously you will be able to sleep better.
TypeScript or PropTypes
Tags: react, typescript, javascript
Published: 2020-07-30 00:02:14

Of course my first post ever after being a member for 3 years will be to ask a (probably) dumb question. If you write React apps with TypeScript, is it even necessary to declare PropTypes? If so, why? If not, why not? I'm really trying to work up the courage to continue learning TypeScript but as I primarily create with React, I have a hard time seeing its usefulness. Please educate me! Much appreciated.
Level 1 Completed
Tags: challenge
Published: 2020-07-29 23:47:13

Hi everyone,
I got the foobar challenge and just wanted to share with you all that I just completed level 1.

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

It was a nice challenge, I have no idea why I love to challenge myself.

If you have done this challenge, please share your experience

Take care everyone, stay safe and happy coding!!!
CSS MediaQuery for making a board game responsive
Tags: css, beginners, design, game
Published: 2020-07-29 23:41:32

> Cover from https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2015/04/colortheory.jpg

Today I was working in a little board game I started with a friend and tried to solve something I was avoiding for some time now: how to make the board responsive.

I used CSS Grid for making a 9x9 board with as much space as possible, given the height/width of the window. I also tried using the `vw` unit, but when the window's height was less than the width, the page size would overflow vertically. The same did happened with `vh` but with a horizontal overflow.

# Solution

So, how is it possible to adapt a fixed css grid with 9x9 (or whatever) squares? With Media Queries! (or at least is what I found.) Using the `orientation` condition we can change the unit we're using. This specific snippet is what I used for the board:

```css
.board {
  display: grid;
  grid-template-columns: repeat(9, 10vh);
  grid-template-rows: repeat(9, 10vh);
  gap: 0.2em;
}

@media screen and (orientation: portrait) {
  .board {
    /* no more overflow with this! yay! */
    grid-template-columns: repeat(9, 10vw);
    grid-template-rows: repeat(9, 10vw);
  }
}
```

# Demo

{% codepen https://codepen.io/lgraziani/pen/wvMLJmG %}

If you know something better than this approach, feel free to respond! Thank you 😄!
Four ways to align boxes horizontally, each in under three lines of CSS
Tags: html, css, tutorial, webdev
Published: 2020-07-29 23:31:23

#Start with semantic HTML
```
<ul>
  <li>
    <img src="https://placehold.it/300x180" alt="" />
    <h2>Text label</h2>
    <p>Descriptive text</p>
  </li>
  <li>
    <img src="https://placehold.it/300x180" alt="" />
    <h2>Text label</h2>
    <p>Descriptive text</p>
  </li>
  <li>
    <img src="https://placehold.it/300x180" alt="" />
    <h2>Text label</h2>
    <p>Descriptive text</p>
  </li>
</ul>
```
![List with three items](https://dev-to-uploads.s3.amazonaws.com/i/kha7rwcma0yt71q5txis.png)

##Add some declarations to reset a few browser default styles
```
/* Resets */
img {
  max-width: 100%;
}
ul {
  padding: 0;
  list-style-type: none;
}
```
##Four options to stack the list items horizontally instead of vertically

###1. CSS Columns: 1 declaration
```
ul {
  columns: 3;
}
```
![Layout using CSS columns](https://dev-to-uploads.s3.amazonaws.com/i/rsv8kppo3gr91jj8fber.png)

###2. Inline-block display with calc(): 2 declarations
```
li {
  width: calc((100vw / 3) - 20px);
  display: inline-block;
}
```
![Layout using inline-block and calc](https://dev-to-uploads.s3.amazonaws.com/i/m50tyyid8qarpif6fyb7.png)

###3. CSS Flexbox: 1 declaration
```
ul {
  display: flex;
}
```
![Layout using CSS flexbox](https://dev-to-uploads.s3.amazonaws.com/i/bo8peqvfgsbhsfr398y4.png)

###4. CSS Grid: 2 declarations
```
ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
```
![Layout using CSS grid](https://dev-to-uploads.s3.amazonaws.com/i/g6pih82zhxwlb37jet17.png)

#Keep it simple. Don't feel stupid.

##Want to practice? Here's two free resources.
1. [FrontEndMentor.io](https://frontendmentor.io)
2. [FreeCodeGame.com](http://freecodegame.com)
My Tags Missing Upon Going Back to dev.to Front Page
Tags: meta
Published: 2020-07-29 23:12:57

when I load up the dev.to front page, my tags show up correctly:

https://imgur.com/a/jRBETVe

I click into an article, read it, and come back out, my tags are gone:

https://imgur.com/a/jia09RY

If I reload the page, they are shown correctly again.

Anybody else having this issue?

(Also inline image in the post editor apparently doesn't work for me for some reason. When I put the image links above into the inline image tag like \!\[my tags\]\(https://imgur.com/a/jRBETVe\), I get broken links to res.cloudinary.com.)
If you would create a small social network in 2020 what stack it would have?
Tags: discuss, webdev
Published: 2020-07-29 23:06:39

Hey everyone 👋

Let me ask you a question. Imagine that you are a full-stack developer and you are going to create a social network for relatively small group of people to sharing pictures and chat (I know how is sounds like, but it's not an Instagram or something like that 🙂). You already have a web-design (PC and mobile versions) with good specification and a some front-end (just HTML/CSS with basic JS functionality like tabs, modals and so on).

What stack do you prefer for backend if you needed to build a web-version and a mobile app?

My choose is MongoDB for database to store a posts and comments. Laravel for sloving the main backend development tasks. Vue.js - for the frontend. For mobile app I prefer to try Dart and Flutter for building an app. It's cool that you can build iOS and Android app either using just one language. 

What would be your choice?
Deploying Vue | Quasar App on Netlify
Tags: beginners, vue, netlify, quasar
Published: 2020-07-29 23:03:28

Hi Dear,
So today, I will walk you through on how to Deploy your awesome Vue or Quasar App on netlify with either of the two methods

## Table Of Contents
 * [Deploy a Built Directory](#chapter-1)
 * [Deploy From Version Control System ](#chapter-2)

###Deploy a Built Directory 😊 <a name="chapter-1"></a>
Since Netlify (as at the time of writing this blogs), hosts our static files; html, css etc. You could manually run your Cli build command, to generate the static files, which would be stored in a dist/ directory. (depends on output path though).

 ```javascript
// For Vue Cli
npm run build 
OR
yarn build

// For Quasar Cli
quasar build 
```
Once this is done, a `dist` folder is generated for you. So all you need do, is just to visit  [app.netlify.com/drop](app.netlify.com/drop) 
Open your Explorer ( where you project dist directory is found on your machine ) side by side as with you browser, Drag the dist folder and Drop on the space provided by Netlify. Trust me, it's that simple.

> NB: If you choose to Deploy this way, then each time you make a change, you will have to Drag and Drop all over again to update.

###Deploy From Version Control System 👽 <a name="chapter-2"></a>
Lets say you don't Like stress that much. A version control system, could be your Github, Bitbucket, GitLab. Once you open the Netlify deploy section, you will see 'New Site from Git':

1. Click on the button
2. Link your preferred version control system
3. Authenticate
4. Choose on the Repo you wish you publish
5. Enter the Build command (as stated earlier) 
6. Enter your Output directory

###    Congratulations
    You have automatically merged your Repo to Netlify, so each time you make 
    a push to master. Netlify builds your app and updates it for you.


Thanks.
{% user mrbrowny %}
Donating Profits of the Podcasting Book
Tags: podcast, writing
Published: 2020-07-30 12:37:40

---
title: Donating Profits of the Podcasting Book
published: true
date: 2020-07-29 22:58:00 UTC
tags: podcast, writing
canonical_url: https://blog.openpodcast.xyz/donating-proceeds-of-the-podcasting-book/
---

 ![Donating Profits of the Podcasting Book](https://images.unsplash.com/photo-1562600812-175b3058e3a8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ)

I will be donating a part of the "What's the Deal With Podcasting?" profits. I will be donating $1 for every sale of the eBook and the bundle.

Did you know you can subscribe to the Open Podcast mailing list to get podcasting tips - [Click Here to Subscribe Today](http://eepurl.com/gj5h-P)

### Occur

The money will go to [Occur](http://occurnow.org/). The organization helps small businesses. People of all ages get technical training. Children learn programming skills such as Python. Adults learn how to use programs like Excel or QuickBooks. The older generations learn how to use smartphones and other similar technology. The organization is a local organization in Oakland.

### Others

If anyone from an organization thinks that their members will benefit from the book, they should reach out to me. I will create a discount code for the organization.

Anyone who contacts me personally will be given a discount code of their own, no questions asked.

### Accountability

I will be streaming the donation process. Every time I donate money to the organization, I will stream that process. I have created a process to track the sales of the book and the bundle. I used Zapier to connect Gumroad to Google Sheets. Every time a sale is made a row is added to the [Google Sheet](https://drive.google.com/drive/folders/1DTspRuJEKbU7UFniMkRHylnBeS_xhUo_?usp=sharing). People can keep track of how many sales of the book are made. Which is the amount of money that I will donate.

### Conclusion

In times like these, I know every little bit helps. I’m glad to be in a position to help members of my community. Especially, if it helps to stimulate the economy. At the same time, I want anyone who wants to read the book to have that ability.

--

The book is available for [purchase here](https://blog.openpodcast.xyz/podcast-book/).
#042 Kubernetes - Services 2
Tags: kubernetes, devops, tutorial
Published: 2020-07-29 22:54:56

# Introduction
![intro](https://media1.tenor.com/images/f15057a41413c960db1f328ca5a732e3/tenor.gif?itemid=6203225)
this is part 42 from the journey it's a long journey(360 day) so go please check previous parts , and if you need to walk in the journey with me please make sure to follow because I may post more than once in 1 Day but surely I will post daily at least one 😍.

And I will cover lot of tools as we move on.
***

# Lab
![mad](https://media1.tenor.com/images/4800838e793768298c7d6132734abca4/tenor.gif?itemid=11957205)

if you already have the DevOps folder just pull it and you will get the new files.
if not go and clone the repo

first let's explain our configuration file.

```yaml
apiVersion: v1
kind: Service
metadata:
  name: my-nginx
  labels:
    run: my-nginx
spec:
  ports:
  - port: 80
    protocol: TCP
  selector:
    run: my-nginx
```

here we are going to create an simple service that we can access from other pod (I was preparing a bigger example but my country have problems with internet so I change the lab idea to smaller one , but will reach same thing that I need to explain in this part) .

let's create our pod
![apply](https://dev-to-uploads.s3.amazonaws.com/i/bdb2oabcr6y27baajaba.png)
```bash
kubectl apply -f nginx-svc.yaml
```
apply will behave same as create but apply will record the change so technically it's better to use.
![get](https://dev-to-uploads.s3.amazonaws.com/i/26itepf5avuujdxwsx4t.png)
```bash
kubectl get svc my-nginx
```
svc is the shortcut of services... 
we can see the ip is 10.99.76.0 keep it in mind
![busybox](https://dev-to-uploads.s3.amazonaws.com/i/v3wxgvqa5z4kikd4n1rt.png)
```bash
kubectl run curl --image=radial/busyboxplus:curl -i --tty
``` 
this will create a pod for us in imperative way , for busybox image and will run the shell for us.
```bash
nslookup my-nginx
```
>nslookup is a network administration command-line tool available in many computer operating systems for querying the Domain Name System to obtain domain name or IP address mapping, or other DNS records. The name "nslookup" means "name server lookup".Wikipedia

my-nginx is the name we specify in the yml file "name: my-nginx" we can see that we are able to access the nginx service also we can see the ip which is the same 10.99.76.0
Consuming API's
Tags: 100daysofcode, javascript
Published: 2020-07-29 20:03:38

I'd want to interact with my API from a webpage which creates the need to understand how to consume my API. I'll start by logging out the data on the console as I build up on rendering data as web content. I'll be using axios library to fetch data from the API. To begin with, I added and linked an index.html and index.js file. Then included the axios library.
```html
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
```
I also created a self invoking function in index.js and used async/await to await a promise.
```javascript
(async () => {
  const response = await axios({
    url: 'http://localhost:4000/habittracker/habits',
    method: 'get'
  })
console.log(response);
})()
```
This resulted in a [CORS error](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin). 

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

To fix that I installed cors: `npm install cors` , included it in my app.js file and used it as middleware.
```javascript
const cors = require('cors');
app.use(cors());
```
Data is now logged out to the console:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0wm81a7xap2w9rqwnl1m.png)

There's a lot of meta data in the console that I'm not interested with at the moment; to retrieve an array of habits only, I'll  update the response in console.log with:
```javascript
console.log(response.data);
```
This leaves me with just habits on the console:

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


_That's it for Day 13_
Day 184: Fall Please
Tags: hiphop, code, coding, lifelongdev
Published: 2020-07-29 22:28:35

_liner notes_:
- Professional : Pretty chill day. The meetup took more out of me than I expected. haha. Filled out the post event recap form. Got to sit in on a talk prep session with a team member that's working on a presentation. Helped them out with an issue they where having in a demo with Firebase. Spent rest of the day working on a bug.

- Personal : Last night, I figured that the way to solve the issue I was having with resizing the canvas in my side project is to create a replica using just HTML, CSS and JavaScript. This way, I can leave the canvas the right size for broadcasting and have the replica to show the user and be resized to fit their screen.

![Bariloche, Argentina countryside view from a dock with water, a marsh, a house and mountains in the distance](https://dev-to-uploads.s3.amazonaws.com/i/s104rc2xzlcf5mu840rp.png)

Taped up the van's window coverings where the fabric came loose because the spray adhesive didn't hold. Put them up back in the van and asking that they don't fall, please haha. Going to work on the side project more. I want to get it to the point where I can start streaming a feed of the dashboard, switch scenes and have that reflect in the stream. If I can get that done early enough, I will work on the recording of the radio show and submit it to the station.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube yAEiIF5parQ %}
Intro to React's Size Matters
Tags: react, reactnative, javascript
Published: 2020-07-29 22:26:56

I am making a small news app that should should be able to display correctly on a mobile device, tablet etc. But having never done this before or any app for different sized devices, I was not sure how to proceed until I found Size Matters for React Native.

This tool allows you to make your scaling a lot easier. Various features include scaling functions and ScaledSheets as well as allowing to change the default guideline sizes in an .env file.

As shown in the [README](https://github.com/nirsky/react-native-size-matters) for Size Matters

**Scaling Functions:**

import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
```
const Component = props =>
    <View style={{
        width: scale(30),
        height: verticalScale(50),
        padding: moderateScale(5)
    }}/>;
```
- scale(size: number)
Returns a linear scaled result of the provided size, based on device's screen width.

- verticalScale(size: number)
Returns a linear scaled result of the provided size, based on device's screen height.

- moderateScale(size: number, factor?: number)
In cases where not everything should be linear where normal scale will increase the size by +2X, moderateScale will only increase it by +X(any number)

**ScaledSheet**
ScaleSheet Takes the same stylesObject a regular StyleSheet will take, plus a special (optional) annotation that will automatically apply the scale functions, verticalScale or ModerateScale on size. ModerateScale can also have a optional factor.

```
import { ScaledSheet } from 'react-native-size-matters';

const styles = ScaledSheet.create({
    container: {
        width: '100@s', // = scale(100)
        height: '200@vs', // = verticalScale(200)
        padding: '2@msr', // = Math.round(moderateScale(2))
        margin: 5
    },
    row: {
        padding: '10@ms0.3', // = moderateScale(10, 0.3)
        height: '50@ms' // = moderateScale(50)
    }
});
```

So far I used moderateScale for my font sizes with four different sizes, with small and regular having a factor difference of just 2 and a difference of 9 for the two larger ones. 
```
const fontSize = {
    small: moderateScale(12),
    regular: moderateScale(14),
    large: moderateScale(20),
    extralarge: moderateScale(29)
} 
```
I might experiment and add more features from this utility belt such as a ScaledSheet. I highly recommend using Size Matters for apps that will run on different sized devices. And special thanks to nirsky for authoring it.

**References**
- https://github.com/nirsky/react-native-size-matters
Create Cron Jobs In Wordpress
Tags: wordpress, php
Published: 2020-07-29 22:02:44

A cron job allows you to automatically set a function to run at a set time or interval. Wordpress comes with an in-built function wp_schedule_event(). Wordpress Schedule Event.

The function <code>wp_schedule_event()</code> allows you schedule a hook to run an action to schedule a function to run at a set interval

<pre> function myprefix_custom_cron_schedule( $schedules ) {
    $schedules['every_six_hours'] = array(
        'interval' => 21600, // Every 6 hours
        'display'  => __( 'Every 6 hours' ),
    );
    return $schedules;
}
add_filter('cron_schedules','myprefix_custom_cron_schedule' );

//Schedule an action if it's not already scheduled
if(!wp_next_scheduled('myprefix_cron_hook')) {
    wp_schedule_event( time(), 'every_six_hours', 'myprefix_cron_hook');
}

//Hook into that action that'll fire every six hours
add_action( 'myprefix_cron_hook', 'myprefix_cron_function' );
//create your function, that runs on cron
function myprefix_cron_function() {
    //your function...
}
</pre>

This script will run every six hours which isn't a big hit to the server as all it will do is check the current hours before deciding to run the script, but now we can have a script that runs every six hours. If you want to run this script at a certain time then you need to change this wp-cron to run hourly and check both the day and the time is what you want it to be.
Fake Bank - React Native
Tags: react, project, reactnative
Published: 2020-07-29 21:51:02

---
title: Fake Bank - React Native
published: true
description: My second React-Native project
tags: react,project,reactnative
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gjklko7xnlh2gk4yikpg.png
---

The purpose of the application is to teach kids, and those who want to learn, how transactions with a bank account would work. Currently not done, but if you have any tips, I would appreciate it.

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