teleren/devto huggingface dataset:
WEB DESIGN and FRONT-END DEVELOPMENT (Part-4 and Final)
Tags: wireframes, mockups, prototype, typography
Published: 2019-03-26 16:13:54

---
title: WEB DESIGN and FRONT-END DEVELOPMENT (Part-4 and Final)
published: true
description: Front-End Development, meaningful and readable HTML, markup best practices.
tags: #Wireframes, #Mockups , #Prototype, #TYPOGRAPHY
---

Wireframes, Mockups and Prototypes: What’s the Difference?

Wireframes, if properly created, serve as the backbone of the product. It’s just like an architectural blueprint of a house: It states plainly and clearly what should go where. It has three simple objectives; the clear presentation of:
1.	Main groups of information
2.	Layout/structure of information
3.	Core visualization and descriptions of user interface interactions

	The main groups of content (what?)
	The structure of information (where?)
	A description and basic visualization of the user – interface interaction (how?)

Mockup, is a middle to high fidelity, static, design representation. Very often a mockup is a visual design draft, or even the actual visual design. A well created mockup:
–	represents the structure of information, visualizes the content and demonstrates the basic functionalities in a static way
–	encourages people to actually review the visual side of the project
Mockups are often confused with wireframes, due to the names of some software companies.

Prototype 

A prototype is a mid- to high-fidelity representation of the final user interface. The goal of a prototype is straightforward: Simulate the interaction between the user and the interface.
Whenever a button is clicked, the appropriate action must occur, mimicking the experience of a full product. It should allow the user to:
–	experience content and interactions with the interface
–	test the main interactions in a way similar to the final product


TYPOGRAPHY

Typography is the visual component of the written word.
TYPEFACE/ FONTS/ FONTS-FAMILY 
A design for a set of characters. Popular typefaces include Times Roman, Helvetica, and Courier.
There are two general categories of typefaces: serif and sans serif. Sans serif typefaces are composed of simple lines, whereas serif typefaces use small decorative marks to embellish characters and make them easier to read. Helvetica is a sans serif type and Times Roman is a serif type.

Finding 

According to most studies, sans serif fonts are more difficult to read. For this reason, they are used most often for short text components such as headlines or captions.

FONT-FACE

@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed. This means that web designers will no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer.
•	@font-face { font-family: myFirstFont; src: url(sansation_light.woff);}
•	@font-face {font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold;}

Thanks a lot for stay connected with my series of article on "FRONT-END DEVELOPMENT" :)
How to make the teamify dialog re-appear in Office 365
Tags: sharepoint, office365
Published: 2019-03-26 15:38:38

---
title: How to make the teamify dialog re-appear in Office 365
published: true
description: Quick tip for those who want to show the teamify dialog again after permanently hiding it
tags: SharePoint, Office365
cover_image: https://thepracticaldev.s3.amazonaws.com/i/yual1r4bb6hxcfa8oi9i.png
---

Here's a quick tip for those who have permanently dissmissed the "Teamify" site dialog in an Office365 group site.

