teleren/devto huggingface dataset:
VIP Architecture in Swift with easy explanation
Tags: swift, ios, architecture
Published: 2020-10-25 20:30:41

Recently I joined a project where the architecture follows the Clean-Swift VIP Pattern. This article is an overview and some thoughts from a mobile developer’s perspective who have NEVER touched the VIP architecture before. This article will show the basic concepts of VIP Architecture and how are they work, hope to help someone who puts their hands on this like me.


## Why VIP Architecture
As a government project, there are several developers working on the same repo, and there are many PR and merging happening every day. The VIP architecture is more suitable for a project if:

1. Many developers are working on the same repo
2. Time is quite tight, there are deadlines for each of small functions/features
3. Testing more and code less

## Components
VIP architecture is consist of three core components: 
* `ViewController`: Here the ViewController is the UIViewController we saw many times in development, but slightly different, ViewController now interact with users' input (tap button, input text and so on) and rendering views.
* `Interactor`: Business logic, this is the place we normal do some jobs, such as call an API to get a list of products.
* `Presenter`: Validate the data and rendering the views. Here Presenter doesn't directly draw the views on the screen, instead, it will call ViewController to do that by passing the data.
There are also some other components such as Worker, Router and etc which we will talk about later. 


## Scene and VIP Circle
The workflow of VIP pattern is working like this:
> ViewController → Interactor → Presenter → ViewController
![](https://needone.app/content/images/2020/10/image-1.png)

In VIP Architecture, the app consists of many `scenes`, and each `scene` follows a VIP cycle. `Scene` here refers to business logic. For example, a login is a `scene`, showing a list of products on the screen. There are no specific rules about what a `scene` is, as every project is different, we can have as many as we want for each project.


## Data Flow
The data flow of VIP Architecture is unidirectional.
1. ViewController get users' input and pass the data to `Interactor` as an request. 
2. Then `Interactor` process (such as verify users' data with an API call) and pass the data to Presenter as an Response.
3. `Presenter` process (such as data validation, i.e phone number, email and etc) and pass the data to ViewController, in other words, rendering on the screen.


## What is Next:
In the coming article, let have a simple example to get more details from a code level prospective.

## Reference
* http://clean-swift.com
* https://needone.app/vip-architecture-in-swift/
I Use Netlify’s Continuous Deployment, and You Should Do the Same
Tags: netlify, webdev, git, github
Published: 2020-10-25 20:27:07

As I wrote some days ago in a [post](https://francoscarpa.com/notes/cd/), my website now uses [Netlify’s continuous deployment](https://www.netlify.com/products/workflow/).

When I first started using Netlify to host my website, [francoscarpa.com](https://francoscarpa.com/), I saw different methods to upload the static files that made it up. The first way was the classic [drag and drop](https://app.netlify.com/drop). I could move files to Netlify’s website and get a published website in seconds. It was my original approach.

Then, [Netlify CLI](https://docs.netlify.com/cli/get-started/) reached my ears. I integrated Netlify with the terminal of my MacBook Pro. This way, I could use simple commands launched from my machine without relying on the Web service to publish the website. I thought this method could be my default one, but then version control entered the scene.

Since I started working for my actual company, I have been using both Git and Team Foundation Version Control as the version control systems. I already knew the importance of VCSs before then, but I never had the chance nor the reason to use them in real life before. Netlify’s integration with GitHub encouraged me to integrate version control in my projects, too.

I created a [GitHub repository](https://github.com/francoscarpa/francoscarpa.com) to hold all of my website’s source code, including the `package.json` file, which is mandatory to let Netlify know which dependencies your project has. Then, I configured Netlify to link my website to that repository so that every time I push changes to GitHub, Netlify runs a build on that code and publish the resulting outcome on the fly. You need to specify which build command Netlify needs to run to start the compilation process. In my case, it’s `npx @11ty/eleventy` since I use the [Eleventy](https://www.11ty.dev/) static site generator.

This modus operandi has two benefits:

- I make changes locally and push them to a remote repository, so I always have a backup copy of my project securely stored online.
- I don’t have to run a second command to compile the source code locally and publish it to Netlify since Netlify itself does the work for me.

[Here](https://francoscarpa.com/imgs/cd/1.png) you can see the latest deploys I made so far, while [here](https://francoscarpa.com/imgs/cd/2.png) and [here](https://francoscarpa.com/imgs/cd/3.png), I show you the settings I use for the build process. I highly recommend you to configure Netlify to use continuous deployment since it’s a great way not only to speed up your workflow but also to have a backup copy of your precious source code.
2D array peak - JS (reduce function)
Tags: javascript, discuss, tutorial
Published: 2020-10-25 20:24:16

I have taken couple days to learn what is [Reduce, UseReducer](https://dev.to/mingyena/react-hooks-usestate-and-usereducer-cheat-sheet-for-developers-who-don-t-know-redux-44fn) functions (JS, React) so I was thinking maybe I can find something fun to code.

No small chat, here is the question - 

```javascript
2-D Peak Finding

 - c - - -
 c - e - z
 - r s u x
 - r - a z
   
In the 2d array depicted above, a is a peak, if a >= b, a >= d, a >= e, a >= c, find the peak array.

Output should be 'a'

var arr = [ [ '', 'c', '', '',''], 
        [ 'c', '', 'e', '','z' ], 
        [ '', 'r', 's', 'u', 'b' ], 
        [ '', 'h', '', 'a','z' ] ];
```

##1. How to compare
``'a'>'b' === false`` , ``'b' > 'a' === true``

##2. Loop
We split the matrix row by row, and then find the peak for each row.
We know the min is ``z``

```javascript
console.log(array.reduce(findPeak, 'z'));

//split row by row
const findPeak = (currPeak, currRow) =>{
  //currRow is still an array
  //So use reduce function again
  //currRow.reduce(findPeakPerRow, 'z')
}

const findPeakPerRow = (currPeak, currEle) =>{
  //Compare currPeak and CurrEle
}
//compare function
const getMaxValue = (currPeak, currValue) => {
  //if currValue is not an array, then find the max value
  return (currValue && currValue < currPeak ? currValue : currPeak)
}
```

Full Codes - 
```javascript
const findPeak = (currPeak, currRow) =>{
  let currValue = currRow.reduce(findPeakPerRow, 'z');
  return (getMaxValue(currPeak, currValue));
}

const findPeakPerRow = (maxValue, currValue) => {
  return (getMaxValue(maxValue, currValue));
}

const getMaxValue = (currPeak, currValue) => {
  return (currValue && currValue < currPeak ? currValue : currPeak)
}

console.log(arr.reduce(findPeak, 'z'))
```

##3. Recursive Function?
Not sure if we can convert those to recursive functions...
Feel free to comment any ideas!
Most React course obsolete?
Tags: react, javascript, beginners
Published: 2020-10-25 20:22:05

---
title: Most React course obsolete?
published: true
description: 
tags: react, javascript, beginner
//cover_image: https://direct_url_to_image.jpg
---

I want to start a React course but almost all React courses seem to cover the class base component and only at the end of the course quickly cover hook in a bonus section. 

My understanding is that now in 2020 hook is the way to go?

I am wondering if learning class base component still important in 2020? 

It is me or a course that focus mainly on hook will be better?

Or maybe it is me that dont understand the difference well and overthink?
Github Stats
Tags: github, django, python, git
Published: 2020-10-25 20:16:06

<div align="center">
 <h2 align="center" style="color:#ffc107; font-size: 35px;">GitHub Stats</h2>
 <p align="center">Get the details of the developers at your fingertips</p>
    <a style="font-size:25px;" href="https://github-developer-stats.herokuapp.com/">Live Demo</a>
</div>

# Features

## Share
Share your profile to any one with your name, photo and details

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6qt82l25apd049dxnele.jpeg)

`https://github-developer-stats.herokuapp.com/user/username`
Replace the `username` with your github username

## Bookmark

Bookmark other users repos for later reference

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ytey9kj0en9593rm98v.jpeg)



# Future Plans
- Add a chart for the contributions of the user

## Contributions are Welcome
[Source code](https://github.com/rawho/githubstats)
My first OpenSource Contribution Experience
Tags: hacktoberfest, github, opensource
Published: 2020-10-25 20:06:24

#**Introduction**

I am a Software Developer Engineer but did not know much about GIT because i didn't use i used TFS, but I saw that I needed to learn GIT, so I started learning it on Youtube, then @ankitdhobal shared this event on hakinCodes! I was excited to get in! so I did, even knowing that I was a beginner in this world but I was not afraid.

#**Background**

When, I was register for the hacktoberfest 2020, I was totally new to the open source coding. Through this fest I have learned about how to contribute at open source coding. And, I have learned about git and github. This fest really helps me to boost up my career.

#**Contributions**

My contributions are:

Merge Sort in both sequential and parallel way in python 
<https://github.com/ankitdobhal/Awesome-Python-Scripts/pull/299>
Maximum Sum SubArray <https://github.com/rituburman/hacktoberfest2020/pull/140>
Smallest SubArray with given Sum
<https://github.com/itsakshayv/Hacktoberfest2020-contribution/pull/53>
Merge Interval <https://github.com/rituburman/hacktoberfest2020/pull/161>

I choose interview coding question tasks because I enjoy to do coding.

#**Reflections**

This is the first time I had participated in Open-source event. It's was a great learning experience. I would like to thanks #hacktoberfest and DigitalOcean for providing an opportunity to contribute back to the community.
AWS Lambda monitoring mechanism using SNS
Tags: aws, monitoring, sns
Published: 2020-10-25 19:52:00

Hello Devs,

I am going to tell you about AWS Lambda monitoring failure or success mechanism using SNS and email notification. Let's understand first background behind this. 

Few months back, i developed one AWS Lambda code using Python. It was working perfect fine. I used one 30 days trial API for testing purpose. Generally API vendor keep sending reminder about expiring free trial period. On last day i didn't get mail or somehow i forgot to check my mail. Due to expiry of API service lambda service stop working this i got to know some of user respond back with failure of service. Then i stared exploring about how should i get information about any kind of failure if something happen wrong in execution of lambda. 

After reading AWS SNS documentation, I found interesting thing about AWS is they introduced lambda trigger end point to SNS services which has multiple communication end point to subscribe like email, SMS, Web hook , External endpoint etc. 👇🏻

![List of Endpoint](https://cdn.hashnode.com/res/hashnode/image/upload/v1603486338812/YMW358nHT.png)

**Lets start how to do this** ? 

Architecture flow diagram : 

![SNS SMS subscription](https://d1.awsstatic.com/product-marketing/SNS/Product-Page-Diagram_Amazon-SNS_2-SMS-How-it-works@1.5x.4c649e5fe667e525de01e8c88024d782d8a25ccf.png)


1.  Create lambda - can use any language like Python, Node, GoLang etc. 
![Lambda Creation](https://cdn.hashnode.com/res/hashnode/image/upload/v1603489210987/q9xXK6Ft1.png)
2. Create SNS topic : Go to SNS -> Create Topic -> Select name and display name -> Create 
![Topic creation](https://cdn.hashnode.com/res/hashnode/image/upload/v1603489305029/jUwBKpm4Z.png)
3. Creation subscription for topic: Select Topic -> Create subscription-> Select protocol show in above image-> Create 
4.  Go to SNS -> Mobile -> Text Messaging -> Text messaging preferences -> Edit -> Add budget per day ( $1 per day )  [SMS pricing](https://aws.amazon.com/sns/sms-pricing/) 
5. Make sure lambda execution role has access to publish to SNS topic. 
6. Go to lambda -> Add Destination -> Asynchronous invocation -> Select Success or Failure -> Destination as SNS -> Select topic 

They we are done! 👍🏻

![Screenshot 2020-10-24 at 3.17.36 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1603489668293/whnkVjDQM.png)

**Sample SMS text** : 

![Setting for SMS.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1603489492887/QkI2HknJS.png)
![SMS notification](https://cdn.hashnode.com/res/hashnode/image/upload/v1603488842742/cyFbXf9BI.png)

Demo Video :{% youtube FN77CJGy6Tk %}


Thanks for reading article. Share your valuable feedback and suggestions! Don't forget like, share and subscribe.
Javascript ES6 Rest/Spread
Tags: javascript, es6
Published: 2020-10-25 19:45:42

**Rest**
New to ES6 is the ability to pass in a variable number of arguments. These arguments are stored as array instances:

```
function myFunc(...args){
  return `You have passed in ${args.length} arguments`
}

myFunc(1,4,6,10,20) // You have pass in  5 arguments
``` 

Since the arguments are stored as array instances we can use  array methods directly on the arguments:

```
function myFunc(...args){
  let myArr = args
  let first = myArr.shift()
  return first
}


myFunc(1,4,7,10) // returns 1

```

**Spread**
Also new to ES6 is the spread operator. Spread allows an iterable to expand in places where more than one argument is expected:

```
const myArr = [1,5,10]

const myArrTwo = [2,4,6, ...myArr]

console.log(myArrTwo) // [2,4,6,1,5,10]
```


You can also use the spread operator to easily copy an array:

```
const myArr = [1,5,10,100,200]

const copyArr = [...myArr]

console.log(copyArr) //  [1,5,10,100,200]
```
Why I chose to be a Software Engineer
Published: 2020-10-25 19:26:49

Growing up I watched the Internet become the amazing thing that it is today.  Witnessed the evolution of the mobile telephone to what we all know and love as our cellphones.  How my computer used to scream in robot language at me and my brothers to link it to the rest of the world only to get cut off by someone calling the house.  I was always amazed at how this stuff could function and when I could, would try to understand it.

When I took the included picture I was at work, in the oil and gas industry.  I was gone from my family more often than I was with them, the market was down and my company was going bankrupt.  So I started thinking about what other careers I could peruse that I would be passionate about and be closer to my family.  This brought me back to technology.  And, when I started to research what kind of jobs were available I was delightfully surprised to find so many options.

The world has changed so much that our fridges could need a software engineer.  That's the beauty of software is that plenty of non-tech companies were out there looking for people to implement some sort of tech into it.  So now I had an idea of the what and started looking into what fields there were.  Cyber security looked interesting, but I wanted something different.  Then I started watching videos about the careers out there and software engineering was always interesting.

These people helped created so much of the stuff we use everyday and fix all sorts of things that go on in the background for tons of different companies.  So I decided to follow my dream of understanding the innerworkings of the tech around me and pursue software engineering as a career.
Do you prefer desktop or web clients?
Tags: discuss, productivity
Published: 2020-10-25 19:09:02

---
title: Do you prefer desktop or web clients?
published: true
description: 
tags: discuss, productivity
---

For apps that have rich clients for both web and desktop (e.g. Slack, Teams, Zoom, Discord, Notion, Outlook, Spotify, etc.), when/why do you choose to use one vs. the other? For example, do you prefer desktop clients because of feature superiority? Do you generally prefer web clients when you're performing an ad-hoc task and/or need on-to-go/quick access to something? 

I'm really curious to learn more about folks workflows and how they incorporate web vs. desktop clients into it effectively. If you've already written about this, feel free to share a link. Thanks!
Swap two numbers without using a temporary variable
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-10-25 19:07:00

```js
let x = 5, y = 3;
x = x + y;
y = x - y;
x = x - y;
console.log(x, y); // 3 5
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Mixins, Kotlin, and Default Methods - why they don't work together
Tags: kotlin, java, mixins, minecraft
Published: 2020-10-25 19:01:51

A note for people using [Mixins](https://github.com/SpongePowered/Mixin) which implement [interfaces](https://kotlinlang.org/docs/reference/interfaces.html) which have default implementations of methods which are written in Kotlin.

Lets say you have an interface in Kotlin:
```kotlin
interface MyKotlinterface {
    fun doMyThing() {
      x.y.z.doThing(this)
    }
}
```
and a mixin:
```java
@Mixin(PlayerEntity.class)
abstract class MyMixin implements MyKotlinterface {}
```

you might think that you can then do `(player as MyKotlinterface).doMyThing()`. However, **you will get an `AbstractMethodError`**. Why? because Kotlin doesn't compile your interface how you'd expect it to.

You'd think that it would compile like:
```java
public interface MyKotlinterface {
     public default void doMyThing() {
          x.y.z.doThing(this)
     }
}
```

but *that would only work on JVMs at or above version 8, when default implementations for methods in interfaces were added* - so Kotlin compiles it like *this* instead, which works on all JVMs:
```java
public interface TestInterface {
    /* All calls to the default impl of this method
     * are rewritten by the kotlin compiler to use
     * the static method
     */
    public void doMyThing();

    public static final class DefaultImpls {
        public static void doMyThing(TestInterface obj) {
            x.y.z.doThing(obj)
        }
    }
}
```
The side-effect of this is that when you add your interface to a class with that mixin, it bypasses the kotlin compiler's rewriting - and so, **attempts to access the default impl of the method on the player will crash** with an `AbstractMethodError`. There are different fixes for this, depending on which Kotlin version you're using:

 - For Kotlin <1.2, you'll have to just write your implementations in your mixin class.
 - For Kotlin 1.2<=version<1.4, annotate your method with `@JvmDefault`, and put this in your build.gradle:
```groovy
tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).all {
    kotlinOptions {
        freeCompilerArgs += '-Xjvm-default'
    }
}
```
 - For Kotlin >=1.4, just put this in your build.gradle:
```groovy
tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).all {
    kotlinOptions {
        freeCompilerArgs += '-Xjvm-default=all'
    }
}
```

and your default methods will be compiled as they should be!

with thanks to [this blog post](https://blog.jetbrains.com/kotlin/2020/07/kotlin-1-4-m3-generating-default-methods-in-interfaces/) and [this decompiler/bytecode viewer](https://github.com/Konloch/bytecode-viewer)
About code smells
Tags: codesmell, beginners, computerscience, programming
Published: 2020-10-25 19:00:12

---
title: About code smells
published: true
description: 
tags: codesmell, beginners, computerscience , programming
//cover_image: https://direct_url_to_image.jpg
---
In software engineering field you are probably heard about “Code Smell” before right?, the name comes from Martin Fowler and Kent Beck. So let me explain a little about this concept.
What is and for what code smell?

Code smell in software engineering point on sick code in the deep system of an software, simply is the problems that actually exist in the system but It doesn’t prevent the software from completing its tasks.
Smells are the structures in the code that not respect the fundamental design principles and negatively impact design system quality. So it’s not “BUGS”.

> A code smell is a surface indication that usually corresponds to a deeper problem in the system.
    — Martin Fowler

##For what?
Software engineers use code smells to analyze the existing code using Unit Test and Testing Life Cycle test of the software, after finding the code smells who need of more refactoring.

##Code smell: common examples

 - Long methods: Most developers think the complex methods gives them the great image, but NO, do it simple and do it short. Long methods make code hard to maintain and debug.
 - Duplicate Code: don’t repeat yourself!
 - Lazy Class: Remember that lazy classes do the work, but in the future it’s hard to fix in bug cases.
 - Dead Code: Delete it don’t just comment it or let it without doing anything. Make it clean.

##Code smell tools

If we take PHP as a use case, we will found that there is a lot of tools using to do that work, some of them that listed next:

 - https://github.com/adamculp/php-code-quality
 - https://phpmd.org/
 - https://github.com/squizlabs/PHP_CodeSniffer
 - https://github.com/FriendsOfPHP/PHP-CS-Fixer


And I will come with a practical example of code smell when I have time.

Code smells can be in any system written by programmers, even experienced, so try to use code smells tools to detect the smells and try to refactoring it.

Note: This post is originally posted on my personal blog
Avoiding IF nesting ✨
Tags: codequality
Published: 2020-10-25 18:33:43

## Introduction

Today I come to share a little tip to **_improve the readability of our code_**. We will achieve this by using **guard clauses** which will help us avoid this ``IF`` nesting.


## Examples

#### Bad ❌

In this example, we can see how and ``IF`` nesting appears, in this case, it is a simple example but this can get complicated, with each nesting that is added the code will become **less readable and therefore less friendly and less maintainable**.

```js
const calculatePercentageHeight = (width, height) => {
  const result = (height * 100) / width;

  if (!Number.isNaN(result)){
    if (Number.isInteger(result)){
      return result
    }else{
      return result.toFixed(2)
    }
  }else{
    return 0
  }
};

// use function
calculatePercentageHeight(50,50) // result 100
calculatePercentageHeight(50,0) // result 0
```

#### Good ✅ 

Using **guard clauses** we avoid the nesting of ``IF`` conditionals since we will **_"first control the error cases_"**, and then we will continue with our logic.

```js
const calculatePercentageHeight = (width, height) => {
  const result = (height * 100) / width;

  if (Number.isNaN(result)) return 0; // guard clause
  if (Number.isInteger(result)) return result; // guard clause

  return result.toFixed(2);
};

// use function
calculatePercentageHeight(50,50) // result 100
calculatePercentageHeight(50,0) // result 0
```

## Conclusion

Using **guard clauses** is good practice to avoid unnecessary ramifications and therefore make your **code easier and more readable**. If we apply these guidelines we will make our **software much more maintainable and friendly**.


Thanks for reading me. 😊

![thanks](https://media.giphy.com/media/3ohs4kI2X9r7O8ZtoA/giphy.gif)