teleren/devto huggingface dataset:
Multiple Graphql Queries on a Single Page with Gridsome
Tags: gridsome, graphql, html
Published: 2020-08-02 21:25:38

---
title: Multiple Graphql Queries on a Single Page with Gridsome
published: true
date: 2020-07-23 00:00:00 UTC
tags: gridsome, graphql, html
canonical_url: https://rasulkireev.com/multiple-gridsome-queries/
---

Ever wonder how include multiple queries on the same page, when using Gridsome? Well, this is how.

Let's say you have the following queries:

```javascript
// query details about the current blog post 
query Post ($path: String!) {
  post: post (path: $path) {
    title
    date (format: "MMMM D, Y")
    content
    path
  }
```
and

```javascript
// query to pull all the webmentions on a specific post
query($path: String!) {
    mentions: allWebMention(filter: { wmTarget: { regex: $path } }) {
      edges {
        node {
          wmId
          wmProperty
          content {
            text
          }
          author {
            name
          }
        }
      }
    }
  }
```

The question is: How do you get both of those queries in your `Post.vue` template?

I was going to give you all the options that I tried before making this work, but that would be the waste of your time. So here is he working version:

```javascript
<page-query>
query Post ($path: String!) {
  post: post (path: $path) {
    title
    date (format: "MMMM D, Y")
    content
    path
  }
  mentions: allWebMention (filter: { wmTarget: { regex: $path } }) {
    totalCount
    edges {
      node {
        wmId
        wmProperty
        content {
          text
        }
        author {
          name
        }
      }
    }
  }
}
</page-query>
```

Then you can access these queries like this:

```html
<div>{{ $page.post.title }}</div>

<div 
v-for="mention in $page.mentions.edges"
:key="mention.node.wmId"
>
	<p>{{ mention.node.wmProperty }}</p>
	<p>{{ mention.node.content.text }}</p>
</div>
```

