teleren/devto huggingface dataset:
My Fetch API Wrapper Function 
Tags: javascript
Published: 2021-01-17 14:06:41

After learning higher-order functions in Javascript, I decided to write this Fetch API wrapper function.
```javascript

export const http = (method=`GET`, data={},) => {

    const baseURL = `http://localhost:8000/api/v1`;
    const headers = {
      'Content-Type': 'application/json;charset=utf-8',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
      'X-Requested-With': 'XMLHttpRequest',
    };

    const body = JSON.stringify({
      ...data,
    });

    switch (method) {
        case `GET`:

            return (url) =>  fetch(`${baseURL}/${url}`, { method, headers,})
              .then(response => { 
                if(parseInt(response.status) > 300) {
                  return response.json().then(resp => {

                    return Promise.reject(resp);
                  });
                }

                return response.json().then(resp => {
                  return Promise.resolve(resp);
                });
              });

        case `POST`:
            return (url) =>fetch(`${baseURL}/${url}`, {method, headers, body,})
              .then(response => { 
                if(parseInt(response.status) > 300) {
                  return response.json().then(resp => {

                    return Promise.reject(resp);
                  });
                }

                return response.json().then(resp => {
                  return Promise.resolve(resp);
                });
               });

        case `DELETE`:

            return (url) => fetch(`${baseURL}/${url}`, {method,  headers, body,})
              .then(response => { 
                if(parseInt(response.status) > 300) {
                  return response.json().then(resp => {

                    return Promise.reject(resp);
                  });
                }

                return response.json().then(resp => {
                  return Promise.resolve(resp);
                }); 
               });

        case `PUT`:

            return (url) => fetch(`${baseURL}/${url}`, {method,  headers, body,})
              .then(response => { 
                if(parseInt(response.status) > 300) {
                  return response.json().then(resp => {

                    return Promise.reject(resp);
                  });
                }

                return response.json().then(resp => {
                  return Promise.resolve(resp);
                });
               });

        default:
            break;
    }
}
```
 How I implement it on my application:
```javascript

import {http} from './http';
http('POST', { name: "ngeno7"})('user-endpoint').then(response => {
console.log("data", response);
}).catch(error => {
console.log("error", error);
});
```
MLH CUSAT Guild
Tags: majorleaguehacking, localhackday, mlh
Published: 2021-01-17 13:57:14

After Local Hack Day: Learn in the month of October, in the month of January they are organising Local Hack Day: Build, which is a week-long celebration of creating hacks both big and small. Next Local Hack Day: Share will be conducted in the month of March/April.
Working and completing the challenges and learning something are  the main steps done in the Local Hack Day Build. And in this virtual environment there was no lose in the spirit and enthusiasm. It is a great opportunity to learn and collaborate with other fellows. Enjoyed a lot.
How to hire iOS developers (9 questions for a job interview)
Tags: ios, hiredevelopers
Published: 2021-01-17 13:55:26

---
title: How to hire iOS developers (9 questions for a job interview)
published: true
description: 
tags: ios, hiredevelopers
//cover_image: https://direct_url_to_image.jpg
---
Right now, a part of the interview process that I've done to [hire iOS developers](https://www.sundevs.com/staff-augmentation) has consisted of asking candidates about their experiences using UIKit, the knowledge of the MVC or delegate pattern, and questions about the core of the **Swift programming language**.

Some questions that I've used in the interview have been the next:

1. What is the init() method for in Swift?
2. What is the difference between Let and Var?
3. What is optional chaining?
4. What are Lazy stored properties and in which case are they useful?
5. What is Enum used for?
6. What is a Dictionary?
7. Explain the Adapter and Memento patterns in Swift.
8. What are the differences between Struct and Class?
9. How can you make a property optional?


Also, I ask about their experience with:

* Apple guidelines.
* CocoaPods
* Keychain

### A project at home as a complement to interview

A way to complete this interview is by testing the coding skills of the candidate through a project to make at home. I think a good project is to make a "news reader" where the programmer will need to implement:

* A screen to display the news list.
* A screen with the details of the news with category and author.

In this application, the developer will need to consume an API and optimize images, downloading, putting them in the cache, and getting them in an asynchronous way.


Let me know what other questions you would use for an interview.
Hackathons oh Hackathons 
Tags: localhackday, mlh, majorleaguehacking
Published: 2021-01-17 13:50:38

## Background Story
In the start of 2021, I found out about MLHacks, who organised a lot of hackathons for students above and below 18. 
So that got me interested, and I registered for their hackathons.
The first one which I attended was `New Year Hacks` in which we were supposed to make a hack related to new year.

# New Year Hacks

So i teamed up with a couple of people and built this site: https://nynm.co which is basically a tasks app which uses the google authetication to save your tasks.
We used basic html, css, js and firebase to do this project.

While this hackathon was going on, I heard about a huge 1 week hackathon which MLH was organising the next week.
So I obviously very interested, applied to it.
This hackathon is `Local Hack Day: Build` which you can find more info on: https://lhd.mlh.io/build

## My Experience
Hackathons were very new to me, in fact the new year hack was my first ever hackathon.
I didnt know how to choose teammates, I didnt know how to collab faster, I didnt know how to take the project to production level in 2 days.
This was what I learned from it: 

# New Year Hacks
- Always find teammates from your Time-Zone.
	I found this out the hardest way possible.
	Even though we did finish our project, it was very hard for us to work together and make updates.
	There were 5 of us, and all of us were from completely different time zones.
	so take that in mind which choosing teammembers in virtual hackathons.
- Keep the project idea simple
	In the starting we planned a lot, thinking of using the sponsored API's but we werent able to do that.
	so keep the project idea simple.
- Have a particular theme in mind

- Split work properly
	Split it out between the teammates so that everyone gets a fair share of work.

# Local Hack Day
LHD is a week long hackathon, and you and your guilds are very closely connected, all points which you achieve goes to your guild, so keep that in mind.

In these one week builds, you will learn a lot and build a lot. My github activity blew up this week, it was full green the whole 7 days.
Take rest, during long hackathons, its very easy to lose track and not get any sleep, but make sure your sleeping well and working.

Do not waste time. 
I wasted a lot of time researching on the best possible way to do it. Instead of doing it like that, just start out and make it better on the way.

## What I learned and built this hackathon:

- https://nynm.co
- TicTacToe game (java)
- Web Scraper (selenium)
- Zoom bot (Automation)
- Password Manager (python, mysql)
- Encryption techniques (cryptography)
- Morse Code Translator app (python, Tkinter)
- Sorting Algorithms (bubble Sort, Selection Sort, Insertion sort)
- Discord Bot (discord.js)
- JavaScript Basics (New Language)
- Quadruped Bot (Hardware Hack | Arduino)

## Thank you
Thanks for reading all along!
If you wanna contact me, here's my discord: `SoulNinja#7777`
And I'll catch you in the next one 👋
4 challenges of hiring developers in Latin America
Tags: staffaugmentation, outsourcing
Published: 2021-01-17 13:40:37

