teleren/devto huggingface dataset:
How to use Matterbridge to connect 2 different Slack workspaces
Tags: opensource, resources
Published: 2019-02-13 14:35:27

---
title: How to use Matterbridge to connect 2 different Slack workspaces
published: true
tags: Open Source,Resources
canonical_url: https://daniele.tech/2019/02/how-to-use-matterbridge-to-connect-2-different-slack-workspaces/
---

Open source is awesome because there are already tools for what you need that works great. You need just to discover them!

The post [How to use Matterbridge to connect 2 different Slack workspaces](https://daniele.tech/2019/02/how-to-use-matterbridge-to-connect-2-different-slack-workspaces/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
Introducing: ng-sq-ui 1.1.0
Tags: ui, angular, javascript, showdev
Published: 2019-02-11 11:07:19

---
title: Introducing: ng-sq-ui 1.1.0
published: true
description: Simple Quality UI for Angular is now better than ever!
tags: ui,angular,javascript,showdev
---

We are super excited to announce the release of ng-sq-ui 1.1.0!

Here’s what’s new:

Separated all standalone modules as packages. You can now install only what you need - @sq-ui/ng-sq-common, @sq-ui/ng-datatable, @sq-ui/ng-datetime-picker, @sq-ui/ng-modal.

NEW feature @sq-ui/ng-datatable! 
The datatable you need,readily available as a standalone package, no other stuff required!

Documentation Updates! 
As of this release, we have multiple packages and the documentation is now better structured to represent those.

Updated examples! 
All gif images are removed. Instead, Stackblitz examples are provided for each feature and module.

List of all Stackblitz examples:
@sq-ui/ng-datatable: https://ng-sq-datatable.stackblitz.io 
@sq-ui/ng-sq-common: https://ng-sq-ui-progress-bar.stackblitz.io
@sq-ui/ng-datetime-picker: https://ng-sq-ui-datetime-picker.stackblitz.io 
@sq-ui/ng-modal: https://ng-sq-ui-modal.stackblitz.io

Deployment updates! 
We have improved our automatic deployment and the latest version of the documentation will be available on https://sq-ui.github.io/ng-sq-ui/#/. We have also revamped out live examples app which you can now find on https://ng-sq-ui.xyz/!

Communication updates!
Added https://spectrum.chat/sq-ui community for public releases.
Added new slack channel for general SQ-UI discussions http://bit.ly/ng-sq-slack. (Spoiler: at some point this year, we’d try to release SQ-UI for Vue as well! We’d love to hear your suggestions and/or opinions!)

Old NG-SQ-UI slack channel (http://bit.ly/ng-sq-ui-slack) will be left for development needs and Angular-specific development.
New contact email: contact@sq-ui.xyz

Statistics for the current release
101 Commits, 52 PRs, 92 files changed, and a ton of code added :D
Freelancers on dev.to
Tags: discuss, career, freelancing
Published: 2019-02-11 10:51:47

---
title: Freelancers on dev.to
published: true
description: Tell us more about your freelancing experiences
tags: discuss, career, freelancing
---

I'm having a little poll on [twitter](https://twitter.com/DamCosset/status/1094571818504069120) right now, asking a simple question to freelancers. Do you estimate that you have enough work, too few or too much compared to what you would ideally want?

I thought it would be more interesting to ask freelancers (or former freelancers) their experiences concerning freelancing.

I am especially interested in knowing:

- What type of freelancers you are/were? Part time? Full time? Just for non-profit on the evenings?...
- Was your income satisfying to you as a freelancer?
- What made you change your professional situation? From traditional job to freelancer and vice versa.

Really curious to have people from different parts of the world share their experiences about freelancing.
Latest Technology We Saw at CES 2019
Tags: computertechnician, newtechnology, rogersamara, latesttechnologyces
Published: 2019-02-11 10:25:23

---
title: Latest Technology We Saw at CES 2019
published: true
description:  CES is an annual trade show that no tech lover can afford to miss. Every year people from around the world eagerly wait to attend the CES tech show.    
tags: computertechnician, newtechnology, rogersamara, latesttechnologyCES
---
Coda Code Collapse?
Published: 2019-02-11 10:17:46

---
title: Coda Code Collapse?
published: true
description: Now I'm a huge fan of Coda for the mac, i've been running it for a year or so - its a stunning piece of software. I do however have one GIANT annoyance with it... Where is a code collapse feature? - its essential surely! I thought with the plugin system someone might have made something, but alas nothing to be found. Does anyone else find it incredibly annoying not being able to collapse code segments? 
tags: 
---
★ A package to use Artisan Tinker in your browser
Tags: laravel, php
Published: 2020-01-02 23:17:22

---
title: ★ A package to use Artisan Tinker in your browser
published: true
date: 2019-02-11 10:00:00 UTC
tags: laravel, php
canonical_url: https://freek.dev/1268-a-package-to-use-artisan-tinker-in-your-browser
---

Laravel comes with a very handy [`tinker`](https://laravel.com/docs/5.7/artisan#tinker) command out of the box. Unfortunately running multiple lines of code on the command line, or editing the code you just executed, can be a bit bothersome. That's why we created [a new package called laravel-web-tinker](https://github.com/spatie/laravel-web-tinker) that allows you to run arbitrary code in your browser.

Once installed this is what it looks like:

![Web tinker in the browser](https://freek.dev/uploads/media/laravel-web-tinker/light.png)

There's also a dark mode available:

![Web tinker in dark mode on the brower](https://freek.dev/uploads/media/laravel-web-tinker/dark.png)

Under the hood, it works like this. Whenever you press `cmd+enter` the code will be sent via an HTTP request to the server. The [`WebTinkerContoller`](https://github.com/spatie/laravel-web-tinker/blob/0c8c4eacb982554a5fb8e98b1598debbb1c60d08/src/Http/Controllers/WebTinkerController.php) will just pass the code through the [`Tinker`](https://github.com/spatie/laravel-web-tinker/blob/master/src/Tinker.php) class. The code will be executed there and the results will be returned as the response. Nothing special going there.

Because this package can run code arbitrarily we recommend against installing it in a production environment, or any environment where you handle real-world data. We urge you to install the package using the `--dev` flag

```
composer require spatie/laravel-web-tinker --dev
```

This means that the package will not be installed when you run `composer install --no-dev` on your production server (this is something you should be doing already).

There are some more config options. Check out [the readme on GitHub](https://github.com/spatie/laravel-web-tinker) to learn more about the package.

Happy tinkering!
Adding 3rd party SDK to your apps?
Tags: android, sdk, development, google
Published: 2019-02-11 08:56:37

---
title: Adding 3rd party SDK to your apps?
published: true
description: 
tags: android, SDK, development, google, 
---

I know, a lot has been said now about adding some 3rd party SDK to your app, as Google started banning a lot of apps or developers recently. But tbh, most of the cases i have seen, were developers fault.

As i have read, if your app has been removed due to having 3rd party SDK, its basically, coz you havent mentioned it properly in TOS. You had to change your TOS with providing info of what you have added, and what you are collecting, and then you could have reuploaded the app without the fear of getting banned. Most of developers havent done that, and just reuploaded apps back, without clearing up anything, which resulted in ban from store.

TL;DR, do you think its still profitable doing that, if you make all the TOS clear, and do everything "by the book"?
How to expose your local development server
Tags: nginx, linux, tutorial
Published: 2019-10-01 22:26:00

---
title: How to expose your local development server
published: true
description: Simple nginx setup for a public access to your local web server. It supports SSL and works behind a NAT.
tags: nginx, linux, tutorial
canonical_url: https://www.kostolansky.sk/posts/expose-your-local-development-server/
---

If you need to expose your local development web server to the Internet, there are multiple tools you can use. For example: [ngrok](https://ngrok.com), [pagekite](https://pagekite.net), [forward](https://forwardhq.com), [localtunnel](https://localtunnel.me), ...

Or, you can build your own for free, if you have your own VPS. It can support SSL and works behind a NAT. Here is how.


## Server setup

You will need an nginx server installed on your VPS and a domain name pointing to it, like `dev.example.com`.

Then add this (or similar) nginx configuration:

```nginx
server {
    listen 80;
    server_name dev.example.com;
    rewrite ^ https://dev.example.com$request_uri? permanent;
}

server {
    listen 443 ssl http2;

    server_name dev.example.com;

    access_log off;
    error_log off;

    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header Host $http_host;
    }

    ssl_certificate /path/to/ssl/dev.example.com/fullchain.pem;
    ssl_certificate_key /path/to/ssl/dev.example.com/privkey.pem;
}
```

The interesting part is the `proxy_pass`. It will point `dev.example.com` to the local port `8000` on the server.

Make sure that the following option is allowed in the `/etc/ssh/sshd_config` and reload the SSH server if needed:

```bash
GatewayPorts clientspecified
```


## Local setup

Now you need to create an SSH tunnel betweeen your local machine and the server.

On your development machine, put this function inside your `.bashrc` file (or `.zshrc` if you are using ZSH). In this example, `me` is a remote linux user for the SSH access into the VPS.

```bash
function devtunnel {
    ssh -nNT -R "127.0.0.1:8000:localhost:${1}" me@dev.example.com
}
```

This will forward the remote port `8000` to the local port specified as an argument; `-n` prevents reading from stdin, `-N` means that you do not want to execute remote commands, `-T` disables pseudo-tty allocation, and `-R` means reverse port forwarding.


## Usage

After this setup, exposing your local development server is easy. If you are a Rails developer, you are running your local web server on the port `3000`. To expose it publicly, run this locally:

```bash
devtunnel 3000
```

After that, you (or someone else) can visit `dev.example.com` to access your local server. Enjoy!


---

Original article: [How to expose your local development server](https://www.kostolansky.sk/posts/expose-your-local-development-server/)
I need advice for UI improvement.
Tags: discuss
Published: 2019-02-11 06:50:30

Hi everyone.

I created a basic Vue project. It fetches pulls requests and issues of the current week from dev.to'  GitHub repository.

Website Here: [https://aligoren.github.io/dev-recap/](https://aligoren.github.io/dev-recap/)

GitHub Repo Here: [https://github.com/aligoren/dev-recap](https://github.com/aligoren/dev-recap)

I know, it really looks bad. Because I just spent only 10 minutes. So, I didn't have time to think about UI. Now, what should I do to more beautify it?

What is your advice?
React Native Button Width Fit To Content
Tags: react, reactnative, android, javascript
Published: 2019-02-11 05:03:58

---
title: React Native Button Width Fit To Content
published: true
description: React Native Button Width Fit To Content
tags: #react #reactnative #android #javascript
---

Source : <a href="https://www.skptricks.com/2019/02/react-native-button-width-fit-to-content.html" > React Native Button Width Fit To Content</a>

This tutorial explains how to make button width fit to content in react native application. This is a very easy and simple, just we need to wrap the Button component inside the View component with some style sheet design.




Make button width fit to content in react native :
Lets see the below complete source code that helps to set the width fit to the content in react native application.
Use the below layout design to create button.
Apply the below stylesheet design.
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Button, Text } from "react-native";

export default class App extends Component {


  render() {
    return (
      <View style={styles.container}>

        <View style={styles.buttonOuterLayout}>

          <View style={styles.buttonLayout}>
            <Button title="Login " />
          </View>

          <View style={styles.buttonLayout}>
            <Button title="Register " />
          </View>


          <View style={styles.buttonLayout}>
            <Button title="Logout " />
          </View>

          <View style={styles.buttonLayout}>
            <Button title="Forgot Password " />
          </View>

        </View>

      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  buttonOuterLayout: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonLayout: {
    marginBottom: 10
  }
});

Screenshots : 



This is all about React Native Button Width Fit To Content. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
React Native Generate Random Number Between 1 to 100 in Android or iOS
Tags: react, reactnative, javascript, android
Published: 2019-02-11 05:02:28

---
title: React Native Generate Random Number Between 1 to 100 in Android or iOS
published: true
description: React Native Generate Random Number Between 1 to 100 in Android or iOS
tags: #react #reactnative #javascript #android 
---

---
Source :- <a href="https://www.skptricks.com/2019/02/react-native-generate-random-number.html" > React Native Generate Random Number Between 1 to 100 in Android or iOS</a>
---

n this tutorial we are going to generate random number between 1 to 100 in react native application. To generate random in react native application we are going to use JavaScript inbuilt function Math.floor() and Math.random() function is used in this tutorial. The Math.floor() function is used to round the given number to its downward integer value. The Math.random() function is used to Generate Random Number to any range in Point Float value. So we would use both Math.floor() and Math.random() function together to generate random number between given range.

In this example we are displaying random number in android screen, when user clicks on generate random number button. we are using below javascript function to generate random number :

<a href="https://www.skptricks.com/2019/02/react-native-generate-random-number.html" > React Native Generate Random Number Between 1 to 100 in Android or iOS</a>

<img src="https://4.bp.blogspot.com/-zAZXnccjjp0/XF_DjftrTGI/AAAAAAAACak/VHVSWEKtBdgM2ZXGxnJ80YTkOfACk9zowCLcBGAs/s640/random.png" />
I used Bootstrap too often and I wonder how can I write good CSS without it?
Tags: discuss, beginners, css
Published: 2019-02-11 04:42:45

---
title: I used Bootstrap too often and I wonder how can I write good CSS without it?
published: true
tags: discuss, beginner, css
---

Hi everyone! I'd like to discuss with you all about learning CSS properly w/o using frameworks.

What tutorials or roadmap do you think will help developers who used Bootstrap learn how to make their own CSS?

Some background: I'm a JS developer experienced in React and Express, but for the last few years all my work conveniently used Bootstrap to scaffold its CSS. Now I wonder how can I learn to create nicely spaced forms and responsive layout without it?

Furthermore, Bootstrap has free CSS snippet resources like Bootsnipp. Is there a similar website but for framework-less CSS?

I'm familiar with media query, margin, padding and all CSS basics, but putting them all together to make a simple responsive website is something I had forgotten.

Thanks for your help. DEV rocks!🤟

Update: thank you all for your suggestions and comments, I've also been looking for this stuff and has been able to come up with some interesting links:

Tania Rascia's [post](https://www.taniarascia.com/you-dont-need-a-framework/) on making your own responsive website and navigation component. A bit outdated with jQuery in there, but still relevant nonetheless.

One of the things I've been wanting to do for a long time is indeed learning about Flexbox and Grid, but I never got to wrap my head around Flexbox.

This [tutorial](https://medium.freecodecamp.org/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af) by Ohans Emmanuel seems promising, and it even has a course on [educative.io](https://www.educative.io/collection/5191711974227968/5741031244955648?authorName=Ohans%20Emmanuel).

Will try his tutorial and report back again here later.
async/await explained as simply as I humanly possibly can
Tags: javascript, beginners, webdev, tutorial
Published: 2019-02-11 04:30:00

Put `async` in front of a function.

eg. `async function test() {}` or `const test = async () => {}`

Now you can use `await` inside that function to pause and wait for values that take their time getting back to us.

Here's an async function:

```javascript
// Define our async function and let it use await
async function test() {
  const response = await fetch("https://api.github.com/"); // Wait for the Promise
  const json = await response.json(); // Wait to resolve the Promise
  console.log(json); // Log the response
}

test(); // Run the function
```

Okay that's it! Get it now?

If not, [go here](https://dev.to/siwalik/async-programming-basics-every-js-developer-should-know-in-2018-a9c) for a better explanation. Or leave a comment and I'll try to help out.
MacBook Pro setup ?
Tags: mac, setup, productivity, development
Published: 2019-02-11 01:46:44

---
title: MacBook Pro setup ?
published: true
description: 
tags: mac, setup,Productivity,development 
---

Hello everyone this is my last hope I hope that someone can help me.

I bought a 24” 1080p monitor (hp hv240a) and connected it to a MacBook Pro 15” using usb c dongle but i was shooked when i saw the quality of the text on mac it was blurry and like i am using an old monitor unlike what i saw when I connected it to a windows machine.

I need you help developers in solving that.

For your information: 
I’m using latest update for the macbook. 
I tried the codes in the internet.
Who cares about SoloLearn.com?
Tags: sololearn, discuss
Published: 2019-02-11 01:08:09

---
title: Who cares about SoloLearn.com?
published: true
description: Have you ever been in a situation where SoloLearn was relevant?
tags: sololearn, discuss
---

I discovered that the local government here recommends SoloLearn.com to unemployed people who want to become a developer. I was once bored and finished all of these SoloLearn courses in a day. They sent me a cute little certificate for each course.

Personally I feel this is a load of crap. It hasn't really taught me anything and I sincerely doubt SoloLearn is going to make _the_ difference on my resume but I am highly opinionated and arrogant.

So I want to know your experience, have you ever applied for a job or come across an organisation that cares about SoloLearn or has even heard of it? Any type of self study has value of course and the lessons are not bad perse but are these courses/certificates really worth anything when you are applying for a job in the real world?
Demo your App in your GitHub README with an Animated GIF
Tags: readme, documentation, markdown, github
Published: 2019-02-11 00:52:51

---
title: Demo your App in your GitHub README with an Animated GIF
published: true
description: Make it easy for others including potential employers to see your app in action in your GitHub README by adding an animated GIF.
tags: README, documentation, markdown, GitHub
---

I have my GitHub link on my resume and if I'm lucky, potential employers might check out my apps on GitHub. However, I know they're busy and won't have much time to spend so I wanted to make it easy for them and others visiting my repo and show the app in action in the `README.md` file that's displayed when you go to a repository.

Embedding a video in a GitHub README would be a dream come true, but as I found out, it's not possible--you'd have to link to the video instead. You can, however put an animated GIF in a README file and that's what I've done with many of my projects. 

Here's one for my [Farmer's Market Finder app](https://github.com/kellim/farmers-market-finder):

![App Demo](https://thepracticaldev.s3.amazonaws.com/i/mvzlzme0fc38bpou4gql.gif)


Unfortunately, animated GIFs can't normally be as long as videos, but you can use them to quickly show off some core functionality of your app.

## How to Create an Animated GIF?

Here are a couple apps you can use to create animated GIF screen recordings.

### Windows
I like to use [ScreenToGif](https://www.screentogif.com/) which is a free open source app for Windows 7 or later. The software is intuitive to use for simply creating an animated GIF of an area you choose on your screen and they also have a [User Guide](https://github.com/NickeManarin/ScreenToGif/wiki/help).

### Mac
I use [Gifox](https://gifox.io/) when creating animated GIFs of my screen on the Mac. It sits up in my menu bar and is easy to use. I use the paid version because GIFs created with the free version are limited to 10 seconds and have a watermark. 

### Other
I know I've left out options for other operating systems and devices, but I only wanted to recommend the ones I've tried myself. Please comment below if you can recommend other apps for taking animated GIF screen recordings.

## Adding the Animated GIF to your README

Once you've created the animated GIF, you can embed it in your `README.md` file like you would a regular image.

I usually create a 'Demo' Heading in my README under the description of the app and put the animated GIF under the Demo heading along with a link to a demo of the site online.

If you don't have a good place to host images, you could do what I have done and create a `demo` (or better named) folder in your GitHub repository and upload the GIF there, then link to it in the README. 

**Example:**

`![Farmers Market Finder Demo](demo/demo.gif)`

Note: The alt text is what goes between the square brackets and then the URL to the GIF goes between the parentheses. If the image is in your GitHub repository, you can use a relative link like I did in the example.

Thanks for reading my first post!
React Fullscreen Lightbox At Development!
Tags: react, reactlightbox, lightbox, fullscreenlightbox
Published: 2019-02-11 00:31:09

---
title: React Fullscreen Lightbox At Development!
published: true
description: Working on version of Fullscreen Lightbox that will work in React.js environment.
tags: react, react lightbox, lightbox, fullscreen lightbox
---
Currently working on version of Fullscreen Lightbox that will work in React.js environment.
Developer will be able to easily include lightbox as a one React component.
Check how work is going on GitHub repository:
https://github.com/PiotrZdziarski/React-FsLightbox-Basic

Fullscreen Lightbox Website: 
https://fslightbox.com/
![React Fullscreen Lightbox](https://thepracticaldev.s3.amazonaws.com/i/fzpfawn8zm7jlebbq6l1.png)