teleren/devto huggingface dataset:
Web Components are the future for Business
Published: 2020-03-30 04:51:34

Web Components is a suite of different technologies allowing you to create reusable elements whose functionality are encapsulated away from the main code, yet utilized within the entirety of web apps. In laments terms, its a form of web development that allows the developer to design parts of the layout and there functionality easier. You can find Web Components on large domain sites such as youtube, by using the inspect element tool, you will see things such as <yt-playlist-manager>. This is the form for web components that is loaded by the html. 

Web components can help out in business by allowing for faster integration of better looking components of the web application or website that the business is trying to develop. They also allow for flexibility of integration and save hours of html writing time. Many web desired web components can be found already to have been made and are open source. This saves on development time and costs. The copy and ability of these components also allow for sites to fun smoother and more efficiently. 

Overall web components are the future of web development. In that they make designing, editing, and developing large sites easier and cheaper. They are used by some really large sites to power the way they are navigated. 

Youtube video on Web Components: https://youtu.be/JD7MqLzXQVk
Symfony Code Snippets Extension For Visual Studio Code
Published: 2020-03-30 04:00:15

## Symfony Code Snippets Extension For Visual Studio Code 


![symfony-code-snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owm904qklxk2iaz3cgo2.png)


If you're searching for high-quality Symfony snippets for VS Code, you've come to the right place. Our collection includes code snippets for both Symfony PHP and Twig, along with syntax highlighting and Yaml snippets. With our comprehensive library of snippets, you can quickly and easily optimize your workflow and boost your productivity in Symfony development. 

## Symfony Code Snippets On MarketPlace 
If you're interested in installing and using the extension, you have two options to choose from : 

``#``|Type | how 
---|---|---
1|Command palette | `ext install nadim-vscode.symfony-code-snippets`
2| vs Code extensions marketplace |[Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=nadim-vscode.symfony-code-snippets)

### important settings : 

-  you need to set up the comment snippet to true 
``` 
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    }
```
- set up the twig support 
```
"files.associations": {
    "*.html": "twig"
},
"emmet.includeLanguages": {
    "twig": "html"
}
```
### Check My other Extensions

