teleren/devto huggingface dataset:
How to speed up GIT PUSH
Tags: discuss, git
Published: 2019-10-16 09:02:51

---
title: How to speed up GIT PUSH
published: true
description: 
tags: discuss, git
cover_image: https://thepracticaldev.s3.amazonaws.com/i/q3qpjqityufle1s1ef7e.jpg
---
>OS: Windows10
>Shell: git bash
>Platform: GitHub
>Protocol: ssh

Can anyone help me with Git Push Speed? I have 7 MB/S connection but push and pull are at 90-110 KB/S. It take hours to push and I got this error:

```bash
fatal: remote end hung up unexpectedly
```

Thanks in advance.
Git Branching - Git Tutorial video series [Part 2] (YouTube)
Tags: git, tutorial, beginners, terminal
Published: 2019-10-16 08:56:52

## NOTE:
This is the second video in a series of videos I am creating, that will hopefully give a nice full explanation of everything to do with git and how to use it to your advantage...
This video is part 2 and continues on from where [Part 1](https://youtu.be/58zsLtwzL60) left off.

## Part 2
In this video I cover everything to do with **BRANCHING**. What it is, why we need it, how it is useful and then of course how to do everything from creating a branch, to changing it's name to deleting it all inside the Terminal...

{% youtube aYYG1IlZRN8 %}

**Terminal?** Throughout this video and the rest of the series I show you how to do all these git things by using the terminal commands (how git was meant to be used) so that either you can continue on and use the terminal yourself (giving you unlimited power) or you can at least understand fully what a GUI button is doing when you click it...

## Onward...

The series can be found here...
[Git Series YouTube link](https://www.youtube.com/watch?v=58zsLtwzL60&list=PL3Y9MECuxct0RMwdYcqoIjo-7ncRpTNLs)

My previous dev.to post about the series and episode 1:
{% link https://dev.to/kardelio/git-tutorial-explanation-video-series-first-episode-youtube-22gk %}

Aside from this being a post to advertise the videos, I am also looking for feedback from other folks here that share my love for git about the videos, how they are, if they are explained well enough and about future videos and topics to go into... So please if you have ANY feedback at all please let me know in the comments below or reach out to me on twitter:

[My Twitter (@ben_kadel)](https://twitter.com/ben_kadel)

Thanks for reading and possibly watching!
TIL: :not() can be used to select all children of an element
Tags: css, todayilearned
Published: 2019-10-16 06:21:13

I spend somewhere around 1.5 to 2 hours each day with some good ol' vanilla CSS, HTML and JS, today I decided to tackle the browser API known as IntersectionObserver. I primarily wanted to use IntersectionObserver to lazy load images efficiently. After I felt like I understood it, I wanted to make it so that all the odd images fade in from the left and the even ones from the right.

So my CSS looked like this: 
```css
img:nth-child(even) {
  transform: translateX(50%);
}

img:nth-child(odd) {
  transform: translateX(-50%);
}
```
I wrote a seperate class named `fadeIn` that would be added to the `classList` of each image when it's within the viewport, so `fadeIn` looked like this:

```css
.fadeIn {
  transform: translateX(0%);
}
```
Which didn't work at all, I don't really know why, would like to hear from one of you readers as to why it didn't. Even though it didn't work, I had a hunch that it has to do with me using `:nth-child`, and so I was scratching my head thinkin what I could do to select all the children of the `fadeIn` class.

So I thought maybe if I look at the MDN docs for [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), I'd find something but I didn't atleast not something that could be used directly. I looked at each selector individually, their docs and I reached the docs for :not(). That's when it clicked! If I technically say that I don't want the children of a selector that doesn't exist or most likely wouldn't exist I would get all the children! Which resulted in this:

```css
.fadeIn:not(x) {
 transform: translateX(0%);
}
```
Which worked! Tadaaa...
Then I played with this block of css to see if it would select all the siblings even the nested ones and unfortunately (or fortunately in some situations) it doesn't.

[Here](https://codepen.io/x-yn/pen/QWWEKwd) is the codepen that I used! Check it out and see for yourself, maybe leave a heart/love on the pen if you liked it. This was my first blogpost in dev.to, all this time I lurked around reading. Appreciate any comments, specifically if this is something good or bad to do.

Thank you for reading!
Redux Form“onSubmitSuccess” Unit Test
Tags: react, redux, testing
Published: 2019-10-16 08:50:18

I am new to react, I need a help for writing a test case for Redux Form component "onSubmitSuccess", below is the code

reduxForm({ form: "AddTagForm", 
  enableReinitialize: true,
  onSubmitSuccess: afterSubmit })

callback function,

export const afterSubmit = (dispatch) => dispatch(reset("AddTagForm"));
I need a help for writing a test case for afterSubmit method. Please help

Note: I am using jest with enzyme for unit testing.
Introducing recurBoy, a raspberry pi video instrument
Tags: electronics, raspberrypi, liveperformance, openframeworks
Published: 2019-10-16 08:46:41

---
title: Introducing recurBoy, a raspberry pi video instrument
published: true 
description: recurBOY is a raspberry pi zero based diy video-instrument for live performance.
tags: electronics, raspberrypi, liveperformance, openframeworks
cover_image: https://thepracticaldev.s3.amazonaws.com/i/crbvkp2oqly1w0n2dvmf.jpg
---

In the past months [Tim Caldwell aka cyberboy666](https://cyberboy666.com/) and I (aka ichi raramuri) have been working on a very cool project called recurBOY, a raspberry pi zero based diy video-instrument for live performance on TVs that have composite output. This project is a spinoff from another project that Tim has been working on for a longer time called r_e_c_u_r (more info below) point_down, a more complex and complete video sampler / all-in-one fantastic video tool. 

<img src="https://thepracticaldev.s3.amazonaws.com/i/qyx0tntx8maxglx7p1si.jpg" width=400/>

We lauched the project in its workshop form at the [2019 fu/bar glitch art festival](https://fubar.space/) in Zagreb, Croatia and we are very happy with the way it was received. If you don't know about this festival you should definitely check it out, it was an amazing combination of very talented and fun awesome people.   

## The motivation of the project:

for many people there is a barrier to enter the world of hardware video-art making instruments - both due to the general higher cost of video gear compared with audio equipment and in some cases its obsolescence and thus rarity.

this project aims to remove these financial barriers by enabling you to build your own art-making tools. by creating together we can learn from each other and help foster community in a physical space.

{% instagram B3Khcepo9Sz %}

## features

+ outputs sd composite video
+ 2 source modes : sampler and shaders
+ process any source with additional FX
+ control shader/fx parameters directly with 4x knobs or externally with 4x cv inputs


## origin of the project

the recurBOY is a spinoff from an existing project tim has created and maintains - [r_e_c_u_r : an open diy video sampler](https://github.com/langolierz/r_e_c_u_r) ; r_e_c_u_r is simple to assemble but can be more complex to operate due to its scope and customisablity. recurBOY distills the best parts, aiming to be simpler and more beginner friendly. it uses cheaper parts and runs on a raspberry pi zero which can be a fraction of the price of the pi3 used in r_e_c_u_r.

We are planning on giving more workshops, if you are interested in knowing more / booking us for a workshop contact us via github or write to us to [tim@cyberboy666.com](mailto:tim@cyberboy666.com) or in the comments section below. 

## recurBoy on Github:

{% github langolierz/recurBOY %}
Prevent history navigation on horizontally-scrolling elements with CSS
Tags: css, toolbox, microtips
Published: 2019-10-16 08:01:15

Behold a horizontally-scrolling element:

```css
.reel {
  display: flex;
  overflow-x: scroll;
}
```

This pattern is particularly useful on mobile devices as [an alternative to stacking](https://hankchizljaw.com/wrote/progressive-overflow-management-with-a-scroll-track-utility/) for breaking a grid apart, but its utility is not limited to small screens. A horizontally-scrolling section can also become the basis of an image slideshow on desktop browsers. 

When people use the trackpad for navigating horizontally (often, with a two-finger gesture), we get an unintended side-effect: the gesture coincides with navigating through the browser history. A two-finger swipe  to the right triggers the browser Back action, while two fingers to the left triggers the Forward action. When you reach the edges as you scroll the container, you often accidentally navigate away from the page (there's [probably a name for the phenomenon](https://twitter.com/danburzo/status/1184375415235862528)). 

To prevent the navigation, we can use the [`overscroll-behavior`](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) CSS property. A value of `none` or `contain` will make sure the excess scroll does not ripple to the container's ancestors and, ultimately, the page:

```css
.reel {
  display: flex;
  overflow-x: scroll;
  overscroll-behavior-x: contain;
}
```

Here's [a demo highlighting the difference](https://danburzo.ro/demos/overscroll-behavior.html).

At the time of writing, this property is supported in Firefox¹, Chrome², and Edge, so most desktop users will benefit from the enhanced behavior. 

__For extra credit__ also opt into smooth, accelerated scrolling in mobile Safari with [`-webkit-overflow-scrolling: touch`](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling). While iOS / iPadOS 13 [makes this the default](https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes), it's still a nice, ahem, _touch_ for older versions.

---

¹ There's a [small issue in Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1595791) with the first swipe
² I stumbled upon a peculiar combination [that made Chrome ignore the declaration](https://bugs.chromium.org/p/chromium/issues/detail?id=1010454#c_ts1570106892)


---

_If you liked this article, you may enjoy [this simple trick](https://dev.to/danburzo/css-micro-tip-make-mobile-safari-not-have-to-zoom-into-inputs-1fc1) for inputs in mobile Safari, or take [a deep-dive into units for media queries](https://dev.to/danburzo/making-sense-of-css-media-queries-in-the-year-2019-52jj)._
I'm thinking about taking over an abandoned GitHub project: what is your advice?
Tags: help, github, opensource
Published: 2019-10-16 07:38:44

I'm asking for the collective DEV wisdom about how to proceed in a situation I'm getting into.

At work, I may be interested in using a small tool to add it to the development toolset (I won't be more specific for now; it's not that important). We are talking about a little library, a port from a similar library in another language; nothing fancy. The project is a Java/Groovy mix (with a bit of Kotlin for fun 🤔), and is Apache licensed.

The original GitHub project seem to be abandoned: no updates in 2 years, no answer to issues. Moreover, the project is actually broken (even for a 0.2 release): since a critical subproject is not properly published, you can't depend on this tool altoghether without downloading it and compiling it yourself. So, in this current state, the tool is not even readily usable.

I've spent a few hours on the repository, breaking it into subprojects, clearing up and updating dependencies, build scripts and tests. Now I have more or less the same code (I may have added an obvious missing piece, too) splitted in four repos, with clean builds and passing test, and with current dependencies. What now?

The plan I had in mind was like this:
  1. Add notes on the README about what I have done, clearly stating code history and original copyrights
  2. Change organization to something I have control over, leaving the original package structure as is
  3. Publish a 0.3 release, with the original name but in the new organization, so it's clear that the code is mostly the same, but doesn't come from the same author
  4. Add comments in the original repo's issues pointing to my repositories

Any suggestions? would you do anything differently?
JavaScript ES6 one-liners: rotate an array
Tags: javascript, array, rotate, spread
Published: 2019-10-16 06:50:38

```javascript
const arr = [1,2,3,4,5];
const shift = 2;

// rotate left by n < array length:
console.log(`rotated: ${[...arr.slice(shift), ...arr.slice(0,shift)]}`);
// rotated: 3,4,5,1,2
```
Expand your code Brain- ExBrain

Tags: devops, productivity, career
Published: 2019-10-16 06:17:57

             "Writing code is hard Reading code is even harder"

Exbrain is the tool which uses as the external brain of developers. It will help the developers to break down the workload by learning silly codes and prioritize and focus on what is important to learn to get maximum results.

Because the developers spend most of their time to learning or reading code and get frustrated with this task, so to ease their work this tool coming in the market. Each codebase has its own format. Understanding what the classes, functions, and methods better. It is more useful to the developers who are new in this coding field.

This external brain works so perfectly. Well! its feature proves it.

Follows the progress
This tool follows your work progress while learning code. ExBrain shows how progressively you completing your work.

Divide and generate
ExBrain generates the code by dividing codebase into manageable blocks, which is quite easy for the developer to learn the code and split the codebase into flashcards

Never forget what learned
ExBrain helps the developer to remember everything that they learned by using the proven technique of spaced repetition.



ExBrain will improve your productivity by helping you learn and remember everything about your codebase.


to know about QueryPie tool - https://codersera.com/blog/five-upcoming-tools-for-software-developers-you-should-keep-your-eye-on/
How to set Mega Menu in Amazing Opencart Marketplace Theme
Tags: opencartthemes, creativeopencarttheme, opencartresponsivetheme, opencartmarketplacetheme
Published: 2019-10-16 06:14:32

Amazing is a responsive  Opencart Marketplace theme for version 3.x. It can be used to create a web store or marketplace with a design similar to the Amazon website. This theme works easily with the Multi-Vendor Marketplace extension for Opencart. That makes it easy to launch your own marketplace quickly and easily. You need not worry about your website working on different devices. This theme is 100% responsive for all devices and layouts. Mega Menu enhances the visual appeal of the website and makes it easy for visitors to locate products.

This module comes FREE with our theme. Use the power of Social Media and allow logins from Facebook, Twitter and Google Plus from your opencart marketplace store, using Purpletree Social Media Login extension. You get added capability of sending SMS on order confirmation and on other events, using our SMS extension for opencart, given FREE with this theme. Now catch those elusive customers, with this powerful Opencart Abandoned Carts extension, included FREE with this theme. The system can send automated emails to customers who have items in their carts. Banner Manager Module included with this theme. With the banner manager module, manage homepage banners in a dynamic manner. Popular Categories module also included with this theme. To highlight the most important categories from your store, use this module. Here one can set the popular categories so users can easily locate their products.

How to set Mega Menu


First of all, install an Amazing theme as for user guide. Go to extensions>extensions>select theme> edit default store theme. Change theme directory default to amazing and click on save button.
After that you again go to extensions > extensions > select module > install Purpletree theme setting.

Thereafter click on the edit button. You will reach an amazing theme setting page. Here you can select menu type like Standard menu or Megamenu menu and set Megamenu image Dimension. You can also set Header text for Megamenu. After that, you can click on the Save button.
After set Megamenu, Home page main menu look like this
More details of Amazing Responsive Opencart 3 Theme can be found here.
The Worst WordPress Development Mistakes
Tags: wordpress, devops, devlive
Published: 2019-10-16 05:57:25

WordPress provides all the components which make your content or article more readable. Even everything from simple websites, to blogs, to complex portals and enterprise websites, and even applications, are built with WordPress. WordPress is the most popular open-source CMS on the web, as well as it has an exciting and supporting community.

Here are the some most common mistakes, people do while using-

Mistake #1. Using too many plugins

No doubt plugins are useful but are often very intriguing causing in which users have to download it first to see what they do. As well as too many plugins affect your website’s performance.

How to fix it:
It is really simple, just keep in mind that use only those plugins which is useful. Or even only one plugin that you need for your websites to function.

Mistake #2. Not backing up your website

Sometimes, users forget or neglect to come to the backup of their websites. And it is the common mistake or an error that can make drastic consequences to the users and their website. Backup save all the contents and other stuff of your website.

How to fix it:
To back up your website install one of several WordPress plugins or utilize the services of a website security team and save it.  And it makes your website safe and secure as well.

Mistake #3. Lack of SEO practice.

Publishing content without SEO is a huge loss or any website because SEO is a method to increase the traffic on your website.

How to fix it:
Plugins like Yoast help to improve your website’s SEO which is to get a higher rank on Google.

Mistake #4. Not optimizing the permalink structure

The default setting for the permalink structure in WordPress isn’t optimized for SEO. So it is difficult to know that it is the right way or not.

How to fix it:
To fix it or we can say to optimize your website’s SEO, change the default permalink structure. To do this, go to the “settings” then “permalinks” and select the “Post name”. Also, be sure to change permalinks for the old content to redirect to the new content.


There some more major mistakes of WordPress development to know them- 
https://codersera.com/blog/the-worst-wordpress-development-mistakes/
Stream 10/15/2019 - Nighttime blatherings of MajorThorn
Tags: blog, devjournal, todayilearned
Published: 2019-10-16 05:22:02

Hey hey, another stream day another log entry. Might all the goals we needed to make a for Stream Closed Captioner extension and then decided to dive into some server ops stuff at the end. Curious about the extension? Check it out here: https://www.twitch.tv/ext/h1ekceo16erc49snp0sine3k9ccbh9

# Today Objective

- [x]  What to call today's log
- [x]  Finish up adding the adjustable line numbers for the Stream CC overlay [https://github.com/talk2MeGooseman/Stream-Closed-Captioner/issues/12](https://github.com/talk2MeGooseman/Stream-Closed-Captioner/issues/12)
- [x]  Test new version is hosted testing
- [x]  Bundle new release

# Notes

- Dont forget that Hacktoberfest is going DOWN [https://hacktoberfest.digitalocean.com/](https://hacktoberfest.digitalocean.com/)
- React-Redux has hooks! Been slowly refactoring code to switch to them, leading to much cleaner code. [https://react-redux.js.org/next/api/hooks](https://react-redux.js.org/next/api/hooks)
- I was finally able to figure out how to get the menus to stop closed after clicks!!!!!
- Put new version Stream CC v1.3.1 into review. Hopefully, Twitch accepts the new version without having to stream demo channel
- Looked in to upgrade Sidekiq 6 but there are some breaking changes with how it is set up and run on the server. So the old config file I am using to start/stop it on the server is no longer compatible. Need to spend some time making the config file is updated and will work with v6
    - [https://ruby.libhunt.com/sidekiq-changelog/6.0](https://ruby.libhunt.com/sidekiq-changelog/6.0)
    - [https://github.com/mperham/sidekiq/wiki/Deployment#running-your-own-process](https://github.com/mperham/sidekiq/wiki/Deployment#running-your-own-process)

# Shoutouts and Thanks

- madpotatokipp
    - For letting me know my audio settings were wrong after windows decided to update for me AGAIN
- MajorThorn
    - Coming up with today's stream log title
- tbdgamer
    - Thanks for the RAIDDDDD

# Future action items

- [ ]  Continue figuring safest route to updates sidekiq to v6
Adding GraphQL to React
Tags: react, graphql
Published: 2019-10-15 21:35:19

---
title: Adding GraphQL to React
published: true
description: 
tags: react, graphql
---

To add GraphQL, add some libraries.

yarn add apollo-boost react-apollo graphql

Now you can use these libraries to pull the data from the backend and do whatever you need to with it. In this example, we’re building an e-commerce app, so we’ll be pulling the data that populates the store from a GraphQL database.What we’re doing is in the code comments below.

```javascript
import React from "react";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";

import CollectionsOverview from "./collections-overview.component";
import Spinner from "../spinner/spinner.component";

// query the DB.
//The gql tag and backtics let us use the GraphQL style of queries inside of our JavaScript
const GET_COLLECTIONS = gql`
  {
    collections {
      id
      title
      items {
        id
        name
        price
        imageUrl
      }
    }
  }
`;

const CollectionsOverviewContainer = () => (
  // Query returns a function. On that function is going to be an object that holds a number of different properties
  // Wrap the Query component around whatever component you want to receive the data
  <Query query={GET_COLLECTIONS}>
    {/* destructure off the things you want to get from the object to use */}
    {({ loading, data }) => {
      if (loading) return <Spinner />;
      return <CollectionsOverview collections={data.collections} />; //data is the top level key for what's returned from GraphQL in this case, so data.collections will return the collections
    }}
  </Query>
);

export default CollectionsOverviewContainer;
```
Discussion: Is a Running a Massive Project equivalent to Running a Company
Tags: discuss, career, startup
Published: 2019-10-16 04:57:49


As a software engineer, I have helped to manage the lifecycle of projects (i.e., design, implementation, testing and launch). I have also observed different roles (i.e., management, engineering, product) working on multiple projects. I realize that a project of organization-wide impact pushes all these project members to progress in their career (and some of them become org leaders)

I had a few related questions: 
- In an enterprise environment, is running a massive project equavalent to running a company?
- How large should this project be to give an individual the amount of pressure and experience of running a company?
- If you think **"just quit your job and start a company"**, why do smart people still tend to stay at enterprise company?

I have started small business before, but it was never close to a startup. I want to know how people think of this topic, given our common experience of the past 10-20 years of tech industry growth. 

Let me know your thoughts, and I'll draft my own thoughts in comment area too.