teleren/devto huggingface dataset:
User Study: TED App
Tags: userstudy, ui, ux, uidesign
Published: 2019-10-19 18:24:45

---
title: User Study: TED App
published: true
tags: user-study,ui,ux,ui-design
canonical_url: 
---

Firstly, let me give you some information about TED. As stated on their official website:

> TED is a nonprofit devoted to spreading ideas, usually in the form of short, powerful talks (18 minutes or less). TED began in 1984 as a conference where Technology, Entertainment and Design converged, and today covers almost all topics — from science to business to global issues — in more than 100 languages. Meanwhile, independently run TEDx events help share ideas in communities around the world.

![](https://cdn-images-1.medium.com/max/940/1*UGnpwo-rY4ETfC9JKC37xg.png)

Personally, I think that this app has a pretty sweet design. This was one of the reasons why I decided to do a User Study for this app. I asked my brother to install and just freely move around exploring all the features.

So, he installed the app on his phone and the first thing I noticed was that there was no First-time-Tutorial. That was a little odd.

![](https://cdn-images-1.medium.com/max/1024/1*wPiwn_cpwMF6FsxwzsoJ9w.png)<figcaption>Home Screen</figcaption>

He navigated his way to different section all by himself and then finally came to the profile section. The profile section has a ‘Log In’ option but no ‘Sign Up’ option.

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

![](https://cdn-images-1.medium.com/max/1024/1*4N-Sx0aV41CpGlaoWqaTaw.png)

When you click on ‘Log In’, it redirects you to the login page which is not very pleasing.

Also, there are only two options for logging in: via Facebook which redirects you to yet another page and via normal email and password method.

There is no login via google option which was quite odd as most apps provide google sign up/login option.

But Surprisingly, ‘Sign Up’ option is available on this page. To add more to the discomfort, it will redirect you to official TED site for signing up your account which is really annoying.

After all this, he managed to create his account and as he was trying to search for some video I noticed a badly placed search button. This search button is placed at the bottom and it took him a while to realize that it’s not in the top menu.

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

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

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

Finally, he selected and played the video and everything worked well. He discovered another feature which is that the audio will keep on playing even when we have minimized the video. It’s a cool feature and was appreciated by the user.

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

#### Observation

TED app has a really good design but the sign up and login interface can be improved and the search option should also be moved to the top bar instead of bottom right corner.
How to replace mixin to slot in Vue.js
Tags: vue, javascript, react
Published: 2018-06-18 12:13:38

---
title: How to replace mixin to slot in Vue.js
published: true
description: 
tags: Vue.js, JavaScript, React
---

Mixin is one of Vue.js feature.

https://vuejs.org/v2/guide/mixins.html


This gives options common to multiple components.

React also had a mixin in the past, but it is now deprecated.

This reason is descripted in follow documents.

* https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html
* https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

Summary is here.

* Introduce implicit dependencies
* Cause name clashes
* Cause snowballing complexity

There also may apply on Vue.js.

# How to replace mixin? Answer: slot.

In React, we can resolve this probrem with higher order components or functional children.

In Vue.js, we can replace mixin with slot.

In this article, I use mouse event tracking example.

## First: Use mixin pattern.

Mixin example is here:

```js
// mouseMixin.js
export default {
  data() {
    return {
      x: 0,
      y: 0
    };
  },
  methods: {
    mousemove(e) {
      this.x = e.clientX;
      this.y = e.clientY;
    }
  }
}
```

and Components example is here:

```html
<!-- Item -->
<template>
  <div @mousemove="mousemove">
    <div>Item with mixin</div>
    <div>x: {{ x }}</div>
    <div>y: {{ y }}</div>
  </div>
</template>

<script>
import mouseMixin from "./mouseMixin"

export default {
  mixins: [ mouseMixin ],
};
</script>
```

Finally, components is called those:

```html
<!-- Parent.vue -->
<template>
  <div>
    <Item />
  </div>
</template>

<script>
export default {
  components: {
    Item,
  }
};
</script>
```

In this example, some properties (`x`, `y` and `mousemove`) is implicit. It's not to easy to find those properties.

## Next: Use slot


First, write mixin usage component:

```html
<!-- Item.vue -->
<template>
  <div>
    <div>Item with scope</div>
    <div>x: {{ x }}</div>
    <div>y: {{ y }}</div>
  </div>
</template>

<script>
export default {
  props: {
    x: Number,
    y: Number
  }
};
</script>
```

This is very simple because got only `x` and `y`.


Next, we create `MouseEvent` component.
This got `x` and `y` from `mousemove` and pass to `<slot>`

```html
<!-- MouseEvent.vue -->
<template>
  <div @mousemove="mousemove">
    <slot :x="x" :y="y"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: 0,
      y: 0
    };
  },
  methods: {
    mousemove(e) {
      this.x = e.clientX;
      this.y = e.clientY;
    }
  }
};
</script>
```

And last, combine `<MouseEvent>` and `<Item>` with `slot-scope`.

```html
<!-- Parent.vue -->
<template>
  <div>
    <MouseEvent>
      <div slot-scope="{x, y}">
        <Item :x="x" :y="y" />
      </div>
    </MouseEvent>
  </div>
</template>

<script>
export default {
  components: {
    MouseEvent,
    Item,
  },
};
</script>
```

Okay, It's work.


We can replace `slot` from `mixins`. You can use this pattern when avoid `mixins`
But Vue.js scope is so redundancy. It's a little pain point
Mobile Apps and Web Development Company
Tags: uiuxdesign, mobiledevelopment, webdev, seo
Published: 2018-06-18 11:51:07

---
title: Mobile Apps and Web Development Company
published: True
description: Mobile Apps and Web Development Company - Develop apps in iPhone, Android and Website in WordPress, Magento, Laravel, PrestaShop.
tags: UI/UX Design, Mobile Development, Web Development, SEO
---
From Newbie to Presenter: My Path to Speaking at Empex
Tags: conferencetalk, empex, elixir, phoenix
Published: 2018-06-18 11:37:25

---
title: From Newbie to Presenter: My Path to Speaking at Empex
published: true
description: Last year I attended Empex and was inspired to get to work. This year, I gave a talk there. 
tags: conference talk, empex, elixir, phoenix
---

I attended [Empex](http://empex.co/) last year for the first time. Empex is an awesome, dynamic, inspiring, one-day Elixir conference. As an Elixir newbie, I had _no idea_ what anyone was talking about. And I hated it! (Okay, I kind of loved it). 

It really gave me a kick in the butt to dive in and keep learning. That's what I love about that "lost and confused" feeling. Because I actually _hate_ that feeling, it pushes me to work harder, build more and keep learning. 

I left Empex last year and immediately starting building. I wanted to re-build an app I made in React with Node and Socket.io that allows users to pair program on and chat about various coding challenges. I felt that Phoenix Channels would be the right fit and great way for me to dive into Elixir and Phoenix. 

I worked on that app for several months, slowing building out my MVP and adding more and more featuring--a chat box! A fancy glow that surrounds the name of the person that is currently typing! 

Because last year's Empex conference had such a big impact on me, I was thrilled when my proposal was accepted for this year's event. You can check out my full talk below and you can check out the code for the project that started it all [here](https://github.com/sophiedebenedetto/phoenix-pair).

{% youtube 7L5xuTbXtbI %}


I learned a lot from that project, and it inspired lots of blog posts. If you're interested in taking a deeper dive into some Phoenix topics, you can check out my articles here:

* [Using Agent to Maintain Channel State in Phoenix](http://www.thegreatcodeadventure.com/using-genserver-to-maintain-channel-state-in-phoenix/)
* [Tracking User State with Phoenix Presence](http://www.thegreatcodeadventure.com/tracking-user-state-with-phoenix-presence-react-and-redux/)
* [JWT Auth with Phoenix and React Router 4](http://www.thegreatcodeadventure.com/tracking-user-state-with-phoenix-presence-react-and-redux/)

And don't forget to check out some of the other incredible Empex talks from this year. I especially recommend Kate Travers' ["Pattern Matching: The Gateway to Loving Elixir"](https://www.youtube.com/watch?v=FXjpHRMsERI); Mat Trudel's ["`mix new beats` -- Recreating The "Amen Break" with Elixir"](https://www.youtube.com/watch?time_continue=3&v=XN4WuOujr38) and of course the [key note](https://www.youtube.com/watch?v=6U7cLUygMeI) by Dave Thomas who will make you hate all the code you've ever written (and inspire you to get to work!)
Even More Robust Features in Updated Devart ODBC Drivers to Tap into Data Seamlessly 
Tags: odbc, odbcdrivers, odbcconnection
Published: 2018-06-18 07:59:38

---
title: Even More Robust Features in Updated Devart ODBC Drivers to Tap into Data Seamlessly 
published: true
description: Devart released the upgraded versions of ODBC drivers with advanced compatibility, improved speed of operation, and other useful functionalities.
tags: odbc, odbc drivers, odbc connection
---

Devart, Czech software provider of database connectivity solutions and tools for database management and development, has announced the release of updated versions of ODBC drivers for clouds and databases from Windows, macOS, Linux, both 32-bit and 64-bit. Adopting enhanced ODBC drivers, users can smoothly tap into needed data within many popular IDEs, leading analytics and reporting tools, as well as various programming languages. 

Here’s the scoop on new features of Devart ODBC drivers:

- All ODBC drivers now provide a possibility to return String Types as Ansi or Unicode

- Starting from this release, ODBC driver for MySQL supports the latest MySQL version 8.0 along with sha2_password, caching_sha2_password authentications.

- In MongoDB driver, document fetching is greatly speeded up.

- ODBC driver for Zoho CRM now allows users to select Domain – the URL to the Zoho CRM.

- Compatibility with MS Access, Tableau, Omnis Studio, Power Pivot and DBeaver was significantly enhanced eliminating any issues while using Devart ODBC drivers.

Take a closer look at some of the new features that are now available in ODBC Drivers for Databases and Clouds: https://www.devart.com/odbc/ .

About Devart

Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration and backup solutions. The company also implements Web and Mobile development projects.
Learn more about Devart at https://www.devart.com .
and now, we're off to build the future of finance
Tags: newjob, developer, crypto, career
Published: 2020-04-02 06:19:28

---
title: and now, we're off to build the future of finance
published: true
date: 2018-06-18 07:00:00 UTC
tags: newjob, developer, crypto, career
canonical_url: https://www.jaysonjphillips.com/blog/2018/06/and-now-were-off-to-build-the-future-of-finance/
---

On Friday, I said farewell to the internal team at [Trilogy Education Services](https://trilogyed.com). As of today, I’m the Engineering Manager of Risk and Fraud for the Consumer group over at [Coinbase](https://coinbase.com).

It was a little bittersweet to leave this team: I’ve led all sorts of initiatives while being a Senior Manager on the Web team at Trilogy:

- Lead development of the new version of our student- and instructor-facing class UI
- Helped to design and develop the path forward for the new platform and API
- Developed and implemented our code management and release strategy
- Designed and drafted our first pass at a new Apprenticeship program

However, I’ll continue teaching the program the pilot of the online version of our Coding Bootcamp at UC Berkeley Extension. I still very much believe in the promise and the mission of accelerating the workforce and through teaching, it helps me to achieve my goals in doing my part to make software development careers more accessible to the underrepresented and those with “unlinear” paths to the tech industry.
What are your programming blogs?
Tags: discuss
Published: 2018-06-18 06:10:03

---
title: What are your programming blogs?
published: true
tags: discuss
---

Hi. I need programming blogs to read. So, what are your programming blogs? You can also suggest blogs that are not yours.

Programming languages and technologies don't matter.

[This is my blog](https://aligoren.com) sometimes I write in English.
Intro to the GraphQL 
Tags: graphql, javascript, webdev, beginners
Published: 2018-06-18 03:10:00

---
title: Intro to the GraphQL 
published: true
description: GraphQl is Query Language For your APIs It helps us to fetch only required resources instead of over fetched 
tags: graphql,javascript,webdev,beginners
cover_image: https://cdn.pixabay.com/photo/2017/03/07/13/03/mindmap-2123973_960_720.jpg
---


GraphQL is Query Language For your APIs It helps us to fetch only required
resources instead of over fetched and it is Not only limited to the single
programming language, an alternative to the Rest.


## GraphQL is a Type Specific Language

You can easily create GraphQL types by using  the Schema Definition
Language.

GraphQL comes with a set of scalar types out of the box

- String
- Int
- Float
- Boolean
- ID



Let's See in Practice  How it Works 

I'm Using Apollographl package to create a Graphql-server.

```
mkdir graphql-example
cd graphlql-example
```

 we need to initialize the Package.json file and install dependencies

```
npm init -y
npm i --save graphql apollo-server@rc
```

Open graphql-example folder in  your Favourite Code Editor

![](https://thepracticaldev.s3.amazonaws.com/i/c9bzblvcwp5h49w078dr.png)

create a  server.js file

Now we need to require from the apollo-server.

```javascript
const { gql, ApolloServer } = require('apollo-server');
```


It's time to create a Type Definitions

In this Example, I'm showing a Person type 

```javascript
const personType=gql`
 
type Person{
    name: String!
    age: Int!
  
}

type Query{
  getPerson: Person!
}
`
```

Like in above code we defined Person Type must hold name and age

Query Means fetching the Data Like if we invoke a getPerson our output
should like Person type.

Exclamation mark (!): It means that field is not nullable


By writing the Query GraphQL Doesn't Do Anything we need to tell GraphQL how to resolve the getPerson Query.


so that we need to Resolve the getPerson Query now

```javascript
const resolvers = {

    Query: {
        getPerson:()=>{
            return {
                name: 'James',
                age: 12
            }
        }

    }
};
```

At final we need to pass the typeDefinitions and resolvers to the ApolloServer constructor.

```javascript
const server = new ApolloServer({
    typeDefs: personType,
    resolvers
});


server.listen({
    port:5000
}).then(({ url }) => {
    console.log('Server is Up at' + url)
});

```

 server.js
 {% gist https://gist.github.com/saigowthamr/bb0ab0ffd01926dfa23e2f3cdcae5582 %}


Now open Your Terminal and run node server.js

In your Browser open *http://localhost:5000*  you can see a Graphiql Playground looks like below image.

![](https://thepracticaldev.s3.amazonaws.com/i/d9kwx4pbs297lj3n8fsx.gif)


originally published at [reactgo.com](https://reactgo.com/graphql-intro-beginners/)

Hope You enjoyed  Happy coding...
Train Your SMS FAQ Bot Via Slack
Tags: slack, javascript, node, api
Published: 2018-06-18 03:00:35

---
title: Train Your SMS FAQ Bot Via Slack
published: True
description: Two weeks ago we built a “Serverless” SMS FAQ Bot”, which answers questions from an FAQ knowledge base via SMS using StdLib, MessageBird, and QnAMaker.ai in 6 minutes! We turned a boring FAQ laundry list into a fun and interactive way for your users, customers, or website’s visitors to learn more about your product/service via simple SMS text to your Bot. But what if a user asks a good question that isn’t in the FAQ? This week, we will set up an easy way to add new content to your FAQ service via Slack slash commands!
tags: #slack, #javascript, #nodejs #api, 
---

{https://codeburst.io/build-a-serverless-sms-faq-bot-part-2-training-via-slack-343552f219b}
How to configure the 'Actions on Google' console for Google Assistant
Tags: engineering, googleassistant
Published: 2020-09-22 10:27:33

---
title: How to configure the 'Actions on Google' console for Google Assistant
published: true
date: 2018-06-18 00:00:00 UTC
tags: Engineering,GoogleAssistant
canonical_url: https://www.loginradius.com/engineering/blog/how-to-configure-the-actions-on-google-console-for-google-assistant/
---

Time Required : less than 10 minutes. Technologies : None. Prerequisites : None. This tutorial will go over how to configure the ‘Actions on Google’ console so that it can be used for your Google Assistant actions/events that can be accessed anywhere the Google Assistant is…

   
[Read On](https://www.loginradius.com/engineering/blog/how-to-configure-the-actions-on-google-console-for-google-assistant/)
New features in C# 8
Tags: dotnet, csharp, programming
Published: 2018-06-17 22:24:07

---
title: New features in C# 8
published: true
description: New features in C# 8
tags: dotnet, csharp, programming
---

After an amazing version 7.x in 2017, a new C# is being built and it is going to include new useful features.

However, if you don’t know the new features in C# 7.x, you must read the following posts; you can’t imagine how you can improve your code using this new features:

https://mteheran.wordpress.com/2017/12/01/features-c-7-0-7-1-7-2/
https://blogs.msdn.microsoft.com/dotnet/2017/03/09/new-features-in-c-7-0/

A specific roadmap for C# is not published, but now we can check the new features coming in the official repository: https://github.com/dotnet/csharplang/issues

Nullable reference types:

A great feature was introduced in C# 6. The Null-conditional operator helps to check if an object or variable is null before accessing an internal value. For example:

```csharp
int? length = mynumbers?.Length;
```

Unfortunately, we cannot use this feature for String Type. In this case, the feature consists in allowing the developers to declare a String type as Nullable:

```csharp
String? strVar = null;
var length = strVar?.Length;
```

Async Streams:

Basically, async streams are the asynchronous equivalent of IEnumerable. This feature allows the developers to use the async keyword within a foreach as the following syntax:

foreach await (string s in asyncStream)
In order to use that code, you have to define the collection as IAsyncEnumerable:

async IAsyncEnumerable<T> MethodName()
Default Interface Implementations:

Let’s start checking the following code:

```csharp

Interface ICal 
{
    Void TurnOn();
}
Calculator : ICal
{
   void TurnOn()
   {
   }
}

```

Everything is easier using interfaces and as we know, we can use multiple implementations. But if we want to add a new method within the interface, all the classes implementing that interface need to create a local method with the same name and return the same value.

Now in C# 8, we can implement a method directly within the interface like this:

```csharp
Interface ICar 
{
    Void TurnOn();
}
Car : ICar
{
   void TurnOn()
   {
   }
}
Interface ICal 
{
    Void TurnOn();
    double SumNumbers( double number1, double number2 ) 
    {
       return number1+ number2 
    }
}
Calculator : ICal
{
   void TurnOn()
   {
   }
}

```

Extension Everything:

This proposal was reported as an issue in github and you can see the summary in the following link:

https://github.com/dotnet/roslyn/issues/11159


For example, an extension of a class person:

```csharp

extension MyPersonExtension extends Person 
{ 
   public int NumberOfFingers() 
   { 
      get { … } 
   } 
}

```

You can find more information in the following links:

https://www.infoq.com/news/2017/08/CSharp-8

https://channel9.msdn.com/Blogs/Seth-Juarez/A-Preview-of-C-8-with-Mads-Torgersen#time=32m11s
Add Coding Symbols to VSCode
Tags: vscode
Published: 2018-06-19 02:57:46

---
title: Add Coding Symbols to VSCode
published: true
tags: vscode
canonical_url: 
---

As developers we spend more time reading code, that writing. One of the most common tasks we do are compare items. Using symbols can make your code easier & more enjoyable to read.

Here's an example of how adding coding symbols, also known as font ligatures look.

[![VS Code using Fira Code font ligatures.](https://mattferderer.com/static/code-symbol-preview-2ab22531392495cde253634d93667edf-25de8.jpg)](/static/code-symbol-preview-2ab22531392495cde253634d93667edf-25de8.jpg)

To add this to your VS Code, do the following:

1. 

Install the [Fira Code font](https://github.com/tonsky/FiraCode) on your computer.

2. 

Edit your user settings in VS Code to use Font Ligatures and the 'Fira Code' font.

```
"editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace, 'Segoe UI Emoji'",
"editor.fontLigatures": true,
```

That's it! You're done! Enjoy an improved coding experience!
Technology Must Know When to Say "I Don't Know"
Tags: ux
Published: 2018-06-17 18:58:20

---
title: Technology Must Know When to Say "I Don't Know"
published: true
description: We don't always do a great job of informing users when our programs have lost any grounds for predicting an outcome.
tags: ux
cover_image: https://thepracticaldev.s3.amazonaws.com/i/by72jhmkg7dgsip7xh2y.png
---

I was riding home on the highway last night when our car came to a stop due to traffic from an accident on the highway. Waze had been predicting the time it would take to get home, using crowdsourcing and Google's aggregate traffic data to give a pretty accurate prediction. But in this case when Waze tried to keep us informed, it had no idea.

We came to a stop and the program adjusted its expectations by about 10 minutes, then 20, 30, 40. Soon enough it was expecting a wait of about 90 minutes. This didn't make my fellow passengers very happy—but the program was useless at that point.

Waze had no clue. Waze can't predict the future, it can only make accurate predictions based on aggregated data, not specific answers relating to the prediction. Waze has no idea how long the tow trucks are going to take, what might be holding up the ambulance or the police investigation. Waze is completely in the dark as to what might actually make these cars keep moving.

And yet Waze kept giving predictions. This is a bug. The most accurate prediction in this case is "I have no clue".

As technology becomes "smarter", it encroaches on a concept previously left to the humans: _nuance_. Software-driven human interfaces need to be able to handle nuance if they are responsible for those kinds of situations. Devs are very familiar with the idea of faking things. We fake progress bars when we don't have any clue how long a thing is going to take—only that it will take a shortish amount of time. We don't always do a great job of informing users when our programs have lost any grounds for predicting an outcome.

When the answer is unknown or nuanced, an assertive "I don't know" beats an inaccurate prediction.