If you have any thougths, comments or questions please let me know on [Twitter](https://twitter.com/rasulkireev/status/1286433227960463360).
Make all of your Google Fonts SCREAMING fast
Tags: webdev, showdev, css, beginners
Published: 2020-07-22 23:44:24

I think we all know that one of the parts of building web pages that impacts performance the most is loading web fonts. That's long been a pain for a number of reasons - foremost because web fonts are often the cheapest, fastest way to get a good-looking type on your webpage.

With that convenience comes a price though...and that price is often one or sometimes even two seconds of load time on your web page.

At least...that was true until Harry Roberts of CSS Wizardry pulled out his magic wand and changed the Google Fonts game.

If you haven't read it, one of the most recent articles on CSS Wizardry is the best breakdown on performance of Google Fonts I've ever seen. Here's the link:

https://csswizardry.com/2020/05/the-fastest-google-fonts/

PLEASE read it if you care about web performance at all. It's a masterclass in what you can and can't do and a test from every conceivable angle on how to most optimize Google Fonts for speed.

And so immediately after I read it, I decided that in every web project I have, I'm going to replicate it. That's where I ran into a little bit of frustration. 

It's four lines of code that you have to get <i>exactly</i> right or else it won't work at all. That's how tags in the HTML head work. And while the code is <i>revolutionary</i>, it's cumbersome to copy, paste, and replace the URL of your new font every time.

Enter https://optimizefonts.com/d/1/1 

I finally decided I was just going to throw up a webpage where I could go, enter the URL to the font (or just the link tag) and it would give me back the code needed to optimize that font to the max.

No frills, no bells, no whistles. Completely free.

Go to https://optimizefonts.com/d/2/1 if you want to get the most speed you <i>possibly</i> can out of your Google Font.

Let me know how you all like the tool and if there's anything you would add to it! It's still very much a work in progress, so I'm very open to feedback!

<span>Photo by <a href="https://unsplash.com/@harleydavidson?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Harley-Davidson</a> on <a href="https://unsplash.com/s/photos/screaming-fast?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Humble JavaScript Coding Bundle (pay what you want and help charity)
Tags: javascript, codenewbie, beginners, webdev
Published: 2020-07-22 23:33:29

![Humble JavaScript Coding Bundle](https://dev-to-uploads.s3.amazonaws.com/i/kxgxbplvqa99nojaqc0i.png)

[Humble JavaScript Coding Bundle](https://www.humblebundle.com/software/javascript-web-development-software?partner=repsup)

JavaScript is used to create everything from websites to games, mobile apps, data science applications, and even the tech used in modern spacecraft.

Learn the basics by building a game, and then get industry-ready by building real projects – no experience required!

The JavaScript Coding Bundle launched on Wednesday, July 22 and lasts through Wednesday, August 12, 2020. When you pay what you want for this bundle, you also help support two charities: Girls Who Code and Worldreader.
TF-IDF Vectorization
Published: 2020-07-22 23:18:32

TF-IDF vectorization is a technique used to process natural language for machine learning. The purpose for TF-IDF comes from the idea that rare words give us more information about the contents of a document, than words used all of the time in a document. This idea to put a focus on these rare words to find value in documents came from tons of work simpler types of word counters, having them ignore common words to help focus on what makes the documents different from one another.

The TF-IDF itself is a combination of two separate metrics, term frequency and inverse document frequency. The term frequency aspect is pretty easy to understand due to it just being the total times a word appears in a document compared to the total amount of words in that document. 

![TF](https://dev-to-uploads.s3.amazonaws.com/i/p7k0ao7v8pcbf11dt1gg.png)
The inverse document frequency is a little more complicated, it's the log of the total number of documents in your dataset divided by the number of documents with that word in it. The vectorizer then multiplies this together to get a value indicating how important a word is and repeated this process for each and every word in the documents.

![IDF](https://dev-to-uploads.s3.amazonaws.com/i/3pwp5wgqo7jx8bor3yik.png)
#####Short Intro to Using the 'TfidfVectorizer' in 'sklearn'

For this example I will have my data imported in a pandas DataFrame with the column 'documents' representing the documents I am vectorizing.

######Import Libraries

`import pandas as pd`
`from sklearn.feature_extraction.text import TfidfVectorizer`
`from nltk.corpus import stopwords`

######Import Data

`data = pd.read_csv('path_to_csv_file.csv')`

######Initialize TfidfVectoizer

`vectorizer = TfidfVectorizer(strip_accents='unicode',stop_words=stopwords_list)`

######Compute Values
`tf_idf = vectorizer.fit_transform(data['documents'])`

######Create New DataFrame with the Column Names Being the Vectorized Word:

`nlp_name = pd.DataFrame(tf_idf.toarray(), columns=vectorizer.get_feature_names())`
Reapply the Previous Visual Selection in Vim
Tags: vim, tutorial
Published: 2020-07-22 22:55:27

Visual selections in Vim are powerful because they allow you to visually define a sub-context for all kinds of commands. Defining a precise visual selection can be important to making surgical changes.

Have you ever carefully defined a visual selection, had to back out of it to do something else, and then carefully re-define that same visual selection?

It's not a big deal, but as Vim users, we try to make every keystroke count. To this end, Vim has a way of reapplying the previous visual selection, which I cover in an episode of [Vim 🔥 Tips and Tricks](https://www.youtube.com/playlist?list=PL46-cKSxMYYDgMdQZ2FRU38gaFxIBBfoa).

{% youtube WOh-GZ8egRI %}

Hitting `gv`, from normal mode, will put you back into visual mode with the same bounds as the previously defined selection. See `:h gv`.

Vim is able to do this because it keeps track of the bounds of your previous visual selection using the `<` and `>` marks.

---

There is more where that came from. If you enjoyed this post and screencast, [subscribe to my newsletter](https://tinyletter.com/jbranchaud) and check out the rest of the [Vim 🔥 Tips and Tricks](https://www.youtube.com/playlist?list=PL46-cKSxMYYDgMdQZ2FRU38gaFxIBBfoa) series.
Django NameError: name 'os' is not defined
Tags: django, python, tutorial
Published: 2020-07-22 22:29:35

If you've started a new Django 3.1+ project and are using older tutorials or guides, it's likely to come across the following error on your command line:

```
NameError: name 'os' is not defined
```

Starting with Django 3.1, the `startproject` command generates a `settings.py` file that imports [pathlib](https://docs.python.org/3/library/pathlib.html) rather than [os](https://docs.python.org/3/library/os.html) on the top line.

The quick fix is to `import os` at the top of your `settings.py` file:

```python
# settings.py
import os # new
from pathlib import Path
```

The better fix is learn more about how `pathlib` works and update your `BASE_DIR`, `DATABASES`, `STATICFILES_DIRS`, and other files to use the newer, modern approach.
The first year of Your First Year in Code
Tags: discuss, watercooler, firstyearincode
Published: 2020-07-22 22:22:49


Today is an auspicious occasion!  It marks the first anniversary of dev.to's very own book - [Your First Year in Code](https://leanpub.com/firstyearincode)!

It was a year ago today that @ben announced the creation of  @isaacdlyman.

{% link https://dev.to/devteam/the-dev-community-published-a-book-your-first-year-in-code-1ejk %}

And what a year it has been!

For those of you mid-way through or finishing up your first year in code, how has it been?

For those of you who celebrate another year, what differences about the last year have you noticed?
Day 180: Full Pack
Tags: hiphop, code, coding, lifelongdev
Published: 2020-07-22 21:42:12

_liner notes_:
- Professional : Finally finished the draft for the blog post I've been working on. Recording some stuff in the terminal took a lot longer than I thought. Thanks to my team for letting me know about a program for the Mac to make gifs from videos and screen recordings. It's funny how you can find some gaps in your writing when you have to record a video based on the steps you wrote. Had a couple of talk prep sessions. Pretty productive day.

- Personal : Hmmm... what did I do last night? haha Probably was packing and maybe worked on the side project.

![The cliffs and oceans of County Clare, Ireland](https://dev-to-uploads.s3.amazonaws.com/i/tsp4oq5vcy4umma4kmoy.png)

Full pack mode for the rest of the night. Want to clear out my room tonight. I'll also submit the recording of the last radio show to the station to be played this week. Maybe listen to some tracks while I pack. (That rhymed! haha)

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube sTtpXgrBde0 %}
Hello World!
Tags: welcome
Published: 2020-07-22 22:19:49

Hey folks!

I'm Michael, I'm a hobbyist web designer, but occasionally I design websites for people. I'm interested in HTML, JS, CSS, Linux, Windows, and many other things. 

I've been lurking for a month or two now, but have only just created an account.
I hope I'm welcome here :)

You can find me everywhere at michaelmartin.xyz.
Olric: Distributed cache and in-memory key/value data store. Embedded or language independent service.
Tags: go, showdev, database
Published: 2020-07-22 22:02:55

**What is Olric?**

Distributed cache and in-memory key/value data store in Go. It can be used both as an embedded Go library and as a language-independent service.

With Olric, you can instantly create a fast, scalable, shared pool of RAM across a cluster of computers.

Basic features:

* Designed to share some transient, approximate, fast-changing data between servers,
* Embeddable but can be used as a language-independent service with olricd,
* Supports different eviction algorithms,
* Fast binary protocol,
* Highly available and horizontally scalable,
* Provides best-effort consistency guarantees without being a complete CP (indeed PA/EC) solution,
* Supports replication by default (with sync and async options),
* Quorum-based voting for replica control (Read/Write quorums),
* Supports atomic operations,
* Supports distributed queries on keys,
* Provides a plugin interface for service discovery daemons,
* Provides a locking primitive which inspired by SETNX of Redis.

See installation docs: [https://github.com/buraksezer/olric#installing]

See how to use distributed maps in your application: [https://github.com/buraksezer/olric#sample-code](https://github.com/buraksezer/olric#sample-code)

For more info, please take a look at GitHub page: [https://github.com/buraksezer/olric](https://github.com/buraksezer/olric)
New Relic's instrumentation is now open source
Tags: observability, opensource, opentelemetry, newrelic
Published: 2020-07-22 21:58:35

Observability is important. Being able to understand how well your software and its infrastructure is operating and performing and the experience that your software is delivering to your users is important. And to really have that understanding, you have to instrument everything in your stack, infrastructure through front-end and everything in-between. It doesn’t matter if your stack is traditional or cloud native, capturing complete telemetry helps you make better, smarter decisions about how to build and operate your software. The more complex your software the more important this becomes, and the complexity of software is increasing. There are so many options for how to build software now. There are a plethora of platforms, tools, and technologies that make it easier for devs and engineers to build and operate increasingly resilient, efficient, and complex software. Achieving observability in these new, complex software ecosystems is really hard though.

We - [New Relic](https://newrelic.com) - are [open sourcing our instrumentation](https://blog.newrelic.com/product-news/introducing-open-source-agents-and-projects/). Our agents, integrations, and SDKs are available and open to contributions in the [New Relic GitHub organization](https://github.com/newrelic). That is hundreds-of-thousands of hours of engineering work, available for everyone in open source.

We will also be making our future instrumentation downstream from the [CNCF](https://www.cncf.io)'s [OpenTelemetry](https://opentelemetry.io) standard, in open source. Which means we will be investing and contributing more to the OpenTelemetry project, helping build the standard for service observability.

We are committing to open source and OpenTelemetry because...
* We want to make it easier for you to instrument everything across your environment, gather complete telemetry, and understand the performance of your software.
* We want to make it easier to make your software observable.
* We want to make it easier for you to build and operate better software.
* We want to engage more with the people that use our software so we can build better software that solves our users' most challenging issues.

The future of instrumentation is open, and we can’t wait to play our part.
Best webpage design IMHO
Tags: markdown, webdev, design
Published: 2020-07-22 21:34:41

I just want to share this glorious website I found on the internet: [devroom.io](https://www.devroom.io/). It looks like all pages are written in markdown, and then rendered using some markdown rules + some coloring.

If I ever end up making my own website, I'll for sure steal the design from that website.

Maybe with a little effort I could even implement a back-end where one would write the pages using markdown, and then those would be turned into html and styled - using something like pygmentize - and then served :thinking:

P.S. I already contacted the owner of that website to find out if there is some open-source template for it, but sadly he told me the source code stays private.
Making Wind Energy More Efficient With Data At Turbit Systems - Episode 142
Published: 2020-07-22 20:21:03

<p>Wind energy is an important component of an ecologically friendly power system, but there are a number of variables that can affect the overall efficiency of the turbines. Michael Tegtmeier founded Turbit Systems to help operators of wind farms identify and correct problems that contribute to suboptimal power outputs. In this episode he shares the story of how he got started working with wind energy, the system that he has built to collect data from the individual turbines, and how he is using machine learning to provide valuable insights to produce higher energy outputs. This was a great conversation about using data to improve the way the world works.</p><p><a href='https://www.dataengineeringpodcast.com/turbit-systems-wind-energy-episode-142/'>Listen Now!</a></p>
Community Developer Brings HashiCorp Terraform to Auth0
Tags: hashicorp
Published: 2020-07-22 20:56:51

Learn how Alex Kalyvitis created Auth0 as Code for Terraform.
[Read more](https://auth0.com/blog/community-developer-brings-hashicorp-terraform-to-auth0/?utm_source=newsletter&utm_medium=sc&utm_campaign=auth0_terraform)
Are you looking to up skill?
Tags: workshops
Published: 2020-07-22 20:40:27

Is your job impacted by COVID19 and you are currently open to work and looking for resources to up skill?

We want to support you. We are offering free workshop tickets to developer community who are impacted by COVID19 to join us at this years virtual conference on Aug-13 and Aug-14.

Check our [website](https://www.javascriptandfriends.com/workshops) for more details on the workshop.

If you are not impacted feel free to tag your friends who will be benefited.
Idiomatic Functional Programming With DRY Python
Published: 2020-07-22 20:14:37

<p>Python is an intuitive and flexible language, but that versatility can also lead to problematic designs if you're not careful. Nikita Sobolev is the CTO of Wemake Services where he works on open source projects that encourage clean coding practices and maintainable architectures. In this episode he discusses his work on the DRY Python set of libraries and how they provide an accessible interface to functional programming patterns while maintaining an idiomatic Python interface. He also shares the story behind the wemake Python styleguide plugin for Flake8 and the benefits of strict linting rules to engender good development habits. This was a great conversation about useful practices to build software that will be easy and fun to work on.</p><p><a href='https://www.pythonpodcast.com/dry-python-functional-programming-episode-272/'>Listen Now!</a></p>
How to use your Windows 10 device as a Wireless Display.
Tags: windows, beginners, tutorial
Published: 2020-07-22 20:12:21

---
title: How to use your Windows 10 device as a Wireless Display.
published: true
description: Tutorial on how to use your Windows 10 device as a Wireless Display.
tags: windows, beginners, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/esgiouarp2o6i746z9ny.png
---

Hi,

In this article I will show you how to use your Windows 10’s wireless display feature in order to use your Laptop/Xbox as a wireless display.

# Initial Setup

![img1](https://dev-to-uploads.s3.amazonaws.com/i/034e6mxtgsg12zz927pc.png)

Then expand the Private tab and use the same settings as I do, only enable File sharing if you need it.

![img2](https://dev-to-uploads.s3.amazonaws.com/i/288sdltkj47nwi4id5jb.png)

Turning on file and printer sharing is optional.

Now that this is done we want to mark our house’s Wi-Fi network as Private, this way Windows will trust it and network discovery will be enabled.

__Note: When connecting to public networks it’s a good idea to mark them as public and have network discovery off, attackers may use this feature for malicious purposes.__

To mark your network as Private type Network Status in the search box, click Properties and make sure that Private is selected.

![img3](https://dev-to-uploads.s3.amazonaws.com/i/vcjjssdjg92xgvzf0r7d.png)

That’s it! 🎉🎉

# Projecting to this PC

Open up search and type Projection Settings, you’ll notice a message prompting you to install the Wireless Display optional Windows feature, click that link and type “Display” then install it.

![img4](https://dev-to-uploads.s3.amazonaws.com/i/esgiouarp2o6i746z9ny.png)

![img5](https://dev-to-uploads.s3.amazonaws.com/i/a3vb1f8ygx7r3jv0v0ro.png)

You can leave the settings as they are, it means that your devices can only project when you open the Connect application on your PC or the Wireless Display application on your Xbox.

![img6](https://dev-to-uploads.s3.amazonaws.com/i/0s500m1p3ov3bju090m2.png)

Click Launch the Connect app… on your Laptop to start projecting from your PC.

Your laptop should now appear as a Wireless Display when trying to Project from a PC on the same network.

![img7](https://dev-to-uploads.s3.amazonaws.com/i/z4srajbjos94d1fohjjq.png)

# Bonus: Xbox

You can project from your Windows computers on your Xbox by installing the Wireless Display application and launching it. The devices should be connected on the same network and network discovery should be on.

That’s it, thanks for reading!

If you want me to write about something, let me know! 🙂
sci-hub.tw wrapper - desearch
Tags: showdev, go, opensource, research
Published: 2020-07-22 20:10:02

Going through the internet in search of research papers for the literature review, I found this cool website - [sci-hub.tw](sci-hub.tw), and it provides free research papers published on IEEE, ACM, etc and instantly fell in love with this place, and the only reason for that is, it promotes the idea of "knowledge for all" :heart: 

Hat's off to [Alexandra Elbakyan](https://twitter.com/Sci_Hub), Kudos!!

The content is awesome, but the user experience was not that great for me. I had to download a lot (~20) of research papers and the process was pretty hectic. And I think myself as fortunate enough that I know to program and developed this sci-hub.tw wrapper - desearch. 

The code was initially written in Bash but then I shifted to Golang. I did a bit of research in observing the pattern and developed this which can be used via command line to download multiple research papers at a time.

How I used it,
```shell
for url in `cat urls.txt`
do
desearch $url; 
done
```

[Check out the project here!](github.com/krAshwin/desearch)

I would love to get feedback on the same and I hope this helps others too!

Knowledge for all!!