teleren/devto huggingface dataset:
GraphQL Voyager for Rails
Tags: rails, graphql
Published: 2019-07-27 22:06:03

---
title: GraphQL Voyager for Rails
published: true
tags: rails, graphql
canonical_url: https://sourdough.dev/graphql-voyager-rails/
description: Easily explore your Rails powered GraphQL schema with GraphQL Voyager.
---

[![Exploring your GraphQL Schema with GraphQL Voyager for Rails](https://sourdough.dev/assets/images/graphql-voyager-rails/screenshot.png)](/assets/images/graphql-voyager-rails/screenshot.png)<figcaption>Exploring your GraphQL Schema with <a href="https://github.com/tamcgoey/graphql-voyager-rails">GraphQL Voyager Rails</a>.</figcaption>

It’s been almost a year now working and building with GraphQL backed APIs. One of the best things about GraphQL has always been their dev tooling.

Firing up [GraphiQL](https://github.com/rmosolgo/graphiql-rails), and crafting a query on the fly has been amazing.

But, one of the struggles I’ve found when building a relatively new and larger API is juggling all the different API requests one can make.

GraphiQL is great for sketching out a quick query, but starts to fall apart when you’re needing to fire that same query you were working on a week or two ago.

This is where [Insomnia](https://insomnia.rest/) comes in! Insomnia is a great beautiful API (REST + GraphQL) client that lives on your desktop.

It’s great for keeping up with all those partially built out API requests you’ve been collecting.

One of the biggest problems or really lack of functionality has been [no support for GraphQL API docs](https://github.com/getinsomnia/insomnia/issues/451).

That’s where [GraphQL Voyager](https://github.com/APIs-guru/graphql-voyager) comes in.

A great GraphQL schema + documentation browsing tool that makes it easy to dig into your API.

Like a lot of these GraphQL tools, it was originally built outside of the Rails ecosystem.

So, this past weekend I worked on porting building a Rails engine gem that easily allows you mount GraphQL Voyager on your Rails app.

Building on top of GraphiQL Rails, I took the same lessons learned to support easily mounting GraphQL Voyager on any rails app.

## How to get started

First go ahead and add the gem. Since this is only used in development, I’ve actually purposely grouped this dependency.

```ruby
gem 'graphql-voyager-rails'
```

Next mount the rails engine in your routes files (`config/routes.rb`)

```ruby
if Rails.env.development?
  mount Graphql::Voyager::Rails::Engine, at: "/graphql-voyager", graphql_path: "/graphql"
end
```

_You’ll notice that the `Graphql` isn’t `GraphQL`, I’m hoping in the future to support this naming convention (just wanted to avoid the additional `ActiveSupport` changes)._

---

*Originally posted this on my blog: [sourdough.dev](https://sourdough.dev/graphql-voyager-rails/)*.
My first steps into DevOps
Tags: devops, learning, beginners
Published: 2019-07-02 23:15:34

---
title: My first steps into DevOps
published: true
description: My first steps into DevOps
tags: devops, learning, beginner
---

It’s been a long time I heard about **DevOps** but the first time I had my first course about it was two weeks ago. I’m not a master of the topic but I try anyway to write down something very basic for whom may need it.

I work with DevOps practices every day since January 2019 and probably writing about them will help me to check what I learned in these months. I believe in the "learning by teaching" idea.

DevOps is not a tool, is not a programming language, neither a super secret dark magic. **DevOps is a new and smarter way to do things in software development**.
To be precise, DevOps is a **set of practices** that help to reach the goal of this movement: **reducing the time between the ideation phase of a product and its release in production to the customer** (or end user).

![The new lifecycle](https://thepracticaldev.s3.amazonaws.com/i/igq2b68gki8bgtd0e22k.png)

Those practices are a combination of software development (coding, testing, ...) and operations (deploying, monitoring, …).

DevOps concepts **work very fine with the Agile Methodology** and today they’re widely adopted together to accomplish the hard work of continuous delivery (small and frequent releases of software).

DevOps is also a **mindset**. It aims to remove silos between software development and operations teams and replace this "isolation" with **cross-functional teams**.

I can refer to my personal situation at work: I’m part of a team made of 9 people and within us you can find software engineers, QA engineers and operation staff. We work together and in sync to deliver the software: planning (understand what the customer needs), development, testing and deploying happen all in our team.
Our work, with the work of other teams, creates something very awesome called *pipeline*.

This way of working comes with several strong points such interdisciplinarity, the team work and the high quality of the product. And all of this, probably, couldn't happen without the DevOps culture.

As I said, DevOps does not mean *tools* but we need tools to operate DevOps. Tools like **Jenkins** (continuous integration), **Docker** (containerisation) and **Nagios** (monitoring) help to automate processes in software delivery. **Automation is very important** in this field: more the process is automated and more it’s error-free (we're all humans!) and faster.
![Jenkins' Logo](https://thepracticaldev.s3.amazonaws.com/i/0nanxud6nld6wew9p8oz.png)
backdrop-filter CSS property comes to Chrome and Chromium-based browsers! (76+)
Tags: css, chrome, backdropfilter
Published: 2019-07-02 22:45:59

The `backdrop-filter` CSS property allows you to enable cool graphical effects, such as blurring, to the area behind an element. It's the easiest way to make blurry backgrounds which are more commonly seen in recent web design projects.

However, there was one gimmick: this feature was only supported in Safari, classic Microsoft Edge (that one with EdgeHTML engine, not the preview) and unofficially in Chromium-based browsers by enabling a special flag. Because none of major browsers (I mean Chrome and Firefox) supported this feature, **only about 15% of Internet users** could see `backdrop-filter` in action. Plus the beta Chromium rendering of this feature was buggy and slowed down the whole page.

But things have just changed.

According to [caniuse.com](https://caniuse.com/#feat=css-backdrop-filter), the `backdrop-filter` feature is **finally being officially supported** in Chrome starting from version 76, which is currently at preview stage. It should become stable in a few weeks. Other Chromium-based browsers, such as Chromium Edge, Opera etc. should introduce it later (or have introduced).

That means after Chrome 76 goes stable, you will be able to use `backdrop-filter` without worrying that almost nobody won't see it in action - unless your primary target are Firefox users. That browser hasn't implemented this feature in any part yet 😢.

I've tested `backdrop-filter` on Chromium Edge and it works flawlessy.
![](https://thepracticaldev.s3.amazonaws.com/i/iargpw271z31a9dhewkx.png)

After these support changes, here's an example on how to use `backdrop-filter` in your CSS: 

```css
/* For Chrome & Chromium 76+ */
backdrop-filter: blur(10px);
/* For Safari, classic Edge and Chrome/Chromium <=75 */
-webkit-backdrop-filter: blur(10px);
```

I think that the wider browser adoption of `backdrop-filter` property will lead to even more stunning website designs, especially those that utilize some kind of background blurring. Developers can use it without worrying that majority of people won't see it live because their browser doesn't support it. Feel free to use it. Happy coding 👨🏻‍💻
Animated Text Letters Effect | HTML5
Tags: codepen
Published: 2019-07-02 22:28:35

A simple to customize template created with the divWidget Visual Animator. This widget is pure HTML5 and works in all browsers including edge.

To edit this template in the visual interface visit: http://bit.ly/2RNdpMv

{% codepen https://codepen.io/divwidget/pen/qzYoQd %}
Data Structures: Build a Social Network in JavaScript with Graphs!
Tags: javascript100daysofcode, graph, datastructure
Published: 2019-07-02 22:28:06

---
title: Data Structures: Build a Social Network in JavaScript with Graphs!
published: true
description: Become better in Data Structures! Here, you learn how to build a a social network with a graph in javaScript. Moreover, this course will teaches you how to implement your first graph. In the process, you’ll learn some fundamental computer science concepts as well. 
tags: javascript 100daysofcode, graph, datastructure, 
---
Quick Hack: Converting MathML to LaTeX
Tags: mathml, latex, python
Published: 2019-07-02 21:45:45

---
title: Quick Hack: Converting MathML to LaTeX
published: true
description: 
tags: mathml, latex, python
---

Recently, I need to convert some MathML codes in article metadata from [SCOAP3](https://beta.scoap3.org/) to LaTex format. Most of institutional repositories escapes XML entities, so MathML doesn't render correctly. I tried the [Wiris' API](http://www.wiris.com/en/book/export/html/1696) but it's very slow and give errors in most of long formulas. 
Finally, I found [Yaroshevich's XSL Schema](http://xsltml.sf.net
) that works without problem.

Example Python code:
```python
import lxml.etree as ET

def to_latex(text):

    """ Remove TeX codes in text"""
    text = re.sub(r"(\$\$.*?\$\$)", " ", text) 
    
    """ Find MathML codes and replace it with its LaTeX representations."""
    mml_codes = re.findall(r"(<math.*?<\/math>)", text)
    for mml_code in mml_codes:
        mml_ns = mml_code.replace('<math>', '<math xmlns="http://www.w3.org/1998/Math/MathML">') #Required.
        mml_dom = ET.fromstring(mml_ns)
        xslt = ET.parse("mmltex/mmltex.xsl")
        transform = ET.XSLT(xslt)
        mmldom = transform(mml_dom)
        latex_code = str(mml_dom)
        text = text.replace(mml_code, latex_code)
    return text
```
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2019-07-02 21:21:02

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

Let's kick things off with a great reply to **[Convince me that types are awesome](https://dev.to/ben/convince-me-that-types-are-awesome-2od6)** by @deciduously:
{% devcomment cemo %}

Replying to **[What have been the broken promises of computer technology? ](https://dev.to/ben/what-have-been-the-broken-promises-of-computer-technology-4ho0)**, @shiling talks about some of the negative trends enabled by technology:
{% devcomment cbgc %}

The **[ I've never become overly convinced that switch statements are that much cleaner than `if else if else if else if else`](https://dev.to/ben/i-ve-never-become-overly-convinced-that-switch-statements-are-that-much-cleaner-than-if-else-if-else-if-else-if-else-81l)** thread prompted some great discussion.  @0xrumple had the top reply with this note:
{% devcomment ce64 %}

@unclebob chimed in to the **[Open/Closed principle: How do you convince other devs ?](https://dev.to/rvictorino/open-closed-principle-how-do-you-convinced-other-devs-4i33)** thread with a great explanation:
{% devcomment cen6 %}

Finally, adding to the discussion of **[Jack Of All Trades or Master of One?](https://dev.to/katieadamsdev/jack-of-all-trades-or-master-of-one-56b2)**, @georgecoldham talks about the importance of following your passion and curiosities:
{% devcomment ccmo %}

See you next week for more great comments ✌
How do you know when to NOT refactor?
Tags: discuss
Published: 2019-07-02 20:50:27

# What Sparked the Question

I recently leafed through _The Power of TED*_," a book-length parable about destructive cycles of human psychology in relationships.

At first **I was annoyed by the abstractions**. The "Dreaded Drama Triangle" made up of Victim, Persecutor, and Rescuer roles just seemed too neat and tidy to _actually_ describe reality. It seemed the author was under the delusion that they'd pushed aside some curtain and glimpsed Reality Proper.

But then I realized the abstractions are just abstractions - useful heuristics to help people ask and answer the right questions. "Am I thinking of myself as a victim, and how might that impact my relationships? Do I recognize this kind of cycle in my life?"

(Aside: recognition of victim-hood can be useful. From what I can tell, the book thoughtfully avoids judgment of people who recognize "persecution" and instead focus on how to break harmful cycles of behavior. If people choose to wield the book's ideas judgmentally, that's obviously bad.)

# The Question

Someone recently remarked to me, "A developer's first reaction to anyone else's code is **'This is rubbage, let's redo it all.'**"

Though hyperbolic, the remark hit home. I refactor by default, and I don't have enough tools to recognize when I should leave less-than-perfect code alone.

So I wonder: **How do you determine when to _not_ refactor? What questions do you ask yourself or others? What kind of "gut feelings" do you encounter?**

I'm also interested in hard-and-fast rules, but I suspect many readers will have more approximate tools at hand.
Understanding the basics of seeding Random using ruby
Tags: ruby, random
Published: 2019-07-02 16:42:46

   When you create a Random object in ruby without an argument the system-generated seed will be applied to that instance.  If you pass in an argument of an integer, that integer will be used as the seed value for that Random instance

```ruby
random_w_system_seed = Random.new
random_w_user_seed = Random.new(2330)
```

   Seeding affects the order in which a random generator will put out pseudorandom numbers. If two Random instances have the same seed they will put out the same random numbers in the same order when called.

```ruby
#Here, you can see that the first numbers generated by both 
#instances are the same because they share the same seed
random_same_seed_1 = Random.new(12345)
random_same_seed_2 = Random.new(12345)
random_same_seed_1.rand == random_same_seed_2.rand
# => true

#the same applies for comparing the objects, if they will both generate 
#the same number next, when compared it will evaluate to true
random_same_seed_1 == random_same_seed_2
# => true

#Lets call this first Random instance again so that
#it is one step ahead of the second Random instance
random_same_seed_1.rand
# => 0.3163755545817859

#Now the same seed is not returning the same value because
#the first instance is generating the third number in the
#sequence while the second instance is still generating the 
#second number in the sequence
random_same_seed_1.rand == random_same_seed_2.rand
# => false
```

   Whenever a new Random instance is created without passing in a seed a seed will be passed to it by the system. You can check what this seed is with the #seed method. Additionally, you can set the system seed to a specific number so all Random instances generated without an argument share the same seed.  You can do this by calling .srand to set the systems seed for random.

```ruby
#Here, you can get return seeds from Random instances so you can 
#create Random instances with the same seed
random_instance_sys_seed = Random.new
random_instance_sys_seed.seed
# => 124999659906724141071882940163137705973

random_instance_user_seed = Random.new(12345)
random_instance_sys_seed.seed
# => 12345

#Here, you can see that using .srand to set the system seed for rand
#called without a user made instance and the user made Random instance
#have the same return value
random_instance_user_seed.rand
# => 0.9296160928171479

Random.srand(12345)
Random.rand
# => 0.9296160928171479
```

   A class method for Random called .new_seed is what is used to make system seed values if there is no argument given when creating a new Random instance, it can also be called to return arbitrary seeds that are system created.

```ruby
Random.new_seed
# => 32130858170704068723128768018578826042
```

   So whats the point? If you want a random number why do you want to seed? The main reason is so even with pseudorandom returns you can have repeatable outcome from a program. This can be used for testing, debugging, teaching, sharing statistical analyses, or writing academic papers.
Does it make sense to take a degree in a Computer Science major?
Tags: computerscience, university, college, degree
Published: 2019-07-02 19:42:55

I just published my last article on my personal website [https://tinyurl.com/y2dbzdq6], trying to answer this question. I have a Bachelor's degree in Computer Science, so I've something to tell you! Hope you find this article interesting, especially if you're about to make an important decision for your future and life.
The History behind the word “Computers”.
Tags: computerscience, beginners
Published: 2019-07-02 19:35:04

Today computers are everywhere, on your wrist, on your office table, in your car, in your house, in your TV, even in our Mars Rover. If it is any kind of technology then directly or indirectly there are a somehow computers working behind it.

###But have you ever ask your self who invented the name computer, when it was first used and by whom and where?

According to the Oxford English Dictionary, the first known use of the word “computer” was in 1613 in a book called The Yong Mans Gleanings by English writer **Richard Braithwaite**.

But more interestingly in this book the word computer was not used for machines, but instead, **it was used for Human-Computer**. Human-computer means a person who carried out calculations more speedily than normal peoples. You can even say that they are really powerful and speedy in maths than the average person. At that time women were mostly hired as human computers because they work in less salary compare male. According to Wikipedia By 1943, most human computers were women.

After the creation of early mechanical computers such as Difference Engine and Analytical Engine in 1822, the word computer had more familiar meaning “The Machine that can perform calculations”.

But with the invention of digital electronic computers such as ENIAC (Electronic Numerical Integrator And Computer) in 1946. The word computers used for its more modern meaning “The Digital programmable machine”

So, guys, this was all about the little history of our most favorite word the computers. I hope this will help you somehow.

Please let me know in the comments if I missed something or if you have any suggestion please feel free to mail me. Till then Keep Coding, Keep Loving.

Jai Hind, Vande Mataram 🇮🇳

Wanna get in touch with me? Here are links. I’ll love to become your friend. 😊

- [My Site] (https://www.jaytillu.in)
- [My Blogs] (https://blogs.jaytillu.in)
- [Twitter](https://twitter.com/jay_tillu)
- [Facebook](https://www.facebook.com/jaytillu.1314/)
- [Instagram](https://www.facebook.com/jaytillu.1314/)
- [Medium](https://medium.com/jay-tillu)
- [LinkedIn](https://www.linkedin.com/in/jaytillu/)
- [Github](https://www.github.com/jay-tillu)
- [Stack overflow](https://stackoverflow.com/users/8509590/jay-tillu)
or just mail me at jd.tillu@gmail.com
When to start looking for your next role?
Tags: discuss, healthydebate, career, help
Published: 2019-07-02 19:27:55

When is the right time to start looking for your next job?

You’ve been at the same place for a one/five/ten years now. Have you progressed? Are you learning anything new? Do you feel undervalued by your current employer either financially or with your efforts not being recognised? What should you do?

Are there any internal vacancies you can apply for? Have you raised any concerns with your boss? Do you feel comfortable doing so?

Have you been keeping an eye out on the market? Is there anything that catches your eye? Do you have a preferred recruiter you can contact?

Are you worried about moving on? Do you like the people you work with? Is the commute decent? There are many factors for staying where you are.

Ultimately the decision is yours.

What do you think?
Facebook Reactions in SwiftUI
Tags: swiftui, swift, prototype, showdev
Published: 2019-07-02 19:22:02

About 60 Lines. I’d never guess you could do all that in so few lines. With those transitions and interruptible animations?

I spent the weeks following WWDC looking into Swift UI. At first I thought it was really basic and you couldn’t do much custom work. But when you start building components from scratch you get how flexible it is. 

This is a prototype built in 1 hour before going to bed. I woke up to it blowing up on Twitter (at least for my engagement average). 

![Animated gif showing a prototype of a Facebook Reactions implementation over XCode](https://thepracticaldev.s3.amazonaws.com/i/lwov22le0re5wym71lf4.gif)

And here’s the code, if you know some things about SwiftUI and programming it should be understandable. But here’s the overview:

UI is controlled by state. Am I dragging my finger from the Like Button? Then show/hide reactions. Which reaction is selected? Make that one bigger. 

Then it’s just a matter of changing those states. When I start dragging, change the isDragging to true. Then based on how far I’ve dragged calculate which reaction is selected. 

Code:
https://gist.github.com/fabiogiolito/424e1d68766fc054ad4bf6fd3506e9c3

Tweet:
https://twitter.com/fabiogiolito/status/1142226669471748096
How many monitors do you use when programming?
Tags: discuss, productivity
Published: 2019-07-02 19:21:46

--- 
title: How many monitors do you use when programming?
published: true 
description: A good setup is when the programmer has everything needed in front of him
tags: discuss, productivity
cover_image: https://i.postimg.cc/hjgkMVHT/black-and-white-books-connection-251225.jpg
---

A good setup is one where everything needed is in front of you and quickly reachable. Some swear two is the minimum while others only use one.

How many monitors do you use when programming?