![Teamify dialog screenshot](https://thepracticaldev.s3.amazonaws.com/i/t6ra3p9zzs9qf101hwzf.jpg "The teamify dialog in all its glory")

## PnP PowerShell snippet

```
$siteUrl = "<full url to your site collection>"
# Show Teamify prompt again
$site = Get-PnPTenantSite -url $siteUrl 
# Temporarily disable NoScript
$site.DenyAddAndCustomizePages = [Microsoft.Online.SharePoint.TenantAdministration.DenyAddAndCustomizePagesStatus]::Disabled
$site.Update()
$site.Context.Load($site)
$site.Context.ExecuteQuery()

Connect-PnPOnline -Url $siteUrl
Remove-PnPPropertyBagValue -Key TeamifyHidden

# re-enable NoScript
$site.DenyAddAndCustomizePages = [Microsoft.Online.SharePoint.TenantAdministration.DenyAddAndCustomizePagesStatus]::Enabled
$site.Update()
$site.Context.ExecuteQuery()

```

The short version of what this script does is that it temporarily removes the NoScript limitation enforced on all group sites in Office 365. This is done so we can remove the "TeamifyHidden" propertybag value which is what controls whether or not the dialog should be visible. Finally we re-enable NoScript. 

For those who don't know, the teamify dialog allows you to create an Office 365 team attached to your existing group site. There are of course other ways of doing this, the most common being to attach your existing group site to a new Team through the Teams interface 

![create a team from an existing site](https://thepracticaldev.s3.amazonaws.com/i/5yt3ihwr14jsibvucyy4.jpg "create a team from an existing site")
How do you work through a problem?
Tags: discuss
Published: 2019-03-26 15:26:11

Hello,

I'm curious what everyone here does when they are faced with a particularly stubborn issue.

This could be with anything, programming, graphic design, QA, etc.

For me specifically, if StackOverflow doesn't have the answer I need I look to the community. If it's a problem with my own code, then I check to make sure I can replicate the bug. Then I run the debugger to see if I can find the issue quickly.

I move from there.

How do you all do it?
Move subscribeToMore to be more declarative by moving it to the template
Tags: vue, graphql, hasura
Published: 2019-03-26 14:16:05

---
title: Move subscribeToMore to be more declarative by moving it to the template
published: true
description: In this lesson we will see how we can use ApolloSubscribeToMore component to move all our query and subscriptions syntax to the template being more declarative.
tags: Vue, GraphQL, Hasura
series: Vue and GraphQL with Hasura
---

In this lesson we will see how we can use ApolloSubscribeToMore component to move all our query and subscriptions syntax to the template being more declarative.
Using subscribeToMore when defining a query to get partial updates
Tags: vue, graphql, hasura
Published: 2019-03-26 14:15:22

---
title: Using subscribeToMore when defining a query to get partial updates
published: true
description: In this lesson we will see how we can use subscriptions to get partial data and compliment our defined queries. In that way we won't need to reload the whole dataset, but only the latest added data
tags: Vue, GraphQL, Hasura
series: Vue and GraphQL with Hasura
---

In this lesson we will see how we can use subscriptions to get partial data and compliment our defined queries. In that way we won't need to reload the whole dataset, but only the latest added data
Configure real time updates in your Vue app with Subscriptions
Tags: vue, graphql, hasura
Published: 2019-03-26 14:14:48

---
title: Configure real time updates in your Vue app with Subscriptions
published: true
description: In this lesson we will finally add real time capabilities to our app by adding GraphQL Subscriptions that were also auto-generated for you by Hasura engine. 
tags: Vue, GraphQL, Hasura 
series: Vue and GraphQL with Hasura
---

In this lesson we will finally add real time capabilities to our app by adding GraphQL Subscriptions that were also auto-generated for you by Hasura engine. We will reconfigure our Apollo client from using simple solution as apollo-boost to more complex setup for subscriptions. We will learn how to use $subscribe in our apollo provider and will see how data is updated in real time.
Delete posts conditionally using delete_posts mutation
Tags: vue, graphql, hasura
Published: 2019-03-26 14:13:53

---
title: Delete posts conditionally using delete_posts mutation
published: true
description: Hasura auto generates GraphQL API in specific way. for inserting the data we used insert_posts mutation. In this video we will learn how to use delete_posts mutation as well as add conditions to our delete logic using where input type provided by Hasura. 
tags: Vue, GraphQL, Hasura
series: Vue and GraphQL with Hasura
---

Hasura auto generates GraphQL API in specific way. for inserting the data we used insert_posts mutation. In this video we will learn how to use delete_posts mutation as well as add conditions to our delete logic using where input type provided by Hasura.
Different ways of using GraphQL mutations in our Vue app for inserting posts
Tags: vue, graphql, hasura
Published: 2019-03-26 14:13:17

---
title: Different ways of using GraphQL mutations in our Vue app for inserting posts
published: true
description: Now when we can easily query the data in different ways, it's time to make our app more interactive. In this lesson we will cover how to execute mutations in our Vue app and how to insert a new data by creating AddPost form.
tags: Vue, GraphQL, Hasura
series: Vue and GraphQL with Hasura
---

Now when we can easily query the data in different ways, it's time to make our app more interactive. In this lesson we will cover how to execute mutations in our Vue app and how to insert a new data by creating AddPost form.
Use ApolloQuery component inside your template
Tags: vue, hasura, graphql
Published: 2019-03-26 14:12:08

---
title: Use ApolloQuery component inside your template
published: true
description: Apollo Client comes with ApolloQuery helper component that gives you an option to move all your data querying inside Vue template. In this lesson we will discuss how we can use it. In addition to that we will also use .gql files, so all of our queries, mutations and subscriptions will reside in one place in filesystem which will make them easier to find
tags: Vue, Hasura, GraphQL
series: Vue and GraphQL with Hasura
---

Apollo Client comes with ApolloQuery helper component that gives you an option to move all your data querying inside Vue template. In this lesson we will discuss how we can use it. In addition to that we will also use .gql files, so all of our queries, mutations and subscriptions will reside in one place in filesystem which will make them easier to find
Different gotchas when executing GraphQL queries
Tags: vue, hasura, graphql
Published: 2019-03-26 14:11:38

---
title: Different gotchas when executing GraphQL queries
published: true
description: In this video we will go through different ways to query for data and various methods apollo client provides us with, so we can manipulate the data in a way we want.
tags: Vue, Hasura, GraphQL
series: Vue and GraphQL with Hasura
---

In this video we will go through different ways to query for data and various methods apollo client provides us with, so we can manipulate the data in a way we want.
Setting up Vue app with Apollo client and querying GraphQL endpoint for data
Tags: vue, hasura, graphql
Published: 2019-03-26 14:08:53

---
title: Setting up Vue app with Apollo client and querying GraphQL endpoint for data
published: true
description: In this video we will start creating our Vue app by using Vue CLI and set it up using Apollo Client. We will connect it to our, already secured, GraphQL endpoint running in docker container locally and execute basic GraphQL queries
tags: Vue, Hasura, GraphQL
series: Vue and GraphQL with Hasura
---

In this video we will start creating our Vue app by using Vue CLI and set it up using Apollo Client. We will connect it to our, already secured, GraphQL endpoint running in docker container locally and execute basic GraphQL queries
📊 SLAO: Node.js + express monitoring tool
Tags: node, express, monitoring
Published: 2019-03-26 14:08:45

---
title: 📊 SLAO: Node.js + express monitoring tool
published: true
description: 
tags: node, express, monitoring
---

I've created a tool to monitor the performance and correctness of your REST API from a single dashboard. Unlike other overloaded APMs, SLAO is about the essentials. 

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

Give it a try here 👉 https://slao.io
Running Hasura engine locally on existing database
Tags: vue, hasura, graphql, postgres
Published: 2019-03-26 14:08:20

---
title: Running Hasura engine locally on existing database
published: true
description: In this video we will move from running Hasura engine in Heroku to running it locally using Docker, while still connected to Postgres database deployed to Heroku.
tags: Vue, Hasura, GraphQL, Postgres
series: Vue and GraphQL with Hasura
---
In this video we will move from running Hasura engine in Heroku to running it locally using Docker, while still connected to Postgres database deployed to Heroku. We will see that everything we defined in previous steps is kept intact and will illustrate how the engine can run on top of existing database as well as on a new one. As you can understand from this step, whenever you able to run engine in Docker container, basically you can run it on any environment in any cloud that supports Docker.
Securing Hasura GraphQL Endpoint with Admin Secret key
Tags: vue, graphql, hasura, postgres
Published: 2019-03-26 14:07:48

---
title: Securing Hasura GraphQL Endpoint with Admin Secret key
published: true
description: Leaving your GraphQL endpoint unsecured is a bad idea, so in this video we will walk through how to secure your GraphQL endpoint with a secret key. 
tags: Vue, GraphQL, Hasura, Postgres
series: Vue and GraphQL with Hasura
---

Leaving your GraphQL endpoint unsecured is a bad idea, so in this video we will walk through how to secure your GraphQL endpoint with a secret key.
{Destructuring} = JavaScript
Tags: javascript, destructuring
Published: 2019-03-26 14:05:54

---
title: {Destructuring} = JavaScript
published: true
description: Common Destructuring Patterns in JavasScript
tags: javascript,destructuring
---

Destructuring is great for referencing pieces of objects or arrays. I find it to be very useful, and fun.

If you're writing code like

```javascript
var thing = array[0];
var otherThing = array[1];
```
*or*
```javascript
var name = thing.name;
var age = thing.age;
var height = thing.height;
var userId = thing.id;
```
Then you've come to the right place. 

In this post I'll show some common uses of destructuring that simplify the above examples, and more.


# Example 1: Destructuring Arrays

Here are some common array destructuring patterns :


* Get the first element of an array
* Get the first element, and the rest of the elements
* Get the name property from the first element of the array
* Get the name property and then assign it to a variable called firstName
* Get the second element from the array

{% gist https://gist.github.com/micahriggan/2fe963033267bef56422ed3dae01ce63 %}
    


## Outputs
```
{ name: 'Bob' }
[ { name: 'Sam' }, { name: 'Tom' } ]
Bob
Bob
{ name: 'Sam' }
```
# Example 2: Destructuring Objects
Here are some common object destructuring patterns
* Get the title property of an object
* Get the title and pages property of an object
* Get the height property off an object, and name it bookHeight
* Get the ISBN property, which will default to '0000000'
* Get the title property, and everything else collected into a variable named rest

{% gist https://gist.github.com/micahriggan/51fd9db1cc9b09fd8041072da8cf87ef %}

## Outputs
```
A book title
{ title: 'A book title', pages: 55 }
100
0000000
{ pages: 55, height: 100, weight: 2, price: 3.5 }
```

# Example 3: Destructuring Parameters
In this example we've got some common destructuring patterns for function parameters
* Capturing many arguments in an array
* Getting the name property of an object
* Getting the first element of an array, and the remainder of the array
* Unpacking an array into a new array, with a new element at the end

{% gist https://gist.github.com/micahriggan/869d42a2e22a105fc491c1882ef11fc9 %}

## Outputs
```
[ 'Hello', 'World' ]
Micah
[ 'Second', 'Third' ]
[ 'First', 'Second' ]
```

## Conclusion
If you haven't been using destructuring, you should try it out. It's a great way to boil objects down into what you need. If you've got a favorite destructure that I didn't cover, put it down in the comments
Extending CRUD API with Remote Schemas and Event Triggers
Tags: vue, graphql, hasura
Published: 2019-03-26 14:03:45

---
title: Extending CRUD API with Remote Schemas and Event Triggers
published: true
description: This video is an introduction of Hasura capabilities of adding business logic to your CRUD API through two different methods: Remote Schemas and Event triggers. 
tags: Vue, GraphQL, Hasura
series: Vue and GraphQL with Hasura
---

This video is an introduction of Hasura capabilities of adding business logic to your CRUD API through two different methods: Remote Schemas and Event triggers. Remote schemas will basically give you an ability to stitch GraphQL schema, auto-generated by Hasura to any different GraphQL schema of maybe your own server or external GraphQL API. The other method is to use Hasura eventing system to add serverless functions triggered on database events. Both of these methods will be explained in more detail in future section of the course
Creating auto generated CRUD API with Hasura engine
Tags: vue, hasura, graphql, postgres
Published: 2019-03-26 14:00:59

---
title: Creating auto generated CRUD API with Hasura engine
published: true
description: In this video we will cover how to get started with Hasura engine and how it will auto generate GraphQL API for you. We will define the shape of data we will be using through the course for our blog cms app that we will be building
tags: Vue, Hasura, GraphQL, Postgres
series: Vue and GraphQL with Hasura
---

In this video we will cover how to get started with Hasura engine and how it will auto generate GraphQL API for you. We will define the shape of data we will be using through the course for our blog cms app that we will be building
What is GraphQL
Tags: vue, graphql, hasura
Published: 2019-03-26 13:59:10

---
title: What is GraphQL
published: true
description: In this video we will discuss basics of GraphQL and why it's better than REST. Even though this video will cover the basic concepts of GraphQL, If you wanna learn more about it, I suggest you check my free GraphQL bootcamp that I did recently to get more in-depth overview of what GraphQL is and it's capabilities
tags: Vue, GraphQL, Hasura
series: Vue and GraphQL with Hasura
---

In this video we will discuss basics of GraphQL and why it's better than REST. Even though this video will cover the basic concepts of GraphQL, If you wanna learn more about it, I suggest you check my free GraphQL bootcamp that I did recently to get more in-depth overview of what GraphQL is and it's capabilities

{% twitter 1096263629240844288 %}
Mac-Configurations
Tags: macosx, productivity, powerlevel10k, ohmyzsh
Published: 2019-03-26 13:02:53

---
title: Mac-Configurations
published: true
description: https://dineshbhagat.github.io/mac-configurations/
tags: macosx, productivity, powerlevel10k, ohmyzsh
---

{% github https://github.com/dineshbhagat/mac-configurations %}
What do you use to handle side effects in React-redux
Tags: react, discuss, javascript, webdev
Published: 2019-03-26 12:22:08

---
title: What do you use to handle side effects in React-redux
published: true
description: 
tags: react, discuss, javascript, webdev
---

I am about to start a project where I will be using react and redux, In previous applications I have built I used redux-saga to handle side effects like api calls e.t.c but the fact that redux-saga has so much boilerplate code I didn't really enjoy using it. I have used redux-thunk but not in production.

Please what other libraries do you use to handle side effects and why did you choose them over the available alternatives?
Total Guide To Custom Angular Schematics
Tags: angular, cli, rxjs, schematics
Published: 2019-03-26 11:43:39

---
title: Total Guide To Custom Angular Schematics
published: true
tags: angular,cli,rxjs,schematics
canonical_url: https://medium.com/@tomastrajan/total-guide-to-custom-angular-schematics-5c50cf90cdb4
---

### Total Guide To Custom Angular Schematics

![](https://thepracticaldev.s3.amazonaws.com/i/gt5ljbaa3r1nloo7eu5q.jpg)

Schematics are great! They enable us to achieve more in shorter amount of time! But most importantly, we can think less about mundane stuff which leaves our limited attention span to focus on solving real challenges!

☕☕☕☕☕ 20 minutes read

> This article will teach you how to create tailor made schematics specific to the needs of your project or organization! It will empower you and your colleagues to become much more productive!

[Read more...](https://medium.com/@tomastrajan/total-guide-to-custom-angular-schematics-5c50cf90cdb4)
Be careful with .pop
Published: 2019-03-26 10:55:42

I've been fighting with a weird bug in my app: if I'm sending a push notification to 2+ users, only the first one receives the notification.

The bug was that I `.pop`ed the `message` key from the data.

Here's how it works (pseudo-code):

```python
def send(users: [User], data: dict):
    notifications = reduce(lambda acc, user: acc + [Notification(user, data)], users, [])
    db.bulk_insert(notifications)
    for notification in notifications:
        notification.send()

...

def Notification.send(self):
    message = self.data.pop('message') 
    Firebase.send(message, self.data)
```

The first notification will be sent and I thought that `message` would be popped out of `self.data`, but actually **it would be popped out of the dict that `self.data` points to!** That means that every Notification object that has been initialized in the `send` function using `Notification(user, data)` (and not `Notification(user, data.copy())`) would not have `data['message']` anymore, leading to unexpected behavior.

If you really need to get rid of a key in a dict, you should `.copy()` it before mutating. 
If you don't - just stick to `.get()`.
Loanwords, Agriculture & WebAssembly
Tags: webdev, plt, webassembly, talk
Published: 2019-03-26 09:37:08

---
title: Loanwords, Agriculture & WebAssembly
published: true
description: A lightning talk about little languages on the front-end and the dangers of monocultures.
tags: web development, plt, wasm, talk
---

{% vimeo 292461893 %}

## 😻💖📢🚀 Loanwords, Agriculture & WebAssembly 😻💖📢🚀
This is a little talk I've given at Mozilla as part of the TechSpeaker training program. I really enjoy it and plan to develop it further. In this talk I make a case for building more languages to target the front-end or client side as a way to keep our web ecosystem fertile. It is in part a cautionary tale against monocultures and how the deprive the environment from a sustainable future and a call to action to build little languages.
Get a post id by URL with WP-CLI
Tags: php, wordpress
Published: 2019-03-29 15:56:54

---
title: Get a post id by URL with WP-CLI
published: true
tags: PHP,Wordpress
canonical_url: https://daniele.tech/2019/03/get-a-post-id-by-url-with-wp-cli/
---

This need was quite easy. An huge list of URLs, similar from this export but that case is from another tool. I did a specific package for WP-CLI that it is possible to use also with other tools like python because is possible to export as JSON. There is a big readme with all the [...]

[Read More...](https://daniele.tech/2019/03/get-a-post-id-by-url-with-wp-cli/)

The post [Get a post id by URL with WP-CLI](https://daniele.tech/2019/03/get-a-post-id-by-url-with-wp-cli/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
Table Print Gem
Tags: ruby
Published: 2019-03-26 20:03:41

---
title: Table Print Gem
published: true
tags: ruby
canonical_url: http://tableprintgem.com/
---

[Table Print Gem](http://tableprintgem.com/)

Wow! Superb tool to easily view data in a highly readable table format in IRB (Rails console/etc).