teleren/devto huggingface dataset:
The single responsibility principle in nutshell
Published: 2020-03-28 23:02:52

Of all the SOLID principles, the Single Responsibility Principle (SRP) would be the least well understood. That’s likely because it has a particularly inappropriate name. It is too easy for programmers to hear the name and then assume that it means that every module should do just one thing.
I discussed all the SOLID principles here, you can check it out!
{% link https://dev.to/ibrahimshamma99/the-solid-principles-in-designing-software-476c %}
After finding the suitable definition from the Design Patterns: Elements of Reusable Object-Oriented Software aka (The gang of four) which is:
#### A module should have one, and only one reason to change.
##### Let's have an example 
Suppose we are working on an imaging app that creates huge Geo images that would be 2GB of size or even more, we now stitch multiple satellite images to get one huge image then we need to save the image in the available hardware, the implementation would be:
The first thought would be to store image we convert the image to the demanded format then we store it in the local machine.
That would be like this:
```js
class StoreGeoImage {
    
    function converttoTiff(){
        //convert the image to tiff format
    }

    function FileStore(){
        //Store the image in the local machine
    }
}
```
Although this might work out this implementation violates the SRP, this class has more than one reason to change 
### What if we need to save the image in SVS format?
### What if we don't want to store the image on local machine but instead we want to stream the image to the cloud?
After looking at those assumptions 
we end up with an implementation like this:

```js
class ConvertGeoImage {
    
    function converttoTiff(){
        //convert the image to tiff format
    }
    function converttoSvs(){
        //convert the image to svs format
    }
}

class Store(){
    function localStore(){
        //Store the image on the local machine
    }

    function cloudStore(){
        //Store the image on the cloud
    }
}
```

## Conclusion: design improves with domain enlightenment

When we understand the domain, at an architectural level:

| Conclusions                                  |      
|----------------------------------------------|
| we’re able to identify the actors of change (convert & store)  | 
| we’re able to split out code into subdomains(two independent classes instead of one)|    
| we’re able to implement package by module (module is just a file of code)   |
Run aws-shell by docker
Tags: aws
Published: 2020-03-28 22:51:14

---
published: true
title: 'Run aws-shell by docker'
cover_image: ''
description: ''
tags: aws
series:
canonical_url:
---

## TL;DR

Set this alias.

```shell
alias aws-shell='docker run --rm -it -v "$HOME/.aws:/root/.aws" hiroga/aws-shell:latest'
```

## Details

As of 2020-03-29, `aws-shell` installed by Homebrew does not work.  
To avoid the dependency problem, I run my aws-shell by docker.

Dockerfile is here.  
https://github.com/hiroga-cc/docker-images/blob/master/aws-shell/Dockerfile

## Issues

It runs creating index per invoke. I want to avoid it but do not have any good ideas.
How have many without a college education broken into the industry? 
Tags: discuss, career, engineering
Published: 2020-03-28 21:53:34

---
title: How have many without a college education broken into the industry? 
published: true
description: 
tags: discuss, career, engineering
---

I was watching an Engineering AMA panel (shout out to a great learning resource for newcomers called [MASTERMND](https://www.mastermnd.io) for hosting it) and one of the questions asked was how many without formal education have broken into the tech industry? As someone with a non-traditional background, it was really awesome and encouraging (especially for ones trying to break in to the industry) to see so many who didn't go the formal education route. I am very curious as to what other stories are out there, so I leave it with the wider Dev audience: What's your story?
5min JS - dynamic placeholder text
Tags: design, javascript, webdev, beginners
Published: 2020-03-28 20:00:26

## Placeholder text how you want it to be

This is an older project of mine I just updated and wanted to take the opportunity to finally try out dev.to's video function.

## What it is addressing

Rather than generating static placeholder text, this little helper generates the placeholder text dynamically, allowing you to:

- account for differences in dynamic content
- easily switch between development & "real" content
- check loading behaviour

[YouTube mirror](https://youtu.be/oLYCtHf1njc)

[npm](https://www.npmjs.com/package/fillr)
Unable to POST array of objects in axios
Tags: react, axios
Published: 2020-03-28 19:46:20

---
title: Unable to POST array of objects in axios
published: true
description: why this post method is showing data: {key: "data"} .  ?
tags: #reactjs #axios
---
why this post method is showing data: {key: "data"} ? Anyone ?

```
handleUpload() {
    const companyuid = this.props.match.params.id;
    var raw = 
                {
                    "data":[
                                {
                                    "type": "CRN",
                                    "value": this.state.cr_number,
                                    "files": [this.state.UUID_CRN]
                                },
                                {
                                    "type": "VRN",
                                    "value": this.state.vat,
                                    "files": [this.state.UUID_VAT]
                                },
                                {
                                    "type": "CON",
                                    "value": this.state.vat,
                                    "files": [this.state.UUID_VAT]
                                }
                            ]
                };

    let AUTH_TOKEN = window.localStorage.getItem("ACCESSTOKEN");

    fetch(
      "http://xxxx/documents",
      {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          Authorization: Bearer ${AUTH_TOKEN}
        },
        body: JSON.stringify(raw)
      }
    )
      .then(response => response.json())
      .then(responseJson => {
        console.log(responseJson);
      })
      .catch(error => console.log("error", error));
  }
```
I need to discuss regarding RESTful API for accessing oracle database tables.
Tags: restapi
Published: 2020-03-28 19:26:06

Hello All,

I need to discuss regarding RESTful API for accessing oracle database tables.
API was created using Oracle Rest Data Services (rest data enable at SQL developer).
I am getting error : 401 unauthorized while doing query through post man as below:

GET http://localhost:8080/ords/autodemo2/metadata-catalog/

However below is working fine (code 200 OK):
http://localhost:8080/ords/autodemo2/open-api-catalog/

Not sure why metadata query is facing authorization issue while swagger(open API) one is giving response without issue at postman.

I tried for other schema alias autodemo and here both are giving proper response:
http://localhost:8080/ords/autodemo/metadata-catalog/ 
http://localhost:8080/ords/autodemo/open-api-catalog/

Thanks,
Rajneesh
How to equalize your rows in react
Tags: react, frontend, library, javascript
Published: 2020-03-28 19:24:14

---
title: How to equalize your rows in react
published: true
description: react-equalize: How to Equalize the height of your elements in your page
tags: react, frontend, library, javascript
canonical_url: https://blog.m4x.io/2020/how-to-equalize-your-rows-in-react/
cover_url: 
---

__Originally published on [blog.m4x.io](https://blog.m4x.io/2020/how-to-equalize-your-rows-in-react/)__

# How to equalize your rows in react.

As frontenders, sometimes when we are building grids we run into a very annoying but common issue, **Unalignment**. When the items of a grid are not aligned correctly it is time for trouble.

As human beings, we are very good at detecting these irregularities. An issue like this immediately jumps into our attention.

The problem is easier to grasp with an image so let me show you in a glance what we are talking about.

![react equalize problem description image](https://raw.githubusercontent.com/neomaxzero/react-equalize/master/assets/explanation-problem.png)

I hope that the problem is now more clear. I was looking into any library that would help me on my quest since I'm working in react but no luck.

In vanilla javascript, I have done this a bunch of times already but it was gonna be the first time I do this in React.

I've created a very small library to solve this and I hope you'll find it useful.


<a href="https://github.com/neomaxzero/react-equalize" target="_blank">
    <p align="center">
        <img src="https://github.com/neomaxzero/react-equalize/blob/master/assets/react-equalize.png?raw=true" alt="react-equalize"  style="width: 250px; padding-top: 16px"/>
    </p>
</a>


## How it works?

First, you need to specify what's going to be the grid or element you want this component to act on.

This wrapper container will keep track of the position of the elements you want to equalize the height.

Secondly, with the _Equalize_ component, you'll have to wrap the components you want to have on the same line.

**Equalize will get the height of all the elements that are on the same line and will apply the correct height to it**.

I found this solution worked out quite well at the beginning but then I realized there was one small issue.

If the elements of the lists changed it, the state of the heights needed to be reset. To do this, I added a prop to the container to which you can send an array that would trigger a re-render of the layout.

Problem solved!

Let me know what you think, maybe you also have a use case I can support. I'm more than happy to help!

You can check out the library here: [React-equalize](https://github.com/neomaxzero/react-equalize)
Undefined vs Null in JavaScript
Published: 2020-03-28 19:08:24

Maybe you don't need to read all the article, i just can show you this:

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

## undefined
**undefined** is a property of the global object.

It is a primitive value: undefined. 

It is treated as falsy in boolean expressions.

### undefined can be:

- the type of a variable that has not been assigned yet.
- the return value of a method or statement if the evaluated variable does not have an assigned value.
- the return value of a function, if no value was returned.

You can also explicitly set a variable to undefined: (don't do it)

```javascript
const a = undefined; //accepted, but can lead to confusion!
```

___

## null
**null** is an intentional absence of any object value. 

It is a primitive value: null.

It is treated as falsy for boolean operations.

The value null is written with a literal: null. 

null is not an identifier for a property of the global object. 

Null expresses a lack of identification, indicating that a variable points to no object. 

For Example, In many API, **null** is often retrieved in a place where an object can be expected but no object is relevant. 

- null is an empty or non-existent value.
- null must be assigned.

Also, undefined and null are two distinct types: 
- undefined is a type itself (undefined) 
- unfortunately, null is of type object! (you can check this article to know more about it https://2ality.com/2013/10/typeof-null.html).

Unassigned variables are initialized by JavaScript with a default value of undefined. 

JavaScript never sets a value to null,  that must be done by the developer.

## What do we get if we compare null and undefined with '==' and '===' operators?
```javascript
console.log(null == undefined); // true
console.log(null === undefined); // false
console.log(typeof null); // "object" (not "null" for legacy reasons)
console.log(typeof undefined); // "undefined"
```

## Arithmetic Operations
Another difference is when we try to perform the arithmetic operation +
- with null results as an integer
- with undefined results is NaN

```javascript
console.log(3 + null); //3
console.log(3 + undefined); //NaN
```

## in Conclusion

**undefined** typically means a variable has been declared, but not defined.

**null** is an assigned value, It means no value on purpose.
git commit -a
Tags: todayilearned, git
Published: 2020-03-28 19:04:04

Today I learned that you can add `-a` to a commit command to automatically stage files that have been modified and deleted.

Why write two lines:
```
git add .
git commit -m "msg"
```
When you can write one:
```
git commit -m "msg" -a
```

**NB**: new files you have not told Git about are not affected.
Front-End-Snippets E01: Is window and document object the same?
Tags: javascript, beginners
Published: 2020-03-28 18:43:17

For a very long time, the most basic and important Front end web development concepts eluded me and scared me away to a point where I started to skip these concepts and hide my head in the sand. All these concepts came to haunt me later on when I went to web developer interviews. The interviews were an eye-opener and I realized there is so much that I do not know yet.

And this brings me and you to this first post of a larger series where I would share snippets of concepts used in Front end development process. These snippets are short, concise posts that will hopefully get you started with some of the most confusing parts of Front end development.

Starting this series with this week’s topic: **Is window and document object the same? If not, how are they different?**
Let’s dive in.

#Window Object

Window is basically an object which is created when you run JavaScript in a browser.
But what does this window object represent? It represents the current window of the browser. If you open 10 tabs, each tab would have its own window object.

Now let’s see it in action. Open your developer console, type window and hit enter. You’d get something like this:

```
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
```

Expand the object and you’d find a lot of familiar functions that you use on a more frequent basis like setTimeout or setInterval. The window object shares all of its properties globally which means you do not need to type window.setTimeout to use it. Simply calling setTimeout with the required arguments would do the job.

Now, this window object does not belong to JavaScript, it belongs to the browser so it would contain all the web APIs that you can leverage. Navigation, setTimeout, setInterval, history, audio, video to name a few.

#Document

The Document object is one of the properties of a window object. The Document is what renders on the screen. If you crack open the document object, you’d find the entire Html tree that you see on the webpage in the current window.

Open the console again and run window.document and you can see the entire Html tree for the webpage you are on. Here is a screenshot from the dev.to homepage:

![output of window.document command in browser console](https://raw.githubusercontent.com/pragyes31/images-repo/master/window_document_dev_to.png "output of window.document command in browser console")

Pretty neat stuff right! And this is all I have for this post. Tune in for the upcoming posts.

Before I go, shower some love if the post helped you in any way, share the feedback in the comments section and if there are any web development related concepts that should be demystified, let me know and I’ll write about it in the future.
Setting or Scaling Native Resolution On Mac
Tags: mac, productivity, tools, apple
Published: 2020-03-28 18:09:10

---
title: Setting or Scaling Native Resolution On Mac
published: true
date: 03/28/2020
tags: mac,productivity,tools,apple
canonical_url: https://www.devsurvival.com/setting-native-resolution-on-mac/
description: setting native resolution on mac.
cover_image: https://www.devsurvival.com/static/d4b78054aa0bc5f3cbfc60ee38a4677c/1c72d/macbook.jpg

---
  
## Defaults and Settings

If you own a mac or have previous experiences with one then you probably know that Apple offers a list of options for [configuration](https://support.apple.com/guide/mac-help/change-your-displays-resolution-mchl86d72b76/mac) the resolution of your display. You can choose “default for display” or select from a list of scaled options: Ranging from “Larger Text” to “More Space”. If you hover over an option, you will see the resolution that it scales to.

  

[![mac display options](https://www.devsurvival.com/static/bce18eab17344cee86227a06e3134ad0/fcda8/displayoptions.png "mac display options")](/static/bce18eab17344cee86227a06e3134ad0/9685e/displayoptions.png)

  

I own a [macbook pro 16”](https://www.apple.com/macbook-pro-16/) (you can call me spoiled or lucky :P), and the native resolution for this model is 3072 x 1920. One day, I went to scale the resolution to the native resolution, but could not find an option to do so! It seemed really odd to me that Apple does not offer the option to adjust the resolution to match the native display resolution. Even if there are only a select few who will find it useful, they should still make it available.

## Display Menu Jumps In To Save The Day

Display Menu is an app that lets you configure your macbook display with any resolution. With this tool, I was able to quickly set my screen resolution to the native resolution! But it was…ahh not all great.

  

The native resolution turns out to be too small for my eyes, and I have almost 20/20 vision. However, everything on the screen was crispier and there was more screen real estate.

  

[![macbook pro 16" native resolution](https://www.devsurvival.com/static/97f64c738b9c7028ee5678fa28d8d443/fcda8/newdisplay.png "macbook pro 16" native resolution")](/static/97f64c738b9c7028ee5678fa28d8d443/f581c/newdisplay.png)

  

## Download and Usage

1. Download the app from the [mac store](https://apps.apple.com/us/app/display-menu/id549083868?mt=12)
2. Launch Display Menu
3. The icon should added to the top right corner of the screen.
4. Click the icon and adjust your resolution.

If you have any comments or questions, please submit below.
Blog post writing app demo
Tags: showdev, writing
Published: 2020-03-28 18:08:52

Hello Devs 👋🏼


I want to showcase an app I've been working on for the past few weeks. It aims to solve the pains I have when writing my blog posts:

- I can't remember the Markdown syntax to create a link or image. Is it () or [] first? 🤔
- Different post destinations use different formats; HTML, Markdown, etc.
- I don't like to use apps that don't respect my privacy, e.g., Grammarly.

I made a video tour of my work so far; bare with me please since I'm terrible at video 😅

{% youtube NICjX4w85jg %}

# A brief summary:

A **blog post writing app** to **write your content once**, and **publish it anywhere** you want.

Main features:
 - No specific syntax required, write with common text processor tools 👌🏼.
 - Grammar and insensitive checks out of the box; nothing leaves your browser 🖍.
 - Automatic browser storage to avoid losing your content 🔄.
 - Easy and intuitive image uploads 🌠.
 - Post **directly to DEV.to as a draft** 😱.
 - Export as Markdown or HTML ⬇️.

I'd like for this app to also help me follow a template or style, which I'm still trying to find. I'll see how to add that in the near future.

Any feedback is really appreciated! 🙏🏼 And if you want to try it out, let me know! 

**UPDATE: My app has a name! It's called Nina, like my dog 🐕.**

Thanks a lot 💙
WHATS WRONG WITH THIS I NEED HELP
Published: 2020-03-28 18:02:21

package com.bornander.circles;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.util.ArrayList;
import java.util.Random;

import javax.swing.JFrame;

public class Program extends JFrame {

    private static Random rnd = new Random();

    private static class Circle {
        public float x;
        public float y;
        public float r;
        public Circle(float x, float y, float r) {
            this.x = x;
            this.y = y;
            this.r = r;
        }
    }

    private Color[] colors = new Color[] {
            Color.RED,
            Color.BLUE,
            Color.BLACK,
            Color.WHITE,
            Color.MAGENTA,
            Color.WHITE
    };

    private ArrayList<Circle> circles = new ArrayList<Circle>();

    public Program() {
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(800, 600);
        setVisible(true);
        circles.add(new Circle(400, 300, 200));
        addMouseListener(new MouseListener() {

            @Override
            public void mouseClicked(MouseEvent arg0) {
                addCircle();
            }

            @Override
            public void mouseEntered(MouseEvent arg0) { }

            @Override
            public void mouseExited(MouseEvent arg0) { }

            @Override
            public void mousePressed(MouseEvent arg0) { }

            @Override
            public void mouseReleased(MouseEvent arg0) { }
        });
    }

    private void addCircle() {
        Circle last = circles.get(circles.size() - 1);
        float newRadius = 0.8f * last.r; // Next circle is 80% of last
        float delta = last.r - newRadius;

        float x = (rnd.nextFloat() * delta) * (rnd.nextBoolean() ? 1.0f : -1.0f);
        float maxY = (float)Math.sqrt(delta*delta - x*x);

        float y = rnd.nextFloat() * maxY *  (rnd.nextBoolean() ? 1.0f : -1.0f);
        circles.add(new Circle(last.x+x, last.y+y, newRadius));

        repaint();
    }

    @Override
    public void paint(Graphics graphics) {
        Graphics2D g = (Graphics2D)graphics;
        g.setColor(Color.GREEN);
        g.fillRect(0, 0, getWidth(), getHeight());

        int index = 0;
        for(Circle circle : circles) {
            g.setColor(colors[(index++) % colors.length]);
            int x = (int)(circle.x - circle.r);
            int y = (int)(circle.y - circle.r);
            int d = (int)(2 * circle.r);
            g.fillOval(x, y, d, d);
        }
    }

    public static void main(String[] args) {

        Program program = new Program();

    }

}
Lockdown Programming Challenges: 1. Password Strength Indicator
Tags: beginners, kata, programming
Published: 2020-03-28 17:58:59

---
title: Lockdown Programming Challenges: 1. Password Strength Indicator
published: true
description: Develop your skills with these programming challenges
tags: #beginner #kata #programming 
---
Whether you're just starting programming or are a seasoned pro, the best way to keep your skills up-to-date is to practice.

Over the next few days and weeks I'm going to post a series of programming challenges that you can use to learn a new language, develop your clean coding skills or just while away the hours under lockdown. They will range from simple logic to advanced integrations with external services.

Remember this isn't competition and are there are no prizes, just the knowledge that you have learned something new. Kudos will be earned if your try the challenges in a new programming language or programming style (functional etc) or can write tests to show them working!

Feel free to post links to your code in the comments below and discuss different approaches and what you learned. It would be great to see how you get on. 

Stay safe everyone!

## Challenge 1. Password Strength Indicator

Create a program that displays the complexity of a given password using the following rules:

* A weak password contains only letters and has less than 8 characters.
* A medium strength password contains numbers and letters and has less than 8 characters.
* A strong password has numbers, letters and these special characters !%:&() and  has between 8 and 10 characters.
* A very strong password has numbers, letters, the special characters !%:&() and has more than 10 characters.

### Notes:

Allow the user to input their password and display the password strength on the screen.

### Advanced:

Display the password strength as each character is entered by the user.