teleren/devto huggingface dataset:
Show/Hide Element on Scroll w/ Vanilla JS
Tags: javascript
Published: 2018-09-27 22:22:29

---
title: Show/Hide Element on Scroll w/ Vanilla JS
published: true
description: A quick and easy script to show an element when scrolling up and hide that element when scrolling down.
tags: javascript
---

Here's a quick script in Vanilla JavaScript that will add/remove a class based on if you're scrolling up or down on a page. In the past, I've used a widget called <a href="https://wicky.nillia.ms/headroom.js/" target="_blank">Headroom.js</a> but I wanted to see if I could replicate the basics from scratch.

Here is the result:
[Custom Headroom Demo](http://custom-headroom.surge.sh/) ([view source](https://github.com/codebushi/custom-headroom))

Take a look at the [index.html](https://github.com/codebushi/custom-headroom/blob/master/index.html) source code.

The main script that runs is this block here:

```javascript
let scrollPos = 0;
const nav = document.querySelector('.site-nav');

function checkPosition() {
  let windowY = window.scrollY;
  if (windowY < scrollPos) {
    // Scrolling UP
    nav.classList.add('is-visible');
    nav.classList.remove('is-hidden');
  } else {
    // Scrolling DOWN
    nav.classList.add('is-hidden');
    nav.classList.remove('is-visible');
  }
  scrollPos = windowY;
}

window.addEventListener('scroll', checkPosition);
```

We add a `scroll` event listener to the `window` and fire off the `checkPosition` function every time the user scrolls on the page.

Looking at `function checkPosition(){}` we first get the `window.scrollY` position, which is how far in pixels we are from the top of the page. We then compare it to the `scrollPos` variable which will get updated to the new `window.scrollY` position after each scroll.

If `windowY` is less than the previous `scrollPos` then we know that we are scrolling up and we can add a class to our `nav` element accordingly. In this case, we want our menu to show when scrolling up and hide when scrolling down.

That's basically it, but we'll want to add some sort of throttle so that we don't fire off events like crazy during long scroll sessions. For this we add a `debounce` function which will make sure it waits 10ms before firing.

We can replace our `window` event listener like this:

```javascript
function debounce(func, wait = 10, immediate = true) {
  let timeout;
  return function() {
    let context = this, args = arguments;
    let later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    let callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

window.addEventListener('scroll', debounce(checkPosition));
```

All the JavaScript needs to do is add or remove a class to our element, and our [CSS](https://github.com/codebushi/custom-headroom/blob/master/style.css) will handle the rest.

I know this isn't as flexible as Headroom.js but it's a slimmed down version that might be a good intro into scroll events.

Check out https://codebushi.com/ for more of my web development tips and resources.
AngularJS communication between two components
Tags: angular, components, help
Published: 2018-09-27 20:12:06

---
title: AngularJS communication between two components
published: true
description: 
tags: angularJS, components, help
---

Hi. 

I'm writing an SPA using angularJS and so far I have created two distinct components for the app one called `loginModal` and the other one `listFiles`.

In the html I call them like

    <login-modal></login-modal>
    <list-files></list-files>

On init of the `loginModal` component, I check if there is a valid JWT token stored and if not I ask for login. If the login is successful the modal closes and the JWT token is being stored. Along with the JWT also a string defining a directory path (for that specific user) is retrieved from the server.

Now what I want to achieve after a successful login, is to somehow trigger a method inside the listFiles component to make a call to the API using the directory string taken before.

Is something like this possible? Can someone provide me with some info resources on how to do such a thing?

Also, any other idea is welcome.

Thank you.
Why build a dapp or blockchain on Tendermint consensus?
Tags: blockchain, smartcontracts, dapp, tendermint
Published: 2018-09-27 20:07:20

---
title: Why build a dapp or blockchain on Tendermint consensus?
published: true
description: My take on why you should consider to build your next dapp of blockchain on Tendermint consensus
tags: blockchain, smart contracts, dapp, tendermint
---

![Tendermint building blocks](https://thepracticaldev.s3.amazonaws.com/i/ckz4f9fb3wlivtda5mgl.png)

People keep asking me, why did I decide to build our [Egeon](http://egeon.io) blockchain on Tendermint consensus over other blockchain frameworks, like Hyperledger Fabric/Sawtooth or even Ethereum/EOS smart contracts. So here are my pros for [Tendermint](https://tendermint.com/):

1. Tendermint is fast. I mean really fast: my tests showed thousands of transaction per second. It's possible because it doesn't use Proof of Work, but implements a [BFT consensus](https://medium.com/loom-network/understanding-blockchain-fundamentals-part-1-byzantine-fault-tolerance-245f46fe8419) – in simple words, it's when 2/3+ nodes agree on the state of the ledger. Nodes are those servers who run Tendermint software.

2. Tendermint is very flexible. You can extend it in any programming language: Go,  JavaScript, Java, C#, Python, you name it (thanks to  [gRPC](https://grpc.io/docs/guides/)). This allows you to create a business task-specific blockchain that will fit all your needs and requirements. You can easily develop Tendermint in that same programming language your application is written. Needless to say the advantages of such an approach. In my case, I program in Node.js.

3. Tendermint is a major building "block" of the whole Cosmos Network project - an Internet of Blockchains. They have implemented their decentralized Cosmos Hub in Tendermint. This hub is where all blockchains will communicate with each other through sidechains written in Tendermint. The Hub will allow transferring of coins from one blockchain to another. It will be super easy to integrate your dapp or blockchain into the whole world of the Internet of Blockchains if your software is written on Tendermint or  [Cosmos-SDK](https://github.com/cosmos/cosmos-sdk)  –  which is an extension of Tendermint with added stacking, coins support and other useful things.

4. Tendermint is already used as a consensus engine in Hyperledger Burrow - this is an alternative implementation of Ethereum smart contract engine (EVM). And [Hyperledger Burrow](https://www.hyperledger.org/projects/hyperledger-burrow) is used as a smart contract engine (virtual machine) for Hyperledger Sawtooth  – yet another blockchain framework in Hyperledger family. There are much more products being built on Tendermint, check out  [this list](https://forum.cosmos.network/t/list-of-projects-in-cosmos-tendermint-ecosystem/243).

---

## If you found this article valuable please tap ❤️ and 🦄 so others can find this post

---

### Find me on [Twitter](https://twitter.com/AlexSiman) and [LinkedIn](https://www.linkedin.com/in/alexsiman/)
androidpublisher & projectNotLinked error
Tags: android, mobile
Published: 2018-09-27 18:17:41

---
title: androidpublisher & projectNotLinked error
published: true
description: Dealing with androidpublisher & projectNotLinked error on Google Play
tags: android,mobile
---

So spent few hours dealing with project linking error on Google Play. Will leave it here in case someone is stuck with error.

If you receive this response, when making request to Android Publisher API, but **your project is already linked**:

```json
{
  "error": {
    "code": 403, 
    "message": "The project id used to call the Google Play Developer API has not been linked in the Google Play Developer Console.", 
    "errors": [
      {
        "domain": "androidpublisher", 
        "message": "The project id used to call the Google Play Developer API has not been linked in the Google Play Developer Console.", 
        "reason": "projectNotLinked"
      }
    ]
  }
}
```

Try to create new In App Product. If there is a product created before linking, it fails on product transaction fetching when making purchase. With new product error goes away.
Who is hiring? (As of September 2018)
Tags: whoishiring, discuss
Published: 2018-09-27 17:59:42

---
title: Who is hiring? (As of September 2018)
published: true
description: Members of the dev.to community sharing open job opportunities at their companies.
tags: whoishiring, discuss
---

This is our monthly thread where community members share openings at their companies.

Here a few ground rules:

- Please only post if you are personally part of the hiring company (no recruiting firms)
- Please provide brief background on what your company does
- Only one post per company (you can list multiple openings in the post)

Consider using this template:

```
Company Name | Job Title | Location | Remote or Onsite | (optional) Salary Range | Sponsor visa?

About the company — background, size, etc (1-3 sentences)

About the role(s) — languages, requirements, etc (1-3 sentences)

Do you sponsor visas?

How to Apply — email or application link
```

---

We also wanted to share some quick careers-related notes from our fantastic Sustaining Sponsors.

### Digital Ocean

> At **DigitalOcean**, we're simplifying cloud infrastructure for developers. Here you'll get to work with some of the smartest and most interesting people around; solving unique and complex technical challenges on a scale matched by few companies. If you get excited about stretching yourself in new ways, developing yourself to your fullest potential, with amazingly supportive friends and colleagues; [we want to talk to you](https://www.digitalocean.com/company/careers/?utm_source=devto&utm_medium=display&utm_campaign=Devto_2018_Brand)!

### Twilio

> The **Twilio** platform enables companies to integrate communications directly into their applications via simple cloud API’s and with on-demand global reach.  Great products are built by small teams that work hard, think smart, and move fast.  Twilio is hiring across a wide variety of roles, check out all of the openings [here](https://www.twilio.com/company/jobs).

### Qlik

> At **Qlik**, we love data and believe it can change the world. That’s why we work to make it easier for people to make more insightful decisions and act on them. Our platform delivers solutions for self-service data visualization, guided analytics applications, embedded analytics and reporting to approximately 48,000 customers worldwide. If you love data too, we are hiring across technical and engineering roles. Check out our openings [here](https://www.qlik.com/us/company/careers/job-listings?overridedefault=true&department=R%2526D&country=-1)!
Anchore Security Policy Bundles and Container Security Fundamentals
Tags: anchore, containers, security, devops
Published: 2018-09-27 17:46:44

---
title: Anchore Security Policy Bundles and Container Security Fundamentals
published: true
description: An article talking about what security policy bundles are and some of the things that you need to think about when defining container security policies.
tags: anchore, containers, security, devops
cover_image: https://thepracticaldev.s3.amazonaws.com/i/163ftffn087efjvhg4ow.jpg
---

I've been quiet for a few weeks, but I just finished an article talking about [Anchore](https://anchore.com) security policy bundles and some of the things you should think about when you draft your container security policies. 

https://blog.osninja.io/an-introduction-to-security-policies-with-anchore/
Dev is for?
Tags: discuss
Published: 2018-09-27 17:09:38

---
title: Dev is for?
published: True
description: Dev is for
tags: discuss
---
Hello Dev, I have a questions that, someone suggest me below, when I asked code help on dev.to:

http://prntscr.com/kznnq0

**I suggest using stackoverflow for this kind of questions, with code snippets and more detailed example.**

This is true?

Thank you
Therichpost
event.stopPropagation()
Tags: javascript
Published: 2018-09-27 17:07:23

---
title: event.stopPropagation()
published: true
description: 
tags: javascript 
---
Currently, I am learning react and came to know how useful event.stopPropagation() function can be.So, Let's dive in.

Let's create a simple functional component

```
deleteTask(){

    let tasks=this.state.tasks;
    tasks.splice(index,1);
    this.setState({
       tasks 
    })

}

const ToDoItem = (props) => {
    return (
        <li onClick={ ()=> { props.clickHandler(props.index)}}
            className={props.details.completed} ? 'completed' : ''>
           Some Text 
        <button onClick={ ()=>{props.deleteTask(props.index)}}>Delete</button>
        </li>

    )

}
```

Now, If you click Delete button the onClick event gets triggered on both li and button element.The point here is we only want to trigger button onClick event but not li. If the props (completed) is not defined in details props then we get console message as 

```
Cannot read the property 'completed' of undefined
```     

This is because when we click button element, indirectly we are also triggering to li. As, li is parent element of button. li onClick event is triggered and there is no defined 'completed' inside props details. So, to get rid of this issue we can use event.stopPropagation().


```
const ToDoItem = (props) => {
    return (
        <li onClick={ ()=> { props.clickHandler(props.index)}}
            className={props.details.completed} ? 'completed' : ''>
           Some Text 
        <button onClick={ (evt)=>
            evt.stopPropagation();
            {props.deleteTask(props.index)}}>Delete</button>
        </li>

    )

}
```
Now, the event is not propagated to the parent element because of evt.stopPropagation(). So, we are free to go.
Profiling with PHP
Tags: php, testing, showdev, codequality
Published: 2018-09-27 16:47:20

---
title: Profiling with PHP 
published: true
description: Finding bottle necks in PHP Code is way easier than you think, no `microtime` or even third party tools are required to get a proper profiling and insights about your code performance 
tags: php,testing,showdev,quality
---

There are basically 3 simple steps how to get to a profiling of your application to get performance insights. 

### 1. Step xdebug setup

Check if your installation has xdebug support enabled:
```bash
-bash-4.1$ php --info | grep -i xdebug | grep enabled
xdebug support => enabled
```

if that does not show anything then checkout the [Manual](https://xdebug.org/docs/install)

if it does not show `enabled` then checkout your php.ini and enable the extension. 

### 2. Step create this bash alias

```bash
alias php-profile='php -d xdebug.profiler_enable=on -d xdebug.profiler_output_name=profile.out -d xdebug.profiler_output_dir=$PWD'
```

### 3. Step create a PHPUnit test case that exercise your code

this is pretty simple as this snipped will illustrate it on a `DNA` class with the method `hammingDistance` that is our bottle neck to be profiled:

```php
// filename: DNATest.php

require_once __DIR__.'/DNA.php';

final class DNATest extends \PHPUnit\Framework\TestCase
{
    public function test()
    {
        $dna = new DNA('GGACT');
        $distance = $dna->hammingDistance(new DNA('CGACT'));
        $this->assertThat($distance, $this->equalTo(1));
    }
}
```

### Finally run the profiling

run the profiling this way (assuming you have the phpunit.phar there): 

```bash
php-profile phpunit.phar DNATest.php
```

That will 

* run the test 
* produces a `profile.out` 

That file contains all profiling data. It can be opened by PHPStorm or [QCacheGrind](https://sourceforge.net/projects/qcachegrindwin).

However now you got a bunch of metrics, you need to first ignore all the profiling of PHPUnit and find the start of the invocation of your code. 

What other approaches do you use to get profiling? 
Please share your experience.

Thanks for reading!
Writing a pre-commit git hook for Go files.
Tags: git, go, beginners, shell
Published: 2018-09-27 16:42:05

---
title: Writing a pre-commit git hook for Go files.
published: true
description: Article on how to write a basic pre-commit hook for files written in the Go programming language.
tags: git, go, golang, beginners, shell
---

Hello,

I've just published an article on medium, on how to write a pre-commit git hook for files written in the Go programming language.

Click [here](https://medium.com/@radlinskii/writing-the-pre-commit-git-hook-for-go-files-810f8d5f1c6f) to read it.

Thanks.
How does one create MS Office documents programmatically?    
Tags: help, advice, beginners, webdev
Published: 2018-09-27 14:43:40

---
title: How does one create MS Office documents programmatically?    
published: true
description: How does one create MS Office documents programmatically?
tags: help,advice,beginners,webdev
---

Circumstances have conspired against me, and now I must generate Word documents programmatically. I carry with me the sword of JavaScript, although I fear it to be inadequate.

So, how does one young adventurer navigate this space? Must I enter the lair of Microsoft, and battle with the .NET dragon?

I eagerly await your wisdom if you've fought such beasts before.

Journey on.

Update, for future wanderers: I have avoided conflict with the .NET dragon. The sword of JavaScript proved adequate, specifically the package https://github.com/Ziv-Barber/officegen. Thanks @derekjhopper
HTTP BIN - Developer Tools
Tags: devtools, development, network, software
Published: 2018-09-30 13:58:30

---
title: HTTP BIN - Developer Tools
published: true
tags: Dev Tools,Development,network,Software
canonical_url: https://www.briannipper.com/2018/09/http-bin-developer-tools.html
---

[![](https://3.bp.blogspot.com/-qdMd20WyI1c/W6mR3wXF1SI/AAAAAAAAHK8/5S2MHzcD9iEBGubIUv1jNKLAkrt8gKqMgCLcBGAs/s320/10_in_1_screwdriver.jpg)](https://3.bp.blogspot.com/-qdMd20WyI1c/W6mR3wXF1SI/AAAAAAAAHK8/5S2MHzcD9iEBGubIUv1jNKLAkrt8gKqMgCLcBGAs/s1600/10_in_1_screwdriver.jpg)

One of my favorite tools in my 10 in 1 screwdriver. The appeal is that in a single tool, just by flipping some pieces around you have just what you are looking for. In many minor jobs around the house I can do everything needed just with this single tool.

  

When writing software you can find similar valuable tools and one such valuable tool is [http://httpbin.org](http://httpbin.org/)

  

Like with most tools, the simplicity can be deceptive because how hard could it be to have an API that just echo's back what you sent. But then that is what is so great about httpbin, it's done and it's very robust.  
  
By way of example, when building a front-end you may find that the API isn't complete and thus you want to "stub out" the calls. With httpbin you can send a call such that it echo's back what you want and thus you are wiring up to an actual HTTP call.  
  
On the server side you might have the same need to wire up to a service that isn't something you are allowed to call from your local machine, but with httpbin you have the means of mocking with an actual HTTP call.
Convert a string to json object properly
Tags: c, json, nlohmann
Published: 2018-09-27 13:47:33

---
title: Convert a string to json object properly
published: true
description: Some of us ran into problem when while converting a std::string or a const char* string to json object by nlohmann. Here is my solution ..
tags: C++, json, nlohmann
---

Some of us ran into problem when it came to converting a std::string or a const char* string properly to json object by nlohmann (https://github.com/nlohmann/json).
Here is how I achieved it :

<pre code="C++">
#include &lt;string&gt;
#include &lt;iostream>&gt;
#include &lt;sstream&gt;


#include "json.hpp"
using namespace nlohmann;

json toJson(const char* jsonString){
    json jsonObj;
    std::stringstream(jsonString) >> jsonObj;

    return jsonObj;

}

</pre>
GüebZine – old webzine (1998 to 2000 or 2001)
Tags: hacking, literature, webzines, programming
Published: 2018-09-27 12:46:39

---
title: GüebZine – old webzine (1998 to 2000 or 2001)
published: true
tags: hacking,literature,webzines,programming
canonical_url: 
---

“GüebZine” was a webzine which I started in 1998 (third and last official issue was released in 1999), creating it with HTML and a little bit of JavaScript. It was hosted on EmuM@nia (emumania.com) which was one of the most famous Spanish emulation web sites before it disappeared in 2002. It had different contributors (DaTaR, Erterks, ARROW, [Lolo], CHIP, Scumnok, [[[ALX]]]…) who wrote some sections and/or helped in some way.

![Screenshot of them](http://www.joanalbamaldonado.com/portfolio/img/content/guebzine.jpg)

Only three issues where released (all using Spanish as the main language). The fourth issue, which I was doing until 2000 or 2001 (I cannot remember), was never neither finished nor released but the last version I could found is included in this repository.

First three issues contained sections about software, emulation (including another older e-zine called Emu Mania by DaTaR), games, pastimes, programming (with a C course), hacking and cracking, music, web design course (by Erterks), contests (games contest, animations contest, images contest, music contests, homepages contest), a puzzle story made by different contributors which was updated in every issue, news, interviews, links, chat, guestbook, etc.

The fourth version was going to contain many more things, as for example sections about IRC, ICQ, body piercing and tattoos, Pokémon, humour, patchwork, Star Wars, Macintosh, Amiga, overclocking, abandonware, retrocomputing, retrogaming (with an article by Scumnok), parapsychology, ASCII art, poems, sayings and proverbs, TV and radio, infographics, 3D, ecology, drugs, rankings, art gallery, point-and-click adventures, interactive fiction, game mods and maps, gastronomy and recipes, mobile phones and GSM, Visual Basic course (by CHIP), JavaScript course (by [Lolo]), Java applets development, underground culture and many many more.

This repository also contains installers and launchers (one of them was made by CHIP) and different versions of the official website where people could download this webzine.

The repository can be found on GitHub: https://github.com/jalbam/guebzine
Why is React a library and not a (simple) framework?
Tags: react, framework, discuss, javascript
Published: 2018-09-27 11:07:59

---
title: Why is React a library and not a (simple) framework?
published: true
description: What makes React a library instead of a framework?
tags: react, framework, discuss, javascript
---

In 2016 I started my career in development, and at the end of the year, I created a mobile app using Ionic 2 (Angular 2).

It was very familiar to me because I used to do C# and Asp.net, so the structure was similar and made it easy for me to learn, we had the app ready for download at play store in a couple (or maybe a couple's couple) of months.

From that time up to now I learned so many things and React got into my radar. During some time I bootstrapped a few projects but never gave them much attention. So when I finally started a project (and did some work on it), I realized that a lot of things were better than Angular, and a few I wish were like it.

But what "disturbs" me the most, is the fact that React is considered a library and not a framework.

When I think of a JS library, jQuery immediately comes to mind. All you got to do to use it is add the script in your HTML (or import however you like) and voila, $ is ready for you.

It doesn't feel the same way about React. Maybe it's just a lack of knowledge from my part but, it behaves much more like Angular than jQuery.

Of course syntax is different and whatnot, but when I think about the use of a library it's much simpler than react's.

Am I being ignorant to what React really is or someone else feels like this?

Thank you all very much.