---
title: 4 challenges of hiring developers in Latin America
published: true
description: 
tags: staffaugmentation,outsourcing
//cover_image: https://direct_url_to_image.jpg
---
When companies from the United States are looking for a partner for the service of [IT Staff Augmentation](https://www.sundevs.com/staff-augmentation) in Latam, usually have a lot of doubts about how the culture can be a barrier or even the language can be difficult for Latinos. 

I work for a company in Latam offering this kind of services, and  I've compiled the top concerns of the companies around this topic:

* **Legal aspects of hiring**:  The legal procedures for hiring foreign people are one of the first questions that come up when trying to build an IT development team. In the case of the United States, it is relatively simple since it is through the W8 form provided by the Internal Revenue Service (whose acronym is IRS) that companies can declare that they are hiring a self-employed person who also lives outside the United States.

* **Time zone**: One of the great fears of companies when hiring outside the country is that the time difference will interrupt the flow of work. However, the United States, Canada, and Latin America are very similar in this aspect, as an example, cities like Dallas, New Orleans, or Houston in the United States or Winnipeg and Baker Lake in Canada have exactly the same time zone as Colombia, Peru, and Ecuador. 

* **English language**: The native language of most of Latin America is Spanish, but  government policies in each country make it mandatory to learn English not only in school but also in universities

* **Education**: In Latin America as well as in the rest of the world, computer science education is a relevant issue. And this group of countries is home to many renowned universities throughout the continent for the study of engineerings, such as the National University of Colombia or the University of Buenos Aires in Argentina.
Gatsby tailwind hello world starter
Tags: gatsby, css, react, tailwindcss
Published: 2021-01-17 13:20:24

Official gatsby hello world with tailwind CSS.

I just want to learn more about GatsbyJS and TailwindCSS, so I decided to combine them into one repository.

Github:
https://github.com/junsantilla/gatsby-tailwind-hello-world-starter

Install this starter locally:
```gatsby new my-gatsby-project https://github.com/junsantilla/gatsby-tailwind-hello-world-starter
A UI for your room
Tags: iot
Published: 2021-01-17 13:07:05

You are probably in a room right now? If so maybe I can interest you in yet another idea which could be a good one..

I propose you replace your existing light switch with a home assistant UI mounted in its place with a screen which will better serve you.

Light switches are actually positioned in places are more likely to find useful such as by the front door or on the move in your house.

Also a screen is easy to clean rather then a switch gathering germs.

So maybe the idea is overkill or maybe not?

Should I ask for help to build a prototype, form a team?
Daily Developer Jokes - Sunday, Jan 17, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-01-17 13:00:16

---
title: "Daily Developer Jokes - Sunday, Jan 17, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Jan%2017%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259d7cf335.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
I went to a street where the houses were numbered 8k, 16k, 32k, 64k, 128k, 256k and 512k. 

It was a trip down Memory Lane.
 -->
Invalid hook call. Hooks can only be called inside of the body of a function component. ?? 
Tags: redux, nextjs, react
Published: 2021-01-17 12:56:05

**store.js**

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

**index.js**

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

**package.json**

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

```
import "../styles/style.scss";
import store from "@config/store";
import { Provider } from "react-redux";
import NetworkDetector from "@config/network";
import { ApolloProvider } from "@apollo/client";
import { useApollo } from "@config/apolloClient";

function App({ Component, pageProps }) {
  const apolloClient = useApollo(pageProps.initialApolloState);

  return (
    <ApolloProvider client={apolloClient}>
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    </ApolloProvider>
  );
}

export default NetworkDetector(App);
```

Why i am getting this Invalid hook call in redux dev tools. Am i doing something wrong here ?

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

**List Products Action**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o7ajn4o6jb02qxfujjh3.png)
3 useful Web Developer Tools/Sites
Tags: developers, tools, learning
Published: 2021-01-17 12:55:02

---
title: 3  useful Web Developer Tools/Sites
published: true
description: 3 useful tools for developers
tags: developers, tools, learning
cover_image: https://images.unsplash.com/photo-1494809610410-160faaed4de0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80
---
# Introduction
Hellooooo there!
Today i want to share some useful tools and sites that might be helpful for some of you.
Feel free to add some of your favorites sites and tools in the comment section

# 1: Zero to Mastery Blog

[ZTM](https://zerotomastery.io/blog/) is an Educational site with a very nice blog section. The owner Andrei Neagoie teaches web development to houndreds of thousands peoples. Each month you get several blogs with a ton of useful information within the whole tech world.

Also i can highly recommend his courses on Udemy or his own Academy (see website). With the courses you also get a invite to the ZTM Discord community. A Discord Server where you can connect to thousands of developers.

# 2: 30 seconds of code

[30 Seconds of Code](https://www.30secondsofcode.org/) is a cool little website where you have access to cool little articles that you can read within 30 seconds and can learn about development.

I really like the idea because first you can learn something and second you can do it within a very little time frame. For example when you have to wait for a download, till the code compiles etc.

# 3: HTTP Headers

[HTTP Headers -  The Hidden Champions](https://schepp.github.io/HTTP-headers/#/) is a website where you can learn about HTTP headers in a really cool and interactive way.

Security, CORS and many more features about HTTP Headers is covered. I really enjoy the way the site is build and its fun to use it plus you can learn a lot.

# Conclusion

I hope some of you find these sites useful. Enjoy it and if you have any cool sites that you use for development or for learning it please feel free to share it in the comment section.

Stay connected to me and my content on [Twitter](https://twitter.com/danytulumidis).

I love to improve myself every single day even if its just a tiny bit!

Stay save and healthy guys!

And as always: develop yourself!
Code Smell 55 - Object Orgy
Tags: codenewbie, codesmell, webdev, tutorial
Published: 2021-01-17 12:17:23

*If you see your objects as data holders you will violate their encapsulation, but you shouldn't, as in real life, you should always ask for consent.*

> TL;DR: Don't mess with other object's data.

# Problems

- Information Hiding Violation

- Encapsulation Violation

- Coupling

# Solutions

1. Couple to interfaces and behavior, never data.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/ee56984fadcd35eb91b7e2617eec875a)
```php
<?

final class Point {
    public $x;
    public $y;
}

final class DistanceCalculator {
    function distanceBetween(Point $origin, Point $destination) {
        return sqrt((($destination->x - $origin->x) ^ 2) + (($destination->y - $origin->y) ^ 2));
    }
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/4135a48a51ff4361359326f2d4b2076e)
```php
<?

final class Point {
    private $rho;
    private $theta;

    public function x() {
        return $this->rho * cos($this->theta);
    }

    public function y() {
        return $this->rho * sin($this->theta);
    }
}

final class DistanceCalculator {
    function distanceBetween(Point $origin, Point $destination) {

        return sqrt((($destination->x() - $origin->x() ^ 2) + (($destination->y() - $origin->y()) ^ 2)));
    }

}
```

# Detection

You can set your linters to warn you for public attributes, setters and getters usage and discourage them.

# Tags

- Coupling

# Conclusion

If your classes are polluted with setters, getters and public methods you will certainly have ways to couple to their accidental implementation.

# Also Known as

- Inappropriate intimacy

# Relations

{% post https://dev.to/mcsee/code-smell-01-anemic-models-4dg2 %}

{% post https://dev.to/mcsee/code-smell-28-setters-2hih %}

# More info

- [Wikipedia](https://en.wikipedia.org/wiki/Object_orgy)

- [Refactoring.Guru](https://refactoring.guru/es/smells/inappropriate-intimacy)

- [C2 Wiki](http://wiki.c2.com/?InappropriateIntimacy)

# Credits

Picture by <a href="https://www.nationalgallery.org.uk/paintings/nicolas-poussin-a-bacchanalian-revel-before-a-term#">Nicolas Poussin</a> 

* * *

> A data structure is just a stupid programming language.

_Bill Gosper_
 
* * *
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}

*Last update: 2021/06/14*
IoC: Inversion of Control principle
Tags: designprinciples, ioc
Published: 2021-01-17 12:07:01

---
title: IoC: Inversion of Control principle
published: true
date: 2021-01-17 12:02:40 UTC
tags: DesignPrinciples, IoC
canonical_url: https://le0nidas.gr/2021/01/17/ioc-inversion-of-control-principle/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ktj054jw9j9cedljftlb.png
---

This is the one principle that, chances are, you have applied even if you didn’t do it on purpose.  
In essence, if you have written code that does not have any control over the execution flow, then you most probably have applied the `IoC principle`. How?

#### IoC through design patterns

If you have implemented the strategy or the template pattern then you have applied the IoC principle. For example, having a report generator and feeding it with the necessary filtering code.  
All the code you write for filtering data, does not have any control over the execution’s flow. The generator is the one that decides when and if it will be invoked:
{% gist https://gist.github.com/le0nidas/5fb8ce93ad6d0f5b042511e90a64cee0 %}

<figcaption>Strategy pattern</figcaption>

The same goes with the template pattern too. The code you write in the template’s hooks is being controlled by the template and you don’t get to control it:
{% gist https://gist.github.com/le0nidas/931ed15dc21b894783ee22b6f532e752 %}

<figcaption>Template pattern</figcaption>

Both of these examples might seem weird since we are the ones that wrote both the filtering code and the generator so we feel that we control the flow. The thing is that we need to separate them in our heads and observe them individually. The generator is the one that controls the flow and dictates the actions that will take place. The filtering code is one of the actions. We just write them, provide them to the generator and that’s it.

#### IoC through frameworks

Another way of applying IoC is by using frameworks that have adopted it. Most popular are the `IoC containers` that are used to inject dependencies.   
Another example is the android’s framework. In android you don’t have control over an activity’s lifecycle and you simply extend the `Activity` class and override hooks to run your code.

#### IoC vs DI

Because of the aforementioned IoC containers, many people assume that dependency injection and IoC are the same. They are not. DI is just a way to help in applying the IoC principle. For example:
{% gist https://gist.github.com/le0nidas/2ea5a19bdbbaa06137a155feb4d56b0e %}

we can change the generator and have the filtering code being injected to it by constructor. The inversion is already happening, DI is simply used to provide the extra code.
RGB Color to HEXA Color Converter Using HTML, CSS, JS
Tags: javascript, html, css, rgbtohexa
Published: 2021-01-17 12:02:19

It's my first blog post. I created this project a while ago thought to create a blog post on it. 

####**I assume that you know JavaScript, CSS, and HTML well and you are just here to know how it's created.**

User will able to convert with a range slider and also with the input also there will be a div which will preview the color.

* **Create a folder name it whichever you like to give.**
* **Create files and folder structure as given below.**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/shn1tsbvq1sljavfk25s.png)

We will use bootstrap for designing faster and easier. Add [Bootstrap](https://getbootstrap.com/docs/4.5/getting-started/introduction/) CDN links in HTML.

## Open HTML file.
Add [Bootstrap](https://getbootstrap.com/docs/4.5/getting-started/introduction/) CDN links in HTML.

Now, write the HTML code. 
> You can structure your code in your way. 

We can see the HTML part below images:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/znb7vyh262u37t1qtr2d.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/abylhzeeqnxghpp3b6lb.png)

## Now, Open the CSS file.

It's time to give a good design:

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

## Open JS file.

The fun part begins here. Firstly we will declare all and refer to all our main elements.

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

Now, we will add all our event handlers. As you can see in the below image for the range slider I have used  OnInput event rather than using onChange because OnInput occurs immediately and OnChange occurs when the element loses focus, after the content has been changed. Before using OnInput I used the OnChange event but didn't get the result as expected so I searched for it and got an answer in {% stackoverflow 20354341%}


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

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

# **Boom!** ✨
Here's the preview:

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

| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a7jg8eqoa6kel19h4m64.gif) | 
-
Check Out [Github Repo](https://github.com/Y1a2s3h4/RGB-to-Hex-Color-Converter/)
##**Thanks For Reading My Blog Post.**