teleren/devto huggingface dataset:
ANN: Version 0.9.0 of Sirix.io - efficient versioning of XML and JSON data / supports time-travel queries and diffing
Tags: xml, json, temporal, showdev
Published: 2019-04-20 22:49:47

---
title: ANN: Version 0.9.0 of Sirix.io - efficient versioning of XML and JSON data / supports time-travel queries and diffing
published: true
description: 
tags: XML, JSON, temporal, showdev
---

![SunburstView](https://thepracticaldev.s3.amazonaws.com/i/9xggm4bqnvbbkwo8w5md.png)

Hi,

I had already posted a couple of days ago, but I now released version 0.9.0 and maybe it's of some value for some of you, I still hope at least :-)

Sirix.io is all about efficient versioning of your data. That is on the one hand it reduces the storage cost of storing a new revision during each transaction-commit while balancing read- and write-performance through a novel sliding snapshot algorithm and dynamic page compression. On the other hand Sirix supports easy query capabilities for instance to open a specific revision by a timestamp or revisions by a given timespan, to navigate to future or past versions of nodes in the tree-structure and so on. It basically never overwrites data and is heavily inspired by ZFS and borrows some ideas and puts these to test on the sub-file level.

Queries such as these are possible:

```
let $statuses := jn:open('mycol.jn','mydoc.jn', xs:dateTime('2019-04-13T16:24:27Z'))=>statuses
let $foundStatus := for $status in bit:array-values($statuses)
  let $dateTimeCreated := xs:dateTime($status=>created_at)
  where $dateTimeCreated > xs:dateTime("2018-02-01T00:00:00") and not(exists(jn:previous($status)))
  order by $dateTimeCreated
  return $status
return {"revision": sdb:revision($foundStatus), $foundStatus{text}}
```

It all started around 2006 as a university / Ph.D. project of Marc Kramis and I already spend my Bachelor's Thesis, Master's Thesis as well as several HiWi-Jobs on the project back then until 2012 and I'm still more eager than ever to put forth the idea of a versioned, analytics plattform to perform analytical tasks based on current as well as the history of the data.

I've been working a lot on Sirix.io the last couple of months and spent most evenings after my day to day software engineering Job. I had already posted around christmas, but now I've added a native JSON storage layer besides XML, that is the storage itself, XQuery extensions for JSON for joint XML- and JSON-querying, a RESTful-API also for JSON, added a website, a forum and first documentation... :-) and last night I release version 0.9.0.

So, any feedback, comments, suggestions, just everything is more than welcome. I'll happily (try to? ;)) answer any questions you might have. Happy easter everyone :-)

kind regards Johannes

https://sirix.io

https://github.com/sirixdb/sirix

