teleren/devto huggingface dataset:
Vega Unfurl Slack app
Tags: discuss, vega, unfurl, slackapp
Published: 2019-11-11 18:12:51

---
title: Vega Unfurl Slack app
published: true
description: Vega unfurl Slack app
tags: #discuss #vega #unfurl #slackapp
cover_image: https://github.com/RandomFractals/vega-unfurl/blob/master/images/vega-unfurl-example.png?raw=true
---

So, I did start working on this [Vega unfurl Slack app](https://github.com/RandomFractals/vega-unfurl) last week. 

Should I finish it?

# Usage Example

1. Paste this [Vega-Lite](https://vega.github.io/vega-lite/) 
Bar Chart JSON spec example into online [Vega Editor](https://vega.github.io/editor):

```json
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": "Bar Chart",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
```

2. Click Share in Vega Editor to copy encoded vega spec URL.

3. Paste vega spec URL into a Slack channel in a workspace with the installed vega-unfurl app.

You should see that shared link expended with a new attachment containing vega chart title, description and json schema information extracted from the shared encoded link.

![Vega Unfurl Example](https://github.com/RandomFractals/vega-unfurl/blob/master/images/vega-unfurl-example.png?raw=true 
 "Vega Unfurl Example")

# References

[Everything you ever wanted to know about unfurling ...](https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254)

[All will be revealed ...](https://medium.com/slack-developer-blog/all-will-be-revealed-ebcad7c531f0)

[Unfurling links in messages](https://api.slack.com/docs/message-link-unfurling)

[Slack Events API](https://slack.dev/node-slack-sdk/events-api)

[Developing Slack apps locally](https://slack.dev/node-slack-sdk/tutorials/local-development)
Aliases: Making the command line your friend
Tags: beginners, productivity, git
Published: 2019-11-11 17:54:00

---
title: Aliases: Making the command line your friend
published: true
description: How many times a day do you write the same terminal commands? Wouldn't it be nice if there was a faster way to write out the commands you use every day? Well, there is and it's aliases. 
tags: explainlikeimfive, beginners, productivity, git
---

How many times a day do you write `git add`, `git commit -m` and `git push` in your terminal? Tons! Wouldn't it be nice if there was a faster way to write out the commands you use every day? Well, there is and it's aliases.

I'll be going over using aliases with Zsh which is now the default shell for Macs using Catalina. Zsh is an extended version of Bash but it has a few additional features and has support for plugins and themes.

## Making an Alias

You'll need to open your Zsh configuration file (`.zshrc`) and add the following syntax at the bottom of the file to make your alias:

`alias [custom-alias]=["command"]`

I use [Ember](https://emberjs.com/) at work so I'm constantly writing out the full command to run my tests. Instead of having to write `ember test --server --launch=false` every time I've set up the following alias:

`alias ets="ember test --server --launch=false"`

Now, whenever I want to run my tests I use the command `ets` and have saved myself a little bit of time typing!

## Oh My Zsh

Another advantage of using Zsh as your shell is that you can install [Oh My Zsh](https://github.com/robbyrussell/oh-my-zsh) which is a framework for managing your Zsh configuration. 

You can install Oh My Zsh via curl:

`sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
`

Besides having awesome plugins and themes, Oh My Zsh also includes a _ton_ of git aliases. You can see which ones are available by running `alias`. There are a ton of preconfigured aliases and all you have to do is add them to your `.zshrc` configuration file.

---

What's your favorite Git alias? I'd love to know in the comments below!

Be sure to follow me on [Twitter](https://www.twitter.com/karaluton) for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.
Cheap count(*) in Postgres
Tags: postgres, pg, database
Published: 2019-11-11 17:47:44

---
title: Cheap count(*) in Postgres
published: true
description: Neat Pg hack to get a cheap table row count
tags: postgres, pg, database
---

Running `select count(*) from mytable` in Postgres can be expensive for large tables. Beacause of its MVCC concurrency model it must do a lot of work to get an exact figure.

If we're not careful the database can start using a lot of CPU, disk IO and cache memory. Not great in production where the database presumably is pretty busy doing other important work...

But if we're new to a database and just looking around, **we don't care about the exact number**. We just need to know if it would be dangerous to run queries on the table to start investigating the broken data after that nasty bug.

There are other ways to do this, but here's a simple and easy-to-remember trick: use the query plan from `explain`.

```sql
explain select count(*) from my_table;
                                   QUERY PLAN                                    
---------------------------------------------------------------------------------
 Aggregate  (cost=1901498.40..1901498.41 rows=1 width=8)
   ->  Seq Scan on my_table  (cost=0.00..1815135.52 rows=34545152 width=0)
(2 rows)
```

See that `rows=34545152`? That's the rough number of rows in the table.

35 million. Careful with those full table scans...
What is Blazor? A Tutorial on Building Web Apps with Authentication
Tags: aspnetcore, netcore3, programming
Published: 2019-11-11 17:41:25

---
title: What is Blazor? A Tutorial on Building Web Apps with Authentication
published: true
description: Learn how to build client-side Web apps using Blazor and how to secure them with Auth0.
tags: #aspnetcore #netcore3 #programming 
canonical_url: https://auth0.com/blog/what-is-blazor-tutorial-on-building-webapp-with-authentication/
---
TL;DR: This tutorial introduces the Blazor framework by guiding you in building a simple Web application with C#. It will also show you how to integrate your Blazor application with Auth0 in order to secure it. Following the steps described in this tutorial, you will end up building two versions of a simple Web application. You can find the full code in this GitHub repository.

[Keep reading 🚀] (https://auth0.com/blog/what-is-blazor-tutorial-on-building-webapp-with-authentication/?utm_source=dev&utm_medium=sc&utm_campaign=blazor_tut_webapp)

![The OpenID Connect Handbook](https://cdn.auth0.com/blog/illustrations/blazor-logo.png)
🎉🎉 JSitor- Introducing new Editor Layouts
Tags: javascript, css, html, webdev
Published: 2019-11-11 17:37:02

[JSitor](JSitor.com) is a place to experiment, debug, and show off your HTML, CSS, and JavaScript creations.

![](https://github.com/jsitor/jsitor/raw/images/New%20layouts.png)

Know more about JSitor - 

{% link https://dev.to/ashvin777/jsitor-an-alternative-of-codepen-jsbin-and-jsfiddle-1l98 %}

{% link https://dev.to/ashvin777/jsitor-mobile-app-an-alternative-of-jsfiddle-codepen-and-jsbin-434o %}
Learning Python: Week 2
Tags: python
Published: 2019-11-11 17:21:15

This was a busy week but I've managed to learn quite a bit of the language.

Time for some projects!

In the book, there are 12 projects(automating tasks)
So, my goal is to do at least 2 project per week.

I'll be posting what I've learnt in each project as they come.

I'm also learning PyQt5 at the same time. :)
How should go APIs be structured?  
Tags: go, architecture
Published: 2019-11-11 17:18:30

I'm working on a code base that is about yr old.  We basically follow this pattern.  Its working for us but I wish I had more examples of 'the GO way' to structure an API. Is there even a go way?  Really we're just doing it the way a Java/C# API would. 
```
/CORE/ #domian struts etc
/HANDLERS/ #just http interaction
/SERVICES/ #basically all the business logic
/DAL/ #data access (mostly postgres)
```
Introduction to Azure Functions Pt. 4 - Deploying the Azure Function
Tags: azure, serverless, dotnet, devops
Published: 2019-11-11 17:16:36

---
title: Introduction to Azure Functions Pt. 4 - Deploying the Azure Function
published: true
description: 
tags: azure, serverless, dotnet, devops
series: Introduction to Azure Functions
---

## Introduction
In this post we will deploy the Azure Function we created to the resources in Azure that we created.

## Prerequisites
To deploy the Azure Function we will be using the azure-functions-core-tools cli. Instructions for installing the CLI can be found [here](https://github.com/Azure/azure-functions-core-tools#installing).

The azure-functions-core-tools cli will need the Azure CLI in order to authenticate you. Installation instructions for the Azure CLI can be found [here](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest)

We will be using the command line in this section. Some basic knowledge of the command line will be useful. 

Shell commands will be prefixed with `$`.

## Login with the Azure CLI
To publish your function project to a Function App you must login with the Azure CLI.

1. In any directory login to the Azure CLI
    ```sh
    $ az login
    ```
2. This will launch a login process in your default browser. Login to Azure to continue.

## Deploying the Azure Function
1. Change directories into the `Functions` project of your locally cloned repository.
    ```sh
    $ cd ~/code/HelloAzure/HelloAzure.Functions/
    ```
2. Deploy to your Function App
    ```sh
    $ func azure functionapp publish <FunctionAppName>
    ```
    1. Substitute `<FunctionAppName>` with the name of the Function App you created in Azure.
3. This will build and publish your function project to the specified Function App.
4. You should see console output similar to the following
    ```sh
    Getting site publishing info...
    Creating archive for current directory...
    Uploading 3.45 MB [#########################################]
    Upload completed successfully.
    Deployment completed successfully.
    Syncing triggers...
    Functions in <FucntionAppName>:
        SayHello - [httpTrigger]
            Invoke url: <FunctionAppInvokeURL>
    ```
5. You may test your deployed function by visiting the Invoke url and adding a query parameter for `name`. If you see a response with the message `Hello, <name>` congrats! Your function has been deployed.

## Recap
In this post we authenticated with the Azure CLI. We then deployed our function project to our Function App. Finally we verified that the function app was succesfully deployed by visiting the Invoke url.


The next step is to automate the function deployment with a CI/CD pipeline.
JavaScript mastered. As a FE Dev now what?
Tags: discuss
Published: 2019-11-11 16:38:33

---
title: JavaScript mastered. As a FE Dev now what?
published: true
tags: discuss
---

This year I came to to realization that I'm quite comfortable with JavaScript ("vanilla" or frameworks). But I want to expand either going to the Backend or with Apps or something else entirely. 

I know that the question is very vague, but surely there are others here that started with JS and moved to/learned another language. 

What would your suggestions/experience be?

Thanks!
I Learned Rust and Developed (badly) kwik in a day, Ask Me Anything!
Tags: ama
Published: 2019-11-11 16:35:01

---
title: I Learned Rust and Developed (badly) kwik in a day, Ask Me Anything!
published: true
tags: ama
---

I developed a tool called [kwik](https://github.com/sam-aldis/kwik)
after learning rust in a day.

I don't think its complex or even written well and my understanding of rust still has a way to go but if you want to learn to write rust code in a day ask me a question.
kwik - [now with docker image]
Tags: docker, devops, rust, python
Published: 2019-11-11 16:31:48

---
title: kwik - [now with docker image]
published: true
description: A first project in rust
tags: docker, DevOps, rust, python
cover_image: https://raw.githubusercontent.com/sam-aldis/kwik/master/kwik.png
---
[Update] - Any repo can be cloned and the prefix _/ acts as a quick way to type https://github.com/

So yesterday I wrote and released the kwik tool to help quickly bootstrap a new development environment. Today it got more useful.

The new Docker Image was uploaded to the dockerhub meaning you can now run:
```sh
$ docker run -it -p 9091:9091 ukjp/kwik
> kwik -o linux -p _/sam-aldis/kwik -d kwik-dev
# Where _/sam-aldis/kwik is your github repo (_/ gets replaced with github.com
# OR:
> kwik -o linux -p https://mygitprovider.com/my/repo -d my-repo
```
and instantly have a docker container with an ide bootstrapped that you can now work on running in your browser on port 9091!

Now commit this container to a new image and push it to your docker repo and you can share your project with your team, with your plugins for vscode and environment exactly the same as on your machine!

please help me by up-voting on producthunt:
[here](https://www.producthunt.com/posts/kwik)
and staring on github:
[https://github.com/sam-aldis/kwik](https://github.com/sam-aldis/kwik)

any help on the project itself will be hugely appreciated as unless it takes off I don't have enough time day-to-day to keep working on it.
Windows Docker Container for Apache JMeter 5.2
Tags: docker, jmeter, windows, performance
Published: 2019-11-11 16:12:56

Apache JMeter 5.2 has been released with loads of new features, enhancements, and bug fixes. Last month, I published [Windows Docker for Apache JMeter 5.1.1.](https://qainsights.com/windows-docker-container-for-apache-jmeter-5-1-1/).

After JMeter 5.2, I have updated my Windows Docker GitHub repository with the latest release details. Please check it out.

{% github QAInsights/windows-docker-jmeter %}

Here is the [Docker Hub](https://hub.docker.com/r/qainsights/windows-docker-jmeter).

For more posts, please visit [my blog](https://qainsights.com).
Three Reasons You Need to Learn to Program
Tags: education, learn, programming, beginners
Published: 2019-11-11 16:10:45

Basic understanding of computer logic is more needed today than ever before, and this trend will only continue for the foreseeable future. Our world is more and more technological and the less we know about how computers and programs work the more we are put at the mercy of the creators.

We need to stop being consumers and start to have at least a basic understanding of computer programming across all ages.

The majority of my programming is for fun. I do have the ability to create some useful apps for my team at work, but that is a secondary function I serve.

Even though I am not a paid software engineer, I love to sit down and solve some problems with code. Just keeping that skill share reaps many more benefits than having a niche at work or showing off to my friends and family.

## Increased Problem Solving
When we learn fundamental programming concepts, we are able to exercise the part of our brain that solves problems. Have a repetitive task at work? Computers are great at this and can perform these tasks much faster than us humans.

Taking the time to create an extension or small script to automate the stuff that is boring allows our brains to practice solving problems. Plus we cut back on all the mind-numbing tasks we have to do.

Maybe I'm just lazy, but this is one of the best parts of programming.

The more tasks I automate, the more I look for other ways to simplify my everyday computer tasks. Looking for problems to solve and then finding a way to resolve that pain point with a script not only saves time in the long run but also strengthens the mental muscle.

The more time we spend exercising the problem-solving part of our brain the more likely we are to solve more significant challenges in our personal lives and in business.

## Mental Engagement
The mind is a muscle, and the more we make it work, the sharper it becomes. This allows us to think deeper but also has effects on our long-term mental health.

The more we engage our mental muscle, the better we function at work or school, the more satisfying our relationship with friends, family, and co-workers become, and we tend to gain higher self-esteem overall.

## Adds Interest to a Resume
Even if you have no intention to become a software engineer (I don't blame you) having programming experience in Python or JavaScript to solve a problem in work or personal life looks great on a resume.

It can show a future employer that you take time on your own to learn and improve yourself. You may be the only one they see with any programming experience, and that could be the tipping point between an interview or not. It's all about being unique and sticking out in a crowd of overqualified people.
React lifecycle methods
Tags: react, javascript
Published: 2019-11-11 16:08:57

---
title: React lifecycle methods
published: true
description: How to use componentDidMount() in React
tags: reactjs, javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20190929-lifecycle-methods.jpeg
---

## How to use componentDidMount() in React

React lets us create either functional components or class components.
Functional components are just functions, while class components are instances of a class.

Since class components extend `React.Component` they automatically inherit methods defined in React for us.
Some of these methods are called *component lifecycle* methods because they are invoked by React at certain points in time in the life of a component.

In the class components that we define we can override these default methods with our own version so we can add functionalities that come into play at a specific point in the life of our component.

One of such methods is `componentDidMount()` which is called automatically after the component has been rendered on the page.
`componentDidMount()` can't be placed inside a functional component because a functional component only renders `JSX` and does little else.

We add `componentDidMount()` to a class component when we need to perform some operation immediately after the component was rendered on the page.
Here's how we define `componentDidMount()` into a class component:

```js
class Pokemons extends React.Component {

  componentDidMount {
    // do something here
  }

}
```

Now that we have the method in our class, what are we going to do with it?

`componentDidMount()` is usually the place where we fetch data from an external data source, like an API or a database and update the state with that data.
Since we update the state with `setState()`, React will re-render the component with the new data displayed.

Here's an example.
Suppose the data comes into our application via an external `API` call and is placed into an array called `pokemonData`.
In the `Pokemons` constructor we initialize the state to an empty array, because we know `pokemonData` comes in as an array.

```js
class Pokemons extends React.Component {
  constructor() {
    super();

    this.state = {
      pokemons: [] 
    }
  }
}
```

Next we define `componentDidMount()` as the place where we fetch the data and update the component state to include this new data that has just come in.

```js
  componentDidMount() {

    // Fetch data from some external API and put it into pokemonData
    // then set the state to this new data:

    this.setState({pokemons: pokemonData})
  }
```

After `componentDidMount()` runs the `pokemons` property in our state is assigned the value of `pokemonData`.
The component is rendered and the new state is displayed in our component.

In a future article we'll see how to fetch data from an external API.

`componentDidMount()` is only one of several lifecycle methods available to us. We will look at other lifecycle methods in the coming days.
Rendering images smoothly using React Hooks
Tags: react, hooks, animation
Published: 2019-11-11 16:10:38

---
title: Rendering images smoothly using React Hooks
published: true
date: 2019-11-11 16:01:59 UTC
tags: react,hooks,animation
canonical_url: https://medium.com/@alirezavalizade/rendering-images-smoothly-using-react-hooks-8cf9362263a5
---

_simple hook to render images smoothly._

In this article I’m going to create very simple Hook to render images smoothly on the screen (Not really rendering but sort of trick).

1. Create a file “useImage.js” and wrap it with “Hooks” directory with these contents:

![](https://cdn-images-1.medium.com/max/1024/1*r-Z9gI8lnsItMOAV_im-0w.png)

This is very basic hook you can add your own stuff, it depends on your needs, like handling errors or whatever which is related to image.

2. Let’s add some styles to handle the transitions:

![](https://cdn-images-1.medium.com/max/1024/1*8Hni6blWdXPeMMdWsgkqNA.png)

3. I’m going to create a “Cover” component to reuse it everywhere.

![](https://cdn-images-1.medium.com/max/1024/1*AEWwZkuBz9s2pZDAs-X6eQ.png)

Let’s see the result.

### Demo Time

Check it out on [Sandbox](https://codesandbox.io/s/boring-austin-beief)

![](https://cdn-images-1.medium.com/max/600/1*tSuDSmoMOKTP7LQ2rq7qoQ.gif)
WHY SHOULD YOU START USING THE IONIC FRAMEWORK?
Tags: ionic, hybrid
Published: 2019-11-11 16:01:05

###**1. If you're a frontend developer web developer and you want to build mobile application with web technologies (HTML, CSS and JavaScript)**###
    
The Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop applications using web technologies(HTML, CSS & JavaScript). Basically you could build quality applications with rich **User Interface** for both mobile, desktop and web applications all from one codebase (Awesome isn't it?). You could read more about the framework [here](https://ionicframework.com/docs/intro)

###**2. It Integrates with popular Frontend Frameworks and Libraries**###

Ionic makes development easy as it integrates with your popular framework or library. Ionic has official integration with Angular and React while Vue is currently in beta mode. In the previous versions of Ionic, it was tightly coupled to Angular (based on the fact that the framework was built on top of Angular) but now it can work with any other framework of choice (React, Preact, Vue) or with no framework at all. 

###**3. It is Cross-Platform**###

You can build great web apps, mobile apps(both Android and iOS) and desktop applications all from one code base. No need going through the stress of learning different languages for different platform. Ionic take all that stress away from you so you could focus on the most important task (Building Your App).

###**4. It is Open Sourced and has a huge Ecosystem**###

Ionic Framework is a free and open source project, released under the permissible [MIT license](https://opensource.org/licenses/MIT). This means it can be used in personal or commercial projects for free. There are millions of Ionic developers in over 200 countries worldwide. You could join the community by following the official [Twitter](https://twitter.com/Ionicframework) Page to stay updated about the latest information, or joining the [Slack](https://ionicworldwide.herokuapp.com/) to meet and chat with other developers. The official [Github](https://github.com/ionic-team/ionic) repo where you could report bugs and/or request new features or you could also join the [Ionic Forum](https://forum.ionicframework.com/) for asking questions and sharing Ideas.


*Ionic overall is a great framework that's easy to learn and get started with so I'd advise you jump right in and experience the awesomeness of the framework*