teleren/devto huggingface dataset:
How to add Barrels in TypeScript (or JavaScript)
Tags: typescript, javascript, es6
Published: 2020-02-03 15:15:20

Hi!

This is a short post about how to create a useful import/export strategy on Typescript. Now, this is not an exclusive Typescript feature, but in this example, we will apply this to the TS environment. 

`The goal of this is to make the code more readable and maintainable once it gets it bigger and bigger. `


> A barrel's a way to put together all the same type or the same usage files in the same place, and then, use a unique file to import them and then export them at the same time.

## Example

This is the scenario. We have 3 interfaces in our project `interfaces` folder and an `index.ts` file imported them on the root of the project

```
index.ts
interfaces/
  bear.interface.ts
  pig.interface.ts
  man.interface.ts
```

```typescript
// index.ts
import { Bear } from './interfaces/bear.interface';
import { Pig } from './interfaces/pig.interface';
import { Man } from './interfaces/man.interface';
```

> The only thing that it's common between these 3 files it's that all 3 contains interfaces.


As you can see, we have 3 import statements. This is a common and normal approach.

## Using barrels.

This is the scenario when the barrels come on the scene. We can modify just a little bit out of the structure and we will have a more readable way to do the imports. You must follow these 3 steps.


1. Adding a barrel file.

Add an index to the interfaces folder.

```
index.ts
interfaces/
  bear.interface
  pig.interface
  man.interface
  index.ts   <--- Barrel file
```

2. Import all the interfaces and then export them in the same file.

```typescript
// ./interfaces/index.ts
export * from './bear.interface';
export * from './man.interface';
export * from './pig.interface';
```


3. Update your `imports` statements on the root of the project index file.

```typescript
// **BEFORE** 
// index.ts
import { Bear } from './interfaces/bear.interface';
import { Pig } from './interfaces/pig.interface';
import { Man } from './interfaces/man.interface';

// **NOW** 
// index.ts
import { Bear, Pig, Man } from './interfaces';
```


## Wrap up

This barrel approach doesn't resolve a huge problem, but ovoid the quantity of readability of the code when de codebase gets bigger.

You can establish barrels on JS and TS as well. 

And that's all for today.

Happy coding!
IoT Edge Computing With Erlang and OTP
Tags: iot, cloudcomputing, edgecomputing, erlang
Published: 2020-02-03 14:52:57

---
title: IoT Edge Computing With Erlang and OTP
published: True
description: Learn how the innovative LightKone Research Consortium is using Erlang for IoT Edge Computing Solutions. 
tags: IoT, Cloud Computing, Edge Computing, Erlang
---

# The Internet of Things
In 2009, the number of machines connected to the Internet and Earth's overall population were equal. Since then, IoT devices have outnumbered us by roughly 3 to 4 times i.e. there are now over 25 billion connected devices. This exponential growth is already acknowledged as one of the most groundbreaking opportunities of the decade. But it does come with equally challenging infrastructure and architecture requirements. We have already seen Erlang and MQTT used at the heart of the world-leading [EMQx messaging broker](https://cms.erlang-solutions.com/pages/1006.html). The LightKone Research consortium is now using Erlang to provide an innovative way to manage IoT edge data. 
  
## Data at the Edge
Traditional Cloud Computing designs are currently becoming unsustainable due to the amount of data that will be produced *at the Edge* of networks, close to and on the end-user devices. The need to balance the overall workload across the entire network spectrum increases in line with the power of IoT devices such as mobile phones and Smart Homes. IoT sensor data is generally collected at the edge and follows a vertical flow towards the cloud data centres. This creates a risk of network congestion and overload that is already a concern for Cloud Service Providers.

<p align="center">
  <img src="https://i.imgur.com/GPFqZj7.png" alt="LiRA layers"/>
</p>

To address this challenge, the [LightKone](https://lightkone.eu) EU research consortium has recently published a new reference architecture, called *LightKone Reference Architecture* (LiRA). It introduces a novel design pattern for edge systems, in which decentralized lateral data sharing is a key factor that sets it apart from current state of the art solutions.  

## Learn more about Erlang, IoT and LightKone
To see an example of LightKone at work and learn more about how Erlang is being used to solve Edge Computing problems head to our guest blog on [IoT Edge Computing](https://www2.erlang-solutions.com/IoTErlang5)
Programming Template: BackTraking 
Tags: programming, cpp, algorithms
Published: 2020-02-03 14:39:56

This is a simple code example of backtraking. This traverses the problem space in depth-first order. I memorized it as a solution template.
```cpp
const int MAXC = 4;
int finished = 0;
void bt(int a[], int k, int n) {
    int candidates[MAXC], numCand, i;
    if (solved(a, k, n)) {
        answer(a, k, n);
        return;
    }
    numCand = getCandidates(a, k, n, candidates);
    for (i = 0; i < numCand; i++) {
        a[k] = candidates[i];
        bt(a, k + 1, n);
        if (finished) return;
    }
}
```
Daily Challenge #180 - SMS Shortener
Tags: challenge
Published: 2020-02-03 14:30:16

---
title: Daily Challenge #180 - SMS Shortener
published: true
series: Daily Challenge
description: Implement a function to shorten SMS messages.
tags: challenge
---
###Setup
SMS messages are limited to 160 characters. It tends to be irritating, especially when freshly written message is 164 characters long. Implement a function to shorten the message to 160 characters, starting from the end, by replacing spaces with camelCase, as much as necessary.

###Example
Original Message:
No one expects the Spanish Inquisition! Our chief weapon is surprise, fear and surprise; two chief weapons, fear, surprise, and ruthless efficiency! And that will be it.

Shortened Message:
No one expects the Spanish Inquisition! Our chief weapon is surprise, fear and surprise; two chief weapons, fear,Surprise,AndRuthlessEfficiency!AndThatWillBeIt.

###Tests
`"SMS messages are limited to 160 characters. It tends to be irritating, especially when freshly written message is 164 characters long. SMS messages are limited to 160 characters. It tends to be irritating, especially when freshly written message is 164 characters long."`

`"This message is already short enough!"`

`"ThereIsNoSpoonThereIsNoSpoonThereIsNoSpoonThereIsNoSpoonThereIsNoSpoonThereIsNoSpoonThereIsNoSpoonThereIsNoSpoonThereIsNoSpoonThereIsNoSpoonThereIsNoSpoonThereIsNoSpoonThereIsNoSpoon"`

Good luck!
***
_This [challenge](https://www.codewars.com/kata/535a69fb36973f2aad000953) comes from Bugari on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
What aspects of software development will you still be excited about ten years from now?
Tags: discuss, career
Published: 2020-02-03 14:25:18

---
title: What aspects of software development will you still be excited about ten years from now?
published: true
description: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/v2ylbr0fwm0wo08syewk.jpg
tags: discuss, career
---
Delete Multiple Records using Checkbox in Laravel 6 and Vue Js
Tags: laravel, vue, checkbox, delete
Published: 2020-02-03 14:16:04

Hello Artisan 

In this tutorial i am going to show you step by step how to delete multiple rows using checkbox in laravel. It is a common requirement in every application.

So for this tutorial i have a user table. I will delete every items at a time or multiple selected items at a time. you can do what ever you want.

So how to delete multiple records using checkbox in laravel 6 ? If you dont know then you can follow below tutorial which i already made using jquery and ajax.

https://www.codechief.org/article/delete-multiple-records-using-checkbox-in-laravel-6-and-vue-js
Utiliser Tailwind avec Parcel
Tags: tailwindcss, parcel
Published: 2020-02-03 14:14:55

---
title: Utiliser Tailwind avec Parcel
published: true
description: Comment installer Tailwind avec Parcel
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/eix3u4pe0tyl3xtfgzp5.jpg
canonical_url: https://maximeblanc.fr/blog/utiliser-tailwind-avec-parcel
tags: tailwind, parcel
---

Nous allons voir comment intégrer le framework CSS [Tailwind](https://tailwindcss.com/) au sein d'un projet utilisant [Parcel](https://parceljs.org/getting_started.html) pour bundler ses sources.

```bash
yarn add --exact tailwindcss
yarn add --dev --exact parcel-bundler autoprefixer postcss
```

Une fois les dépendances installées, nous allons devoir configurer Postcss afin de pouvoir utiliser toutes les fonctionnalités de Tailwind.

```js
// postcss.config.js

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
}
```

Il faut maintenant créer un fichier de style et utiliser les directives `@tailwind` afin d'importer les différentes briques du framework.

```css
/* style.css */

@tailwind base;

@tailwind components;

@tailwind utilities;
```

Dans le fichier index.html, il faut référencer le fichier `style.css`.

```html
<!-- index.html -->

<!DOCTYPE html>

<html lang="fr">
  <head>
    <!-- ... -->
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <h1 class="text-3xl">Jean Smaug</h1>
  </body>
</html>
```

Il ne nous reste plus qu'a créer les scripts.

```json
{
  ...
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }
  ...
}
```

On peut désormais générer une version de production de notre application avec un `yarn build`.

![build-without-purge](https://dev-to-uploads.s3.amazonaws.com/i/8zb5kw4qdlrmy2f79c1i.jpg)

## Amélioration

Notre configuration fonctionne mais il y a un bémol. Notre application importe l'intégralité du CSS de Tailwind même si nous n'utilisons que quelques classes.

Le plugin [parcel-plugin-purgecss](https://www.npmjs.com/package/parcel-plugin-purgecss) permet de nettoyer notre code.
Il repose sur PurgeCSS, un outil capable de supprimer du fichier CSS les classes inutilisées dans le HTML.

```bash
yarn add --dev --exact parcel-plugin-purgecss
```

Après l'installation on créé un fichier de configuration pour PurgeCSS

```js
// purgecss.config.js

module.exports = {
  content: ["**/*.html"],
}
```

Si on build de nouveau notre application, le fichier `style.css` ne fait désormais plus que ~2kb contre ~666kb précédemment.

![build-with-purge](https://dev-to-uploads.s3.amazonaws.com/i/2nbmr58qp64gbxk1czh7.jpg)

## Conclusion

Parcel, c'est génial. Tailwind, c'est énorme. Alors immaginez les deux ensembles !
Si en plus de cela, nos fichiers CSS peuvent subir une cure amincissante digne de régime Dukan, alors on est au top.

Merci de m'avoir lu.
Complete MySQL Course: Beginner to Advanced
Tags: sql, database, webdev, tutorial
Published: 2020-02-03 14:09:38

Complete MySQL course. MySQL Tutorial - Learn MySQL from scratch and go from beginner to advanced in MySQL. 

Welcome to this course "Complete MySQL Course: Beginner to Advanced". In this course you will learn from scratch. We will assume that you are a complete beginner and by the end of the course you will be at advanced level. This course contain Real-World examples and Hands On practicals. We will guide you step by step so that you can understand better. This course will allow you to work on the Real-World as a professional.

What you'll learn
* Learn The Basics
* Learn Advanced Methods
* Step By Step Instructions So That You Can Go From Zero To Hero
* A Complete Tutorial Explaining Everything You Need To Know
* Real-World Examples With Hands On Tutorials
* Get Answers To Your Every Single Questions

{% youtube PoeskDcuTlE %}
React Native Bridge
Tags: reactnative
Published: 2020-02-03 14:00:49

React Native is an open-source application created by Facebook and used for developing native applications for mobile phones. It is famous among developers for its user-friendly UI and its effectiveness. Along with that, it is very similar to ReactJS.

React Native consists of two parts:

1. Native Modules.
2. Native UI Components.

<h3>Native Modules</h3>

A Native Module is just a set of javascript functions that are implemented natively for the individual platform. Native Modules are used when React Native doesn’t have that required module yet, or when the native performance is significantly better.

<h3>Native UI Components</h3>

There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still, more might be in use in your very own portfolio. 

With the introduction part done, let us discuss the concept of React Native Bridge.

The bridge is the concept responsible for bidirectional communication between the two interfaces- front end and back end. The intriguing par among all this is that they are written in different technologies but are able to communicate with each other.

If we want these two services to communicate, we rely on a message queue. The first service pushes some commands inside the queue and the other one has to execute these commands when possible.

React Native behaves the same way. The JavaScript realm sends asynchronous JSON messages describing the action the Native part is supposed to accomplish.

In React Native, the bridge endorses as the message broker, handling commands between the two interfaces.

<h3>The Bridge Implementation</h3>

The bridge is built in C/C++ and hence, can be run on multiple platforms, OS, etc.

It embeds the Apple JavaScriptCore framework, which exposes APIs to access the actual JavacriptCore VM capabilities. Many people use these APIs in the Objective-C and Swift world. But there is a C API, and the Objective-C one is actually just a wrapper.

Now, React Bridge Implementation can be done for Android as well as iOS

1. Create <a href="https://codersera.com/blog/react-native-bridge-for-ios/">React Native Bridge for iOS</a>. 

2. Create <a href="https://codersera.com/blog/react-native-bridge-for-android/">React Native Bridge for Android</a>.
CRS map using leaflet or any other way
Tags: help, javascript, crs, map
Published: 2020-02-03 13:47:51

Hi, 
I am looking for a CRS map using leaflet

> should be able to create a CRS map as in https://leafletjs.com/examples/crs-simple/crs-simple.html
> I should be able to add markers
> should be able to get the coordinates (x,y) on the image where markers getting added to save into db

Any help or direction on the above requirement would be a great
REACTJS: Cannot add property onClick, object is not extensible
Tags: react, javascript, webpack, webdev
Published: 2020-02-03 13:32:15

Good morning Guys, how are you? My name is Matheus Ribeiro, I'm Brazilian and I'm starting as a programmer, using ReactJS. I would like to ask a question, because today a question has arisen in which I have yet to resolve. I am a beginner in programming and I am leading the creation of a StoryBook in ReactJs to be able to assemble components that can be consumed on a separate page. I came across a problem this morning. I created a "select" component using Divs and Labels, the component works perfectly in the StoryBook, I'm passing a state and a value in each one to be able to work with the standard html element. The problem here is that when I use Map() Childrens passing onClick on Labels to change the state (intern), when exporting the project it returns the message "Cannot add property onClick, object is not extensible". Can you give me any tips on how I can solve this problem? Thank you all for the attention.
Write Cleaner JavaScript Code With .some() And .every() Array Methods
Tags: javascript, beginners
Published: 2020-02-03 13:09:24

Writing clean and readable code is important. Especially, but not only when working with others. In this article, I'll teach you how to use the lesser known array methods `.some()` and `.every()` to write nice, readable code in your next project.

# How do they work?

Both functions work in a similar way. What they do is, they iterate over every item of an array and check if a function (defined by the developer) returns `true` in *some* or in *every* item.

Great use cases for this are situations where you need to check if *something* is true (or false) for a given array.

# Examples

Let's assume the following array:
``` javascript
const people = [
    { name: 'John', age: 47 },
    { name: 'Martha', age: 89 },
    { name: 'Edward', age: 31 },
    { name: 'Michele', age: 18 }
];
```

## Every
If we wanted to find out if __all__ of the people in the array are above legal age (>= 18 years), we could write the following code with `forEach`:
```javascript
let allAboveAge = true // assume they all are above age
people.forEach(person => { // iterate over every item
    if(person.age < 18) { // check if below age
        allAboveAge = false // at least one is not above age
    }
})
```

The code above could be hard to understand at first, because it's not easily readable for another developer. They first have to get behind the logic of what you're trying to do.

To achieve the same thing with `.every()`, you can do it in one easy-to-read line of code:
```javascript
const allAboveAge = people.every(person => person.age >= 18)
```

The function you pass to the `.every()`-method is should give as a result the thing that needs to be `true` for each and __every__ item in the array. (In this example, `person` is the item being iterated at a given moment)

## Some

`.some()` works very similar to `.every()`. The only difference is, that instead of checking that for __every__ item the statement is `true`, it only checks if for __some__ (at least one!) items it's `true`.

So, if you were to check if the array contains at least one person that is above age, you can do it with the following statement, using the `.some()` method:

```javascript
const oneOrMoreAboveAge = people.some(person => person.age >= 18)
```

# Summary

As you can see, both methods work beautifully similar in a way you just need to exchange the method called, and the rest can stay the same.

Those two methods are a handy little tool if you want to test the array for something that has `Boolean` as a result.

Try to use it in your next project where it applies, or see if you find a way to refactor code in your current project where this way results in a much nicer and more readable code.

*Photo by [Frank Vessia](https://unsplash.com/@frankvex?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on Unsplash*
Daily Developer Jokes - Monday, Feb 3, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-02-03 13:00:17

---
title: "Daily Developer Jokes - Monday, Feb 3, 2020"
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=Monday%2C%20Feb%203%2C%202020"
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/5e1258a87ad7e.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:
___!false___

It's funny 'cause it's true.
 -->
How to Easily Replace a Nonfunctional Light Switch
Published: 2020-02-03 12:52:51

The article is written by [oLive: live random video chat on the app store](https://apps.apple.com/us/app/live-video-chat-olive-app/id1469507454)'s developers.

Among all the different types of toggle switches, lights switches are some of the most common ones. They can be found in every building and are something that we use on a daily basis. We all know how to change a light bulb, but what happens when the light switch fails? Lights switches are essentially two-way toggle switches that have an on and off position. This makes them pretty simple to understand and replace. Here is how: 

1. Your number one concern should always be safety. For this reason, make sure to turn the power off using the fuse box or your main circuit breaker. You can also leave a note on the fuse box that the power has been turned off for a reason if there is a danger that someone might mistakenly turn it back on while you are working.
2. Take a [screwdriver](https://en.wikipedia.org/wiki/Screwdriver) and remove the screws that are holding the plate which covers the light switch. After that, remove the plate as well.
3. Inside the box that you should now be seeing, you will notice the switch is held by two screws. Remove those as well and pull the switch until you see the wires.
4. The wires that come out of the wall and connect to the switch will also be held to it by two more screws. Remove those and remove the switch completely. It is a good idea to mark which wire goes to which side of the switch before removing it so that you know how to connect them properly to the new one later.
5. Go to your nearest electronics store with the old light switch and ask for a replacement. They will give you the exact same type. This is important because not all light switches are the same and if you get the wrong one, this whole procedure might not work.
6. Take your new light switch home and hold it against the wall. The switch should be in the off position. Make sure to connect each wire to the appropriate terminal on the new light switch using the screws.
7. Put the switch back against the wall and secure it with the two screws that we holding it together before.
8. Put back the cover of your light switch and use the two screws you removed earlier to secure it tightly.
9. Turn the power on and test your new light switch.

As you can see, light switches are nothing to be afraid of. They are just regular toggle switches that work on a very simple principle. The two most important things to remember are to turn the power off before you start and to remember how the wires should be connected.
Load and cache an image from a URL directly into an ImageView using one annotation.
Tags: kotlin, android, opensource, github
Published: 2020-02-03 12:46:15

Images are one of the most cached items in any application. ColdStorage library provides a very easy way to load an image and cache it directly into an ImageView.

Usage :-

```kotlin

 @LoadImage(
        R.id.image_1,
        "https://images.unsplash.com/photo-1549740425-5e9ed4d8cd34?ixlib=rb-1.2.1&w=1000&q=80",
        placeHolder = R.drawable.loading, enableLoadingAnimation = true
    )
    lateinit var imageWithAnimation: ImageView

 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.load_image_example)
        Cache.bind(this)
    }
```

The image view will bind the variable with its resource id and take care of loading the image after downloading it from the URL into it.

Additionally, it can also show a placeholder image and loading animation until the image is downloaded.

Check out the repository for more detailed usage:- https://github.com/crypticminds/ColdStorage