![SunburstMoves](https://thepracticaldev.s3.amazonaws.com/i/lochycib8nkrn04e081n.png)
Connect Registration Form To Firebase - Part 1
Tags: javascript, webdev, tutorial, newbie
Published: 2019-04-20 22:47:13

---
title: Connect Registration Form To Firebase - Part 1
published: true
description: 
tags: #javascript #webdev #tutorial #newbie
---

In this tutorial, I am going to show you how to connect your registration form to Firebase.  Firebase is a mobile and web development platform that provides programmers with variety of tools that helps them develop quality applications.

For the purpose of this tutorial we will be making use of Firebase Realtime Database to store data in our registration form. Here, data is stored as JSON and synchronized in realtime to every connected client. 

### Tutorial Outline:

*    Create Html template for registration form.

*    Add css for design and responsiveness

*    Connect form to Javascript

*    Connect Firebase Realtime Database to Registration Form


##  Create Html Template for Registration Form


We will not make use of any html frameworks like Bootstrap, neither are we making use of any form of boiler templates. Our registration form is going to be built from scratch and it is also going to be responsive.

{% gist https://gist.github.com/desoga10/5434f9a134ec611d0973dc58f5c96cd5 %}


The important things to take note of in the index.html file is that:

*    Our form has two sections (Your Basic Info and Profile section)

*    We have two script tags below the page. The first script tag is gotten from firebase. I'll show you how we got that script tag later.

*    We are making use of Html 5 validation through the "required" attribute.

*    The last thing I want us to take note of is the ID'S and the class in our form. This will enable us manipulate the DOM with javascript and Css respectively.


With our html looking really ugly, it's time to add some Cascading Style Sheet:

![Alt text of image](https://res.cloudinary.com/dz4tt9omp/image/upload/v1555766209/register_copy.png)
        
## Add css for Design and Responsiveness


{% gist https://gist.github.com/desoga10/fa759732cfc63a987032e4beebba808c %}


NOTE:

*    The border "box-sizing: border-box;" was added globally (*). This is because the box-sizing property allows us to include the padding and border in an element's total width and height.

*    The alert class was set to display as none. In our javascript file, we are going to set it to display as block once the registration form has been submitted. 



... and with that, we have a much better looking registration form. Its not the best looking form in the world, but with the media query added at the bottom of the style.css file, it is really responsive.



![Alt text of image](https://res.cloudinary.com/dz4tt9omp/image/upload/v1555766437/FORMREGISTER.png)



In the second <a href="https://dev.to/desoga/connect-registration-form-to-firebase-part-2-53cb">part</a> of this tutorial, we will connect our registration form to javascript and also link it to the Firebase Realtime Database.

To get more free content on web development, subscribe to my newsletter:
<a href="http://eepurl.com/gZ-jJH" target="_blank">here</a>
Visual Studio Code - color coding workspaces
Tags: vscode, productivity, bestpractices
Published: 2019-04-20 12:44:03

---
title: Visual Studio Code - color coding workspaces
published: true
description: Avoid mistakes working on a similar structured project.
tags: vscode, productivity, bestpractices
---

We can differentiate different project at a glance even if the projects have the same structure. 

![Different window colors](https://thepracticaldev.s3.amazonaws.com/i/ctzqe6a8j0qj4in60zyc.png)

https://marketplace.visualstudio.com/items?itemName=stuart.unique-window-colors
STORY 1: #Developer at work. Attention Please!
Tags: fun
Published: 2019-04-19 20:31:44

---
title: STORY 1: #Developer at work. Attention Please!
published: true
description: 
tags: fun
---

<img src="https://thepracticaldev.s3.amazonaws.com/i/9p2qdycpc3mgf5cuc1mj.png" />

We developers are so hooked up with the stuff we do, we rarely pay attention to what we actually say during the day. Here some of the top things that you can hear the developers say if you pay attention.

1.  Did you merge my request?
2.  That is not a bug, it's a new feature.
3.  That is so stupid. What kind of a test case is that?
4.  We will work on it later.
5.  Dev: No! that can't be done. TL: It can be done within an hour.
6.  Why the hell does the Internet not work.
7.  I need another cup of coffee.
8.  The work is almost done. I will send it into testing tomorrow!
9.  Let's optimize it a bit more.
10. That is not interesting at all.
11. There are no log files.
12. Hit Fiddler and check if the API works.
13. It works on my machine.
14. Update your browser.
15. The USB cable is loose.
16. The editor has hanged yet again.
17. Remove node_modules folder and install it again.[by Adler Coelho Santos] 
18. and many many more ... 


Add to the list if you have some funny ones too!
Hasura Explorer feature as part of the console or stand alone
Tags: hasura, graphql, tools
Published: 2019-04-20 08:44:35

---
title: Hasura Explorer feature as part of the console or stand alone
published: true
description: In this blog post I will overview Hasura explorer feature
tags: Hasura, GraphQL, Tools
---

If you've been working with [Hasura](http://hasura.io) you've probably seen that Hasura auto generates GraphQL API in specific manner. It gives you bunch of helper input types that you can use for ordering, comparison e.t.c. Sometimes writing the following mutation can be a process of docs lookup and trying out things. That's why we've integrated an Explorer built by awesome folks at [OneGraph](https://www.onegraph.com/) that will ease you query/mutations/subscriptions writing. You can check the OneGraph explorer [here](https://github.com/OneGraph/graphiql-explorer)

So what does it do.

Consider the following mutation

```
mutation {
  insert_posts(objects: {
    text: "Some text", 
    title: "Fifth post", 
    user: {
      data: {
        firstName: "Vlad", 
        lastName: "Novick"
      }
    }
  }) {
    returning {
      text
      title
      timestamp
      id
      user {
        firstName
        address
        id
        lastName
      }
    }
  }
}

```
If you are new to Hasura console and especially if you are not familiar with this particular GraphQL schema, writing something like this will mean looking up in GraphiQL tab in docs:


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

Instead of this Hasura has a new feature now called Explorer.

When you click on Explorer button you will get the following sidebar where you can easily select checkboxes of what you want to query/subscribe for or mutate and query/mutation/subscription will be written automatically for you

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

Important to note that this Explorer respects Hasura Access Control rules and if user is not permitted to see parts of the data he/she won't be able to see that fields in explorer.

We at Hasura also realized that this tool can be beneficial for ecosystem in general and so we also open sourced it as a tool, so you will be able to use Explorer feature even for your own custom GraphQL server including passing your custom headers for your GraphQL endpoint.
You can find it on [github](https://github.com/hasura/graphql-engine/tree/master/community/tools/graphiql-online)

Or check its online version, which is available here:
[https://graphiql-online.com](https://graphiql-online.com)

This tool also supports custom headers that you can send to your GraphQL endpoint so make it easy also to explore graphql endpoints that use Authorization header.

Enjoy.
Help on Django Deployment
Tags: help, begginers, django, deployment
Published: 2019-04-20 11:34:39

---
title: Help on Django Deployment
published: true
description: I need to deploy a simple Django app
tags: #help, #begginers, #django, #deployment
---


For a little more than a month, I have been writing a simple app with Django to manage the client files in my company, I have Deepin operating system 15.9.
As I am new I made the mistake of not creating a virtual env, so now when I try to deploy the app in a Debian 9 container, I have errors with WeasyPrint, cairocffi seems not to install at all ... despite getting the message of pip satisfactory when installing WeasyPrint.
Then, tired and disappointed, I changed 2 views to the xhtml2pdf library, I also did not succeed because it showed an encoding error when using Latin-1, I tried to try UTf-8 and it get Unsuported Type error.
On Monday I will try to install Deepin on the server and try with WeasyPrint again ...
Any ideas to solve this ????
Random Vanilla Javascript 
Published: 2018-11-24 00:18:12

---
title: Random Vanilla Javascript 
published: true
description: 
tags: 
---

Thus far, I've tried to keep myself fresh on ruby, ruby on rails, React, CSS, HTML, Javascript algorithms, and some JQuery. However, recently I went on a job interview that asked me about my skillset on all of the above, except for JQuery. On the contrary, they actually hated JQuery and had entirely removed it from their application. They said and I quote "Thank god we had removed all of our JQuery from our application like 2 weeks ago,  now we're running on pure vanilla Javascript". Now I understand the concept of why this is a good thing for their application, but for me? Not such a great thing, because my vanilla Javascript level is what some may call "eh". So I've made it a point to do a little vanilla Javascript every day, one tiny project at a time, and I've learned a few small, miscellaneous things that I didn't necessarily know before. 

Now I know all about the DOM, I'm well aware of how to manipulate it, and even how to select items I want to change. Before I began my vanilla Javascript challenge, I would mainly rely on things like "document.selectbyID" or "document.selectbyClassName" but was completely unaware of "document.querySelector" and "document.querySelectorAll". Both of which can be used effectively for grabbing certain elements. Important little tidbits about the two to note is that query selector returns a node, and querySelectorAll returns a node list, so it won't come with all the usual array commands you may be used to. Looking into its prototype you'll see you can utilize functions like forEach(), but not many others. Fear not, you can always use "Array.from()". Another big difference is the syntax and browser support. SelectById and SelectByClassName have been around a lot longer, so it may be safer to just stick with that instead, but interesting either way!

The Query selectors can also be used as a CSS3 selector as well. Setting a variable to a queryselector of a class can be altered, which can come in handy. For instance:

```javascript

<div class="Random-line"></div>

const example = document.querySelector('.Random-line')

example.style.transform = `rotate(90 deg)`

```

Now this will go into the CSS and we can set our transoform style to 90 degrees, causing the line to shift 90 degrees.

Also, while playing around with an application that had several different controls, one being an input with the type of "range" and one being "color", i was able to grab all of the controls, by doing the following:

```javascript
  const inputs = document.querySelectorAll(`.controls input`)
```

Now I have all my inputs for all controls on the page! Also, we're able to use forEach to add eventListeners on all of them!

```javascript
  inputs.forEach(input => input.addEventListener('change', handleUpdate))
```

Now we can create a handleUpdate function to listen for changes and handle those updates! Very cool. These have come in handy and I'm sure will continue to in the future.
How do Devs spend their weekends?
Tags: discuss
Published: 2019-04-20 09:52:16

---
title: How do Devs spend their weekends?
published: true 
description: 
tags: discuss
---

Hey folks! Hope it's going well for everyone! The weekend is here, which for many of us means kicking back and relaxing. And we all have our own way of relaxing. Some of us like to spend time with our families, some of us like to go out with friends, some of us just like to sit in a cafe and read. The possibilities are endless.

Me personally? I like to switch it up every now and then, keep things interesting. So my team and I often go out together. Some weekends, we go watch a movie together. The last one we caught together was Captain Marvel.

Other times, we go bowling or to the arcade. It's always a blast.

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

We also love to do brainstorming sessions over coffee or lunch. We do this almost every other weekend.
![](https://thepracticaldev.s3.amazonaws.com/i/nz0r36hlq3fe5pizt6u1.jpg)

Lastly, every few months, we also go out for a small trip or a short trek. The last one we did was the Gilbert Trail trek in February, and [Utkarsh](https://dev.to/utkarsh) even made a short video. Check it out!

{% youtube YjokMfiPIoc %}

These are just a few fun ways Team XenoX likes to spend their weekends. What about you?

**How do you spend your weekends?**

Tell me in the comments below. And if you can sum up your weekends in one or two gifs, that would be even better! 😉
Update smart contract from Solidity 0.4 to Solidity 0.5 + ABIEncoderV2 tutorial
Tags: solidity, ethereum, dapp, blockchain
Published: 2019-04-20 09:20:14

---
title: Update smart contract from Solidity 0.4 to Solidity 0.5 + ABIEncoderV2 tutorial
published: true
description: 
tags: Solidity, Ethereum, Dapp, Blockchain
---

In [this tutorial](https://youtu.be/p1BlOH0QB4E) we will learn how to update a smart contract from Solidity 0.4 to Solidity 0.5.

Solidity 0.5 was released last year in 2018 but a lot of the existing smart contracts and tutorials are still written for Solidity 0.4. It's important to be able to understand the difference between both versions and to update your old code the new version of Solidity.

[![](https://thepracticaldev.s3.amazonaws.com/i/5nks425kgwqq3qx9efzv.png)](https://youtu.be/p1BlOH0QB4E)
Dynamic IP address vs Static IP address: Which is best for business?
Tags: dynamicvsstatic, staticvsdynamic, dynamicip, staticip
Published: 2019-04-20 06:23:44

---
title: Dynamic IP address vs Static IP address: Which is best for business?
published: true
description: IP addresses are unique identification numbers that are required by ISPs and websites to provide you service for your request. Government authorities usually monitor IP address to find suspicious illegal activities. 
tags: Dynamic vs static, static vs dynamic, dynamic ip, static ip 
---
<img src="https://thepracticaldev.s3.amazonaws.com/i/6txehor4xjyh1t8qizhk.png" />

IP addresses are unique identification numbers that are required by ISPs and websites to provide you service for your request. Government authorities usually monitor IP address to find suspicious illegal activities. There are two types of versions for IP addresses that is IPv4 and IPv6, IPv4 is a 32-bit numeric address written in decimal as four numbers separated by periods where each number can be zero to 255 whereas Pv6 addresses are 128-bit IP address written in hexadecimal and separated by colons. An IPv4 address looks like: 1.160.10.240 and an IPv6 address looks like: 3ffe:1900:4545:3:200:f8ff:fe21:67cf. It is pretty evident that the number of unique IPv4 identifiers were not enough to serve the internet users globally, therefore, IPv6 was brought to life but as of now, only a few users can avail IPv6 addresses.

**What are Dynamic IP addresses and how they are allotted?**

Dynamic IP addresses are randomly generated IP addresses for users, these IP addresses are by default allotted by network providers to its subscribers. For businesses, network providers offer a range of IPs for example, 192.168.0.55 to 192.168.0. 155 within this range that business can allow IP addresses to its employees. The business can use static IP address allotment as well as dynamic IP address allotment within the bounded range. For dynamic IP address allotment to systems connected in the network DHCP (Dynamic host control protocol) is used where the user has to put in a range and submit it, this protocol runs every time when a user connected to the network switch on their system. The network and sharing settings section house the options for allotting static and dynamic IP addresses.

Read: https://www.decipherzone.com/blog-detail/Dynamic-IP-address-vs-Static-IP-address--Which-is-best-for-business-
Vue Game Development With Greensock
Tags: vue, javascript, frontend
Published: 2019-04-20 05:05:01

Here is a quick mockup that I threw together as a way to run a simple animation based game using vue and greensock.

Greensock provides the collision detection, and we fire an intersection check for the 2 game elements, which are the line, and the circle. 

The circle, her name is rebecca. Rebecca purple is in the house.

Next, we fire off the animation and stop the game if the event occurs outside the intersection elements.

Persistent state through LocalForage will store my current high score.

I'm not going to lie to you, I can't seem to get above 45.

Comment your changes/high scores.

:)


https://codesandbox.io/s/zlxk5lwqkx




<iframe src="https://codesandbox.io/embed/zlxk5lwqkx?fontsize=14" title="bounce-game" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
Hi, I'm TheWellSpokenDev, #AMA!
Tags: ama
Published: 2019-04-20 04:48:08

---
title: Hi, I'm TheWellSpokenDev, #AMA!
published: true
tags: ama
---

Hi! I'm TheWellSpokenDev and I like to share my experiences about being a better communicator with developers who struggle to find their voice in their career.

Ask me how to deal with annoying colleagues, tough bosses, [crazy spouses], and anything else you can think of!

You're also welcome to read my intro for FREE on Medium: http://bit.ly/introvertconfessions

Cheers!
-#TheWellSpokenDev
Stop panic-ing ! Start debugging 10x faster with static analysis
Tags: go
Published: 2019-04-20 04:33:13

---
title: Stop panic-ing ! Start debugging 10x faster with static analysis
published: true
description: Golang hackable package that uses stack trace and static analysis to show you where your code fails
tags: golang
---

I'd like to introduce [Errlog](https://github.com/snwfdhmp/errlog), a hackable error handling package that uses stack trace and static analysis to determine which func call is responsible for your error.

Wrap the error you want to debug with 

```golang
err := failingFunc()
if errlog.Debug(err) {
    return err
}
```

Output:

![Output](https://thepracticaldev.s3.amazonaws.com/i/59y7tsvwnb0vtmrfb97f.png)

Pluggable to any logger in-place.

[Try errlog](https://github.com/snwfdhmp/errlog).
REST Countries API with color theme switcher built with Gatsby
Tags: gatsby, react
Published: 2019-04-20 04:10:26

---
title: REST Countries API with color theme switcher built with Gatsby
published: true
description: 
tags: gatsby, react
---

![Preview Design](https://thepracticaldev.s3.amazonaws.com/i/s42w45gutc8dj6tg1nz7.jpg)
A Frontend Mentor code challenge.

The challenge is to integrate with the REST Countries API to pull country data and display it like in the design. I chose Gatsby as a front-end framework.

Feedbacks are welcome!!

_Live version here: [https://gatsby-rest-countries.netlify.com](https://gatsby-rest-countries.netlify.com?utm_source=devto)._

{% github https://github.com/tannusesquerdo/gatsby-rest-countries-api %}
My zshrc
Tags: code, terminal, programming
Published: 2019-04-20 03:55:27

---
title: My zshrc
published: true
description: 
tags: #code #terminal #programming
---

Hey People. I made a copy of my zshrc file into a [Github Gist](https://gist.github.com/TheWebDevel/3f4ec501dfbdb2fa80899825a80d996d).

Do share yours!! :)
Horrible Snippet - Updating an Nested Array With The Spread Operator
Tags: horriblehowtos, horriblesnippets, snippet, javascript
Published: 2019-04-20 00:46:18

---
title: Horrible Snippet - Updating an Nested Array With The Spread Operator
published: true
description: This is just silly, but i suppose it may be useful to someone!
tags: horrible howtos, horrible snippets, snippet, javascript
---

Sometimes I like to just sit there and think of weird ways to accomplish things, and sometimes I come up with ideas like this, I think this could be applied to some Functional JS

```
// I Really dig this one
const foo = {
  bar: {
    baz: [{ changeMe: 'asdf', notMe: 'asdf' }, { changeMe: 'ffff', notMe: 'asdf' }],
  },
};

const newArr = foo.bar.baz.map(baz => ({ ...baz, changeMe: 'swee' }));

const newData = {
  ...foo,
  bar: {
    baz: newArr,
  },
};

console.log('newData', newData.bar.baz);
```