- [Symfony Extensions Pack](https://marketplace.visualstudio.com/items?itemName=nadim-vscode.symfony-extension-pack)
- [infinity dark theme](
    https://marketplace.visualstudio.com/items?itemName=nadim-vscode.infinity-dark-theme
)
Web Components for Businesses and Developers
Tags: shobhitpatodia
Published: 2020-03-30 03:46:58

Usually when a business operates in the development sector there are many new features that change depending on the customer requirements. This is where developing managers or executives use web components for. Web components helps you make reusable components which makes it easier for developers to play around with and fit a block for the specific feature of a customer, in this way a lot of time and money gets saved as integration of features becomes a lot more simpler to execute with less time investment.
One intangible feature of Web Components is that it makes a code much more consumable for developers to try and test new features which helps developers handle projects more efficiently. Reusable components make it easier for collaboration resulting in a group collaboration towards a task and any bugs and features that are fixed or added result in changes in all scenarios of a case.With Shadow DOM is another form of technology under Web Components and helps developers take small parts of codes to iterate an application increasing the composability of an app. Web components in short helps a developer create HTML tags for apps and web pages all by encapsulating, reusability and customization of components.
I would highly recommend to check out my YouTube page as I highlight many articles and talk a bit more about Web Components.

YouTube:https://youtu.be/IsLenuFdMEY
https://medium.com/javascript-in-plain-english/could-web-components-actually-compliment-javascript-frameworks-5-reasons-why-i-think-so-971eee82ee85
https://codeburst.io/6-reasons-you-should-use-native-web-components-b45e18e069c2
https://viljamis.com/2019/why-we-use-web-components/
Why Should Your Business Use Web Components?
Tags: webcomponents
Published: 2020-03-30 02:50:39

Founded in the early 2010s, web components was introduced to the public by Google-employed researchers. Immediately, web components became one of the more sought after options when developing new browser features. Web components are being used by companies of all sizes across an array of industries. Chrome Platform Status believes that around 8% of all Google web pages use web components in some capacity. These companies include Youtube, Salesforce and Ionic(Stencil).
One of the main reasons why businesses have turned to web components since its creation is due to the fact that businesses are able to increase efficiency within their business process. The ability to streamline business processes and technology not only saves businesses time, but it also saves businesses a lot of money. Another reason web components has become popular amongst businesses is the fact that web components can be shared and accessed quite easily, across the entire company infrastructure network. The ability to access code across the network saves engineers a lot of time, and makes projects run much more quickly. Also, if a business owns the code, it does not need to be rewritten over and over again, rather just copied and implemented. Also, by using web components, businesses can create new components without causing code collisions and other duplicate lines. All of these benefits combined, and a businesses’ customers are going to receive a well-organized, more efficient product in less time than it would normally take. Add incredible efficiency to a number of other benefits, such simplicity and customizability, and you get a product that is a no brainer for any business in the digital space. 
The development of web components allowed businesses of all sizes to both increase efficiency and decrease cost, which is one of the biggest tasks businesses face today in the current digital climate. 

Youtube Link:https://www.youtube.com/watch?v=HQBC2BfNZo4
How to run Serverless offline?
Tags: localdevelopment, awslambda, serverless, serverlessoffline
Published: 2020-04-07 02:01:52

---
title: How to run Serverless offline?
published: true
date: 2020-03-30 02:46:00 UTC
tags: local-development,aws-lambda,serverless,serverless-offline
canonical_url: https://medium.com/fuzzy-code/how-to-run-serverless-offline-c97e88bf25c6
---

![](https://cdn-images-1.medium.com/max/1024/0*6vho_MSCuNHBagYh)<figcaption>Photo by <a href="https://unsplash.com/@lemonzandtea?utm_source=medium&amp;utm_medium=referral">Aleksandar Cvetanovic</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>

In this blog, I will be demonstrating you how to run Serverless Offline using a serverless plugin that emulates [AWS λ](https://aws.amazon.com/lambda) and [API Gateway](https://aws.amazon.com/api-gateway) on your local machine to speed up your development cycles. It helps us save time as we can see logs and also debug in our local machine rather than on cloud vendors.

Local environment reduces conflict with our team members who might be dependant on using the same function (even though in development) that you are working on and might get confused to why the function is not working whilst it was working before. You can make any changes and trials carefree as you will be the only one using this environment (unless you share it to the network) 😜.

This blog is for those who already know basics of Serverless Framework and its workarounds.

> The Serverless Framework helps you build serverless apps with radically less overhead and cost. It provides a powerful, unified experience to develop, deploy, test, secure and monitor your serverless applications. — [Serverless Framework](https://serverless.com/framework/docs/)

#### Steps:

Since you already know the basics of Serverless Framework, you must have installed the [framework](https://serverless.com/). Next, install the package serverless-offline from npm.

1. Install package — serverless-offline

```
npm install serverless-offline --save-dev
```

2. Add this installed plugin to your serverless project.

```
plugins:

  - serverless-offline
```

3. Run serverless offline using command:

```
> serverless offline 

or

> sls offline
```

4. You can see the list of available endpoints on [http://localhost:3000/](http://localhost:3000/) and also use [http://localhost:3000/](http://localhost:3000/) a base endpoint. Additional usage and command line options are available on the plugin’s official [documentation](https://www.npmjs.com/package/serverless-offline#usage-and-command-line-options)page.

Reference:

1. [https://github.com/dherault/serverless-offline](https://github.com/dherault/serverless-offline)

* * *
Hello Everyone (Web Components)
Published: 2020-03-30 02:44:03

Web components play a major role in today’s website development process and also allow developers to pull additional resources already online and utilize such tasks within another web process. Web components, in other terms, are a set of web platform APIs that allow a developer to create new custom, reusable, encapsulated HTML tags in web pages and web apps. Web components are based on four main specifications:
-Custom Elements
-Shadow DOM
-ES Modules
-HTML Template

Web components are also quite easy to use as well, simply import the custom element and then call the element within your code. 
When it comes to finding useful web components to add to a new coding site, libraries are often the best resource to utilize. Some libraries I recommend include Hybrids, LitElement, Polymer, Slim.js, and Stencil.
I think that many people assume web components are simply "attachments" to a website, yet they often play a much greater role. It is also important to note that each of the technologies can be used independently or combined with any of the others. In other words, they are not mutually exclusive.

As web development continues to become more and more complicated, it will begin to make sense for developers to start integrating more and more web components. The Web Components specifications are a set of low-level APIs that will continue to grow and evolve as our needs as developers evolve.

Youtube Link: https://youtu.be/uCU76CDkiaQ
Twitter, SMS Services: Spring Boot possible XML Configuration 
Tags: spring, microservices, java, database
Published: 2020-03-30 02:33:10

The system configuration is important building real project and interoperable dependency injection. This article we will quickly discuss how to develop a simple Spring boot 2 application using XML based Spring configuration. Indeed, Twitter, SMS, Email systems are proceeding in Java Spring implementation and using XML. Indeed, as usual open source in the [github](https://github.com/Hamdambek/SpringBoot-Projects-FullStack/tree/master/Part-2%20Spring%20Boot%20Configuration), just use it.

In this example, we don't use either Annotation-based configuration or Java-based configuration, we only use XML based configuration to create and configure beans.
Spring provides a @ImportResource annotation is used to load beans from an applicationContext.xml file into an Application Context.

> @ImportResource({"classpath*:applicationContext.xml"})

we are creating a simple message processing spring boot application. Here we are sending a message using different services like SMSService, TwitterService, and EmailService. We will configure message service beans in applicationContext.xml file and we will load beans using @ImportResource annotation as (see more source explanation github). Figure -1. XML configuration in Spring Boot.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xfid0mjullkkjpzrx7d8.jpg)
                    Figure-1. XML Configuration in Spring Boot

# The applicationContext.xml File
There is simplify source code in applicationContext.xml file:
        > * Source code

          <?xml version="1.0" encoding="UTF-8"?>
          <beans xmlns="http://www.springframework.org/schema/beans"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:context="http://www.springframework.org/schema/context"
          xsi:schemaLocation="http://www.springframework.org/schema/beans
          http://www.springframework.org/schema/beans/spring-beans.xsd
          http://www.springframework.org/schema/context
          http://www.springframework.org/schema/context/spring-context.xsd">
          <bean id ="emailService"
          class="spring.configure.service.EmailService" />
          <bean id="sMSService"
          class="spring.configure.service.SmsService" />
          <bean id="twitterService"
          class="spring.configure.service.TwitterService" />
          <bean id="messageProcessor"
          class="spring.configure.service.MessageProcessorImpl">
          <property name="messageService" ref="twitterService"></property>
          </bean>
          </beans>

The essential point is you may update inside XML source code <bean id ="emailService". in your main folder address and work-space.
12 Factors for micro service applications
Tags: devops
Published: 2020-03-30 02:20:05

---
title: 12 Factors for micro service applications
published: true
description: We talk about the 12 factors to create a successful micro service application deployment.
tags: devops
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/kb4ootx4yze71qzjsnix.jpg
---

{% youtube DsyHUbNWkqI %}

We talk about the 12 factors to create a successful micro service application deployment.
Linux Test Session: Listing hardware device with $ls*
Published: 2020-03-30 02:16:43

#$lshw
List hardware

#$lsblk
List block devices
[There are two types of devices; block and character. Block devices reads data in chunks while character devices reads in character ]

#$lsusb
List usb devices


Combine to *$less* for better control

Eg: $lshw | less


When a new device is connected but not recognized:
1. Check if the device is listed in /dev/
2. Count the listing before and after the device is connected
**$ls /dev/* | wc -l
This gives word count that should be different when new device is detected

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

When a 4gb memory card was inserted

__________________

#$dmesg
This generally tells what's happening.
(kernel ring buffer)

https://askubuntu.com/questions/285539/detect-and-mount-devices

---------------------------
*Other ways to know about devices*

    dmesg
    sudo fdisk OR sudo fdisk -l
    sudo blkid
    lsblk
    mount
    lsusb
    usb-devices
    df -h
Flutter: User Auth with Firebase
Tags: flutter, authentication, firebase
Published: 2020-03-30 01:51:41

In this guide, I am going to walk through setting up a basic login screen that will authenticate with Firebase.

To get started, set up a widget for the **LoginScreen**. This widget will be *stateful* and consist of fields to input an *email* and a *password*, and also a *submit button*.

**lib/login_screen.dart**
```dart
import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  @override
  LoginScreenState createState() => LoginScreenState();
}

class LoginScreenState extends State<LoginScreen> {

  Widget emailField() {
    return TextField(...);
  }

  Widget passwordField() {
    return TextField(...);
  }

  Widget submitButton() {
    return TextField(...);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(20.0),
      child: Form(
        child: Column(
          children: <Widget>[
            emailField(),
            passwordField(),
            submitButton(),
          ],
        ), // Column
      ), // Form
    ); // Container
  }
}
```

Let's start working on the `emailField` and `passwordField` methods to get something to display out on the screen.

```dart
Widget emailField() {
  return TextFormField(
    decoration: InputDecoration(
      labelText: 'Email',
      hintText: 'john.doe@gmail.com',
    ),
    keyboardType: TextInputType.emailAddress,
  );
}

Widget passwordField() {
  return TextFormField(
    obscureText: true,
    decoration: InputDecoration(
      labelText: 'Password',
      hintText: '8-12 characters long',
    ),
  );
}
```

Our app should now look like this.

![Simulator screenshot](https://i.imgur.com/6gFKoRj.png)

Next, we are going to create the `submitButton` widget, and give it some custom styling to make it look somewhat nice.

```dart
Widget submitButton() {
  final accentColor = HSLColor.fromColor(Theme.of(context).accentColor);
  // This will darken the Theme's accentColor by a factor of '0.5' percent
  final darkAccentColor = accentColor.withLightness((accentColor.lightness - 0.5).clamp(0.0, 1.0)).toColor();

  return RaisedButton(
    onPressed: () => {},
    textColor: darkAccentColor,
    padding: const EdgeInsets.all(0.0),
    child: Row(
      children: <Widget>[
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              color: Theme.of(context).accentColor,
            ), // BoxDecoration
            padding: const EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                'Submit',
                style: TextStyle(fontSize: 18)
              ), // Text
            ), // Center
          ), // Container
        ), // Expanded
      ],
    ), // Row
  ); // RaisedButton
}
```

Now the app should look like this.

![Simulator screenshot](https://i.imgur.com/xGkIVvC.png)

*To be continued...*
Exemplos de como trabalhar com datas no Kotlin
Published: 2020-03-30 00:52:21

#### Convertendo uma data para uma string formatada

```kotlin
import java.text.SimpleDateFormat
import java.util.*

fun Date.dateToString(format: String = "yyyy-MM-dd HH:mm:ss"): String =
    SimpleDateFormat(format, Locale.getDefault()).format(this)
```

#### Convertendo uma string para data

```kotlin
import java.text.SimpleDateFormat
import java.util.*

fun String.stringToDate(format: String = "yyyy-MM-dd HH:mm:ss"): Date =
    SimpleDateFormat(format, Locale.getDefault()).parse(this)
```

#### Recuperando a diferença entre duas datas

- Diferença em horas

```kotlin
import java.util.concurrent.TimeUnit
import java.util.*

infix fun Date.difHoursTo(dateTo: Date): Long =
    TimeUnit.MILLISECONDS.toHours(dateTo.time - this.time)
```

- Diferença em minutos

```kotlin
import java.util.concurrent.TimeUnit
import java.util.*

infix fun Date.difMinutesTo(dateTo: Date): Long =
    TimeUnit.MILLISECONDS.toMinutes(dateTo.time - this.time)
```

- Diferença em segundos

```kotlin
import java.util.concurrent.TimeUnit
import java.util.*

infix fun Date.difSecondsTo(dateTo: Date): Long =
    TimeUnit.MILLISECONDS.toSeconds(dateTo.time - this.time)
```

#### Adicionando anos, meses, dias, horas, minutos ou segundos em uma data

- Extension function utilizada pelas demais

```kotlin
import java.util.*

fun Date.add(field: Int, amount: Int): Date {
    Calendar.getInstance().apply {
        time = this@add
        add(field, amount)
        return time
    }
}
```

- Adicionando anos

```kotlin
import java.util.*

fun Date.addYears(years: Int): Date =
    add(Calendar.YEAR, years)
```

- Adicionando meses

```kotlin
import java.util.*

fun Date.addMonths(months: Int): Date =
    add(Calendar.MONTH, months)
```

- Adicionando dias

```kotlin
import java.util.*

fun Date.addDays(days: Int): Date =
    add(Calendar.DAY_OF_MONTH, days)
```

- Adicionando horas

```kotlin
import java.util.*

fun Date.addHours(hours: Int): Date =
    add(Calendar.HOUR_OF_DAY, hours)
```

- Adicionando minutos

```kotlin
import java.util.*

fun Date.addMinutes(minutes: Int): Date =
    add(Calendar.MINUTE, minutes)
```

- Adicionando segundos

```kotlin
import java.util.*

fun Date.addSeconds(seconds: Int): Date =
    add(Calendar.SECOND, seconds)
```


[Gist do GitHub](https://gist.github.com/viniciusalvesmello/03915c54bd9d4fa7caff190d4971d2f1)

[Meus contatos](https://viniciusalvesmello.github.io/)
Destructuring JavaScript Objects
Tags: javascript, codenewbie, beginners
Published: 2020-03-30 00:35:34

Destructuring is a super useful feature in the latest Javascript update(ES6), but honestly wasn't something that I took full advantage of until recently.  Let's dive in. 

Destructuring allows us to pull data out of arrays and objects and set them into their own variable.  Lets take a look at a basic JS Object:
```
const album = {
  title: 'A Kind of Blue',
  artist: 'Miles Davis',
  genre: 'Jazz',
  release_year: 1959,
  label: 'Columbia'
};
```

Traditionally to extract a variable from this object you see something like the following: 
```
const artist = album.artist
const genre = album.genre
```
As you can see, this can be a very repetitive process which destructuring allows us to improve upon.  With destructuring, we can create multiple variables from the object on a single line like so:
```
const {title, artist, genre} = album
```

This new destructuring syntax is creating individual title, artist, and genre variables, taking those specific properties from the album object.
So now if we were to console.log our newly created variables we would see:
```
console.log(title) // 'A Kind of Blue'
console.log(artist) // 'Miles Davis'
console.log(genre) // 'Jazz'
```

Destructuring is a super handy feature that can drastically improve the way you work with data in your projects or when dealing with API's.  Hope this post adds some benefit to you!
GitHub Actions で自前ビルド Erlang/OTP を利用する
Tags: github, erlang
Published: 2020-03-30 00:35:34

GitHub Actions で自前ビルドの Erlang/OTP を利用する場合は Docker Hub 経由がおすすめです。いろいろ試してみて最小限の yml ができたので公開しておきます。

### yml ファイル

```yml
name: make-github-workflow

on:
  push:
    paths-ignore:
    - 'doc/**'
    - '**.rst'
  pull_request:

jobs:
  make-github:
    runs-on: ubuntu-latest
    container:
      image: shiguredo/erlang:otp-23.0-rc2-ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
      - run: make github
      - name: Slack Notification
        if: failure()
        uses: rtCamp/action-slack-notify@v2.0.1
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
```

### 簡単な解説

`runs-os` は `ubuntu-latest` をおすすめします、この上で docker を起動して動かします。

`container.image` で利用する docker コンテナのイメージが指定できます、ここでは時雨堂が独自ビルドしている Erlang/OTP 23.0-rc2 on Ubuntu 18.04 のイメージを利用しています。

Docker Hub
https://hub.docker.com/r/shiguredo/erlang

GitHub
https://github.com/shiguredo/dockerfiles/tree/master/erlang

失敗したときのみ Slack 経由で通知するようにしています。 `if: failure()` がその部分です。

### 未確認

- rebar3 deps + GitHub プライベートレポジトリが ssh-agent を利用してもうまく動きません
- ビルドに失敗し、その後成功したときのみ通知する fixed の実現方法がわかりません
- secrets がリポジトリごとではなく組織単位で共通化する方法がわかりません
- 複数の OTP での検証をする場合は色々ややこしそうです