teleren/devto huggingface dataset:
Entering unknown code territory
Tags: work
Published: 2020-01-02 17:44:33

---
title: Entering unknown code territory
published: true
date: 2019-12-11 20:43:57 UTC
tags: Work
canonical_url: 
---

Adding a new feature to an existing codebase can be intimidating and initially one might feel overwhelmed and not know where to start.

Here I’m writing about my experience of tackling this. First, I try to understand as best as I can the existing code that is related to where I plan to add my own code. If I’m not sure what a method will return, I’ll dump out the variable to the screen or console. I also look for similar code that does what I plan to do. I might find that I can even create a new class that can be used by both the old functionality and for the new feature. But at this stage it’s better not to refactor anything yet, but just get something to work. So initially doing some copy and pasting is fine. Once I have something working, I write some tests and now I can start refactoring.

I think the main takeaway (apart from not panicking) is to just get started. I try to get something small working and gradually I start to understand better how things fit together. That doesn’t mean that I start without making a plan. Sketching things out first is very useful to help with understanding what I need to accomplish.

As I spend time experimenting and making small improvements it’s important to frequently commit the code to source control. So anytime I break something, I can easily go back to a working state.
How to solve the first puzzle of Advent of Code 2019? Day 1
Tags: challenge, adventofcode, javascript, video
Published: 2019-12-11 20:42:33

---
title: How to solve the first puzzle of Advent of Code 2019? Day 1
published: true
description: JavaScript walkthrough of Advent of Code 2019 (day 1)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2019 in Javascript
---

{% youtube ComzawCqwJY %}
How Inline SVG's Improve Performance
Tags: svg, css, html, pwa
Published: 2019-12-11 20:41:44

Progressive Web Apps (PWAs) are a new and exciting way to build web applications. With interest in PWAs growing among clients and developers alike, we need to rethink our development process to accommodate PWA performance. Let’s dive into managing SVG assets!

## How to use SVGJar
The bird's eye view description of this method is that we include every SVG on our app inline. The plugin [Ember SVGJar](https://www.npmjs.com/package/ember-svg-jar) gives you a clean interface where you can interact with every icon added to the plugin. Which allows you to include every SVG inline on the app.

Having inline SVG injection management with SVGJar offers a few advantages right away:


* SVG assets used with CSS background property
* SVG assets are included inline so you have full creative control over the SVG with CSS styling
* Most performant way of including optimized SVGs on a page

We organize our SVG assets in an asset folder linked to SVGJar. The plugin inserts the SVG assets into the page where you include the handlebar helper.

```handlebars
{{svg-jar "asset-name"}}
```

The result is that the Ember app sees what SVGs are needed and, thanks to SVGJar, pulls the asset from the asset folder, injecting the SVG code directly into the HTML before it gets sent to the server and then browser.

For developers working within React, you can easily make a SVG include component that holds all SVG assets. You then include that component into any template that needs a SVG and freely insert that inline SVG. Same method, just different tooling.


## PWA Benefits
When developing a PWA, it’s important to keep asset management  as lean as possible. Utilizing a performant way of including an SVG that is easily cached within HTML can significantly improve PWA performance. No tree shaking, no sending a large icon asset folder to the user, just clean and performant HTML files that get cached on the device.

In the past, managing hundreds of inline SVGs was a development blocker but, with modern tooling, we can create SVG management tools that scale. These tools (SVGJar and a React SVG component) enable the developer to focus on the quality of their SVG assets over an implementation solution that is easier for the developer but less ideal for the performance of an application.

Now you can get creative with SVGs and enhance how you develop PWAs.

*This post originally appeared on [DockYard](https://dockyard.com/), where I currently work as a Senior UX Developer. DockYard is a digital product agency offering exceptional strategy, design, full stack engineering, web app development, and custom software services, consulting, and training.*
Rails/React developer? don't worry about authentication anymore !
Tags: rails, react, ruby, javascript
Published: 2019-12-11 20:36:04

A few weeks ago I started developing the j-TockAuth library which allows to easily manage the authentication between a JS frontend and a Ruby on Rails backend that uses the devise token auth gem. since then I have two client projects in production that use it and it seems to work very well. of course there are still improvements to be made but any participation is welcome !

https://www.npmjs.com/package/j-tockauth
Water ripple effect using canvas
Tags: javascript, ripple, canvas
Published: 2019-12-11 20:33:20

---
title: Water ripple effect using canvas
published: true
description: A beautiful water ripple effect using JavaScript canvas
tags: javascript, ripple, canvas
cover_image: https://thepracticaldev.s3.amazonaws.com/i/m7f81p4fft81ztaguuk4.png
canonical_url: https://github.com/victorqribeiro/rippleEffect
---


Some time ago I stumbled upon this [link](https://web.archive.org/web/20160418004149/http://freespace.virgin.net/hugo.elias/graphics/x_water.htm). It describes a cool algorithm to create a water ripple effect. 

So, I decided to give it a go [here](http://jsfiddle.net/victorqribeiro/r5m7j623/). But it wasn't very good, performance wise. 

So, the other day I was idle and decided to give the code a little brush. 

Here's the [final version](https://victorribeiro.com/rippleEffect/)

As you can see, the performance is much better now, since I'm using putImadeData from canvas to draw the final image. 

You can check out the code [here](https://github.com/victorqribeiro/rippleEffect)
Looking for a backup db system
Tags: devops
Published: 2019-12-11 20:28:51

---
title: Looking for a backup db system
published: true
description: 
tags: devops
---

Hello,

i've been searching a good backup system (especific for a remote dbs) with a good Web ui interface, actually i found bareos, urbackup but this ones are limitaded with the integration of db server.

Based in your experiences, which one do you recommend me?

:)
Why are you stuck?
Tags: beginners, todayilearned, productivity, 100daysofcode
Published: 2019-12-11 20:25:35

Recently I've been thinking a lot about this, mostly from my own experience, and some from reading about it from others. 

Getting stuck learning programming almost seems like writer's block for (you guessed it) writers. It's as if literally someone made a wall appear in front of you, and you walked into it face-first.

 I've spent a lot of time over the last few years with my face in that wall, trying to find my way past it. Obviously I'm not expert, but these are the things I did that helped me break past that stuck barrier while learning to code. Keep in mind I'm a newbie programmer, maybe old school guys have some better techniques.

1. The obvious one, take a break. Go do something else for a bit. Clear your mind.

2. Try to break the problem down into the tiniest pieces. That helps me when I'm doing a programming challenges. It's possible it is just not small enough.

3. If you've tried everything else from searching for a solution, to asking questions on your given platform and you're still maybe not getting it, or feeling like it's just to difficult for you, try changing learning material. Everyone learns differently. 

It is possible that maybe the instructor didn't explain it well enough, or you get the concept but are having trouble applying it. It's possible you just need more practice. Grab a book, or watch a youtube video. Make sure whatever you do, you type a LOT of code. Type everything out, even if you understand it mentally. 

Anyway, that's just my take. What are some other things that might help someone get past a block?
How to (almost) lose data with git rebase
Tags: git, showdev
Published: 2019-12-11 20:14:35

Was working on a feature just now and noticed that I had forgotten to add a service that I thought was committed 2 commits ago. No problem, right? just `git rebase -i` that sucker and put them into that commit!

```
$ git rebase -i <three refs ago>
```

OK. So I want to `edit` the commit from 2 refs ago and leave the last commit alone.

``` 
pick: <last commit>
edit: <target commit>
```

I save... and now I can go in and add my files.

```
git add src/app/services/
git commit --amend
```

It is at this point that I want to note that I actually have been playing around with using `zsh`'s git plugin, which offers two aliases that are relevant to rebases:

* `grba`: `git rebase --abort`
* `grbc`: `git rebase --continue`

Also, what ended up happening at this point was this:

```
$ grba
```

Well, heck.

My commit was aborted, and those files that were amended to the rebased commit? **Gone**.

Thankfully PHPStorm's local history saved my code. Although in this particular case the service was all of 10 lines... but next time I shall have to be more careful when doing interactive rebases!

Update: See in comments below. The `reflog` held the data! It was not gone...
Urgent Need of Teradata Developer in Union NJ
Tags: teradata, sql, unix
Published: 2019-12-11 20:12:18

Hello all, We are looking for Sr Teradata Developer in Union, NJ with direct client. Open for W2/C2C. Interested Candidates can share the resume at kuldeep.dixit@cardinaltsinc.net or reach me at 732-821-7400 * 328. Thanks
Reading Snippets [7]
Tags: javascript, beginners
Published: 2019-12-11 20:10:30

Short-circuiting determines what boolean value is returned following the use of Logical And '&&' operator or the Logical Or '||' operator with non-boolean values. 

|| will return the value on its left if it is truthy. In other cases, it will return the value on the right. 

&& returns the value on the left if it is falsy. In other cases, it returns the value on the right.
Urgent Requirement of UX/UI Designer in Paramus, NJ
Tags: ux, design, html, css
Published: 2019-12-11 20:07:56

Hello, we are looking for Sr UX/UI Designer with our direct client based in Paramus, NJ. Open of W2/C2C. Interested candidates can share the resumes at kuldeep.dixit@cardinaltsinc.net or reach me at 732-821-7400 * 328.
Web Developer Monthly 💻🚀 November 2019
Tags: webdev, productivity, news, javascript
Published: 2019-12-11 20:07:10

**17th issue! If you missed the last few months, check them all out**
**[here](https://zerotomastery.io/blog/?tag=WDM&utm_source=devto&utm_medium=WDM)**.

### If it’s your first time here… (otherwise skip this part)

Being a web developer is a fantastic career option. You have many job opportunities, you can work around the world, and you get to solve hard problems. One thing that is hard, however, is staying up to date with the constantly evolving ecosystem. You want to be a top performing web developer, coder, programmer, software developer, but you don’t have time to select from hundreds of articles, videos and podcasts each day.

This monthly newsletter is focused on keeping you up to date with the industry, keeping your skills sharp, without wasting your valuable time. I will be sharing the most important articles, podcasts and videos of the month. Think [Tim Ferriss](https://medium.com/u/56d3bc91794f) and [the Pareto Principle](https://en.wikipedia.org/wiki/Pareto_principle) (80/20 rule) meeting the Software Development world. What’s the 20% that will get you 80% of the results?

### What you missed in November as a Web Developer…

*****

### State of the Web Report 💃🕺
HTTP Archive recently [released their state of the Web Report](https://almanac.httparchive.org/en/2019/table-of-contents). It contains 20 chapters of data combined with expert advice/details so I recommend blocking out a weekend to read it. Some interesting highlights in there to keep yourself up to date with the industry.

But wait, this isn't it. Here are a few more reports that have come out including surveys to show you what is trending and what others are doing in the industry:
* [Developer Skills Report](https://research.hackerrank.com/developer-skills/2019)
* [Developer Ecosystem Report](https://www.jetbrains.com/lp/devecosystem-2019/)
* [Github Trend/Activity Report](https://octoverse.github.com/)
* [Front End Tooling Survey](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results)
* A few we already mentioned in the past, but since you're here already: [state of CSS](https://2019.stateofcss.com/) and [state of JS](https://stateofjs.com/) surveys.

**Don't worry if you don't have time to go through all of these. I will be combining all of the insights from above plus a few secret sources to give you the best things to look out for and trends for 2020 in an article I will be releasing in December. Signup to the newsletter [here](https://zerotomastery.io/blog?utm_source=devto&utm_medium=WDM) if you want to be notified when that is released.**


### Free Tools For Web Developers ✂️
… wait where is the rest? Well, the full version of the post can be found on our blog [here](https://zerotomastery.io/blog?utm_source=devto&utm_medium=WDM)!
Introducing new avatar of DL Gateway
Tags: blockchain, dltlabs, dlt
Published: 2019-12-11 20:02:49

---
title: Introducing new avatar of DL Gateway
published: true
description: ntroducing new avatar of DL Gateway
tags: blockchain, DLTLABS, DLT
---

We are thrilled to announce that the newly updated DL Gateway platform has been launched! Packed with cutting edge features and system improvements, we think you will absolutely love the upgraded environment.

Some of our new features and improvements include:

- Signup and login directly to the Ethereum and Hyperledger Fabric blockchain infrastructures
- Create and manage projects using Ethereum and Hyperledger Fabric
- Collaborate and work on projects with other users registered on the platform
- View detailed project statistics, including total project transactions and top API calls, in a clean UI that is easy to navigate
- Monitor end-to-end blockchain network statistics
- Personalize your account with a photo or avatar image


With more than five million transactions to date and growing, we’d like to remind you that this world-class system is 100% free to use. Please join us, collaborate with your team and create something amazing.

Register for  DL Gateway at - http://dlgateway.dltlabs.com/
Flex
Published: 2019-12-11 20:00:10

Wow ! I am on my second story !

In this story, I want to briefly talk about my fev layout container !

I am not a fan of bootstrap style layout system so I was thrilled when I read about flexbox and css grid.

Flexbox reminds me of WPF StackPanel which is also one dimensional . 

I would highly recommend this amazing article to understand how flexbox works it’s magic.

Here is a quick recipe to create 
flex container :

1.Set display:flex 
2.Set flex-direction to 'row' or 'column'
3.Set ‘justify-content ‘ to align items across MAIN axis.
4.Set ‘align-items ‘ to align items across CROSS axis.

Even after reading a couple of in-depth articles ,I was still confused about 'justify-content' and 'align-items' ☢️. 

Finally I decided to create simple component to clear the confusion .
Here it is ‘Stack’ component inspired by StackPanel 💡.

{%gist https://gist.github.com/joietej/cf52ece4511563dcb36b86acb9b0a6df %}
Pandas #2: Opening files and using them as dataframes.
Published: 2019-12-11 19:49:30

(Previous post about [Pandas: Pandas #1: Working with data in Python and its main structures](https://dev.to/czrpxr/pandas-working-with-data-in-python-and-its-main-structures-53ng))

Previously we saw the basic Pandas objects and an introduction about how creating them with lists and dictionaries and access singles values. But, if you want to open files (like spreadsheets) to be manipulated in dataframes. Are we able to do this?!
 
Of course!!! Let's see:

### Opening files

Pandas has many methods that can save us from spending a lot of time coding alternatives to open files and transform them in dataframes to be manipulated. There are so many of them and you can see in [Pandas' webpage](https://pandas.pydata.org/pandas-docs/stable/reference/io.html) a list of names of all methods to open files. Here I'll write about the two most used of them:

* Open a csv file

```python
import pandas as pd

x = pd.read_csv('my_file.csv')
```
This is the simplest way to do this, but if needed we have some parameters that we can pass to it to make our life easier. Let's suppose you have a tsv (tab-separated values) instead of an csv (comma-separated values). To solve this, you can pass **sep** to the method and declare the separator used in the file (comma is the default value):

```python
import pandas as pd

x = pd.read_csv('my_file.csv', sep="\t") #\t means tab
```

If you import your file just like the cells above, the default behavior of read_csv is infer that the first line of the file refers to the name os the columns. You can pass **header = None** if you don't have columns names. If you want to put your own columns names, you can use the parameter **names** and pass the list of your names.

```python
import pandas as pd

x = pd.read_csv('my_file.csv', header = None, names=['col1','col2,'col3'])
```
You can also pass a column that will be used as index in your dataframe. It's passed using **index_col**:


```python
import pandas as pd

x = pd.read_csv('my_file.csv', header = None, names=['col1','col2,'col3'], 
index_col='col2')
```

There are many other parameters that you can use to open a csv file, but these ones are enough to start your analysis.

* Open an excel file

Microsoft Windows is the most popular OS and Microsoft Office a well-known package (dragging excel with it). So, it's important to know how to open these files. Let's see:

```python
import pandas as pd

x = pd.read_excel('my_file.xls', sheet_name='sheet2')
```
The most important parameters are the same as in csv version, but this time we'll include one more, the **sheet_name**. Here you can specify which sheet to open in your file if you have many of them. If they're not named, you can pass a integer to call it (remember that it starts in 0).

Well, that's it for now! My plan is use this DEV blog as a notebook, saving things from the most simplest and elementary to the most elaborate. My intention is to keep information easy to access.

See ya!
Running (and killing) multiple processes in a single shell script
Tags: linux, bash
Published: 2019-12-11 19:48:53

---
title: Running (and killing) multiple processes in a single shell script
published: true
description: A quick tip on how to keep multiple processes running in your shell
tags: linux, bash 
---

Something I'm regularly doing during my daily development is running build / server processes.  

For example, right now I'm working on a project that requires a Django development web server as well as a `sass --watch` process to compile CSS.  Often I'm also running some node processes like `react-native` or `babel` or something.

For me, it's annoying to have 10 terminals open running all of these processes. 

I'd rather run it in a single file. A common solution is to use the latest build utility to wire everything up.  My opinion is that it's more useful & natural to just call the binaries directly from a bash script.

Here's how you can run multiple processes at once (assuming we have binaries or shell scripts called `program_1`, `program_2`, and `program_3`):

```bash
# start the first program and fork it
program_1 &

# store the process ID
program_1_pid=$!

# start the second program and fork it
program_2 &

# store the process ID
program_2_pid=$!

# trap ctrl-c so that we can kill
# the first two programs
trap onexit INT
function onexit() {
  kill -9 $program_1_pid
  kill -9 $program_2_pid
}

# start the third program, don't fork it
program_3
```

That's it.  Name this script something like `script.sh` and run it using `bash script.sh`.  All three of your programs will run.  When you exit (by pressing ctrl+c), first `program_3` will quit, then the function `onexit` will execute, stopping the other two programs.

---

That's all for now, hopefully this will help you in your dev life.

Follow me here on dev.to or on [Twitter @connorbode](https://twitter.com/connorbode) for more as I learn & build.
An example of AWS CDK that creates an API Gateway with existing Lambda and Domain
Tags: awscdk
Published: 2019-12-11 19:46:38

---
title: An example of AWS CDK that creates an API Gateway with existing Lambda and Domain
published: true
description: This Typescript code will create a CloudFormation template that creates API Gateway and other stuff.
tags: AWSCDK
---


```typescript
import cdk = require("@aws-cdk/core");
import apigateway = require("@aws-cdk/aws-apigateway");
import lambda = require("@aws-cdk/aws-lambda");

interface MultistackProps extends cdk.StackProps {
  stage: "staging" | "production";
  functionArn: string;
  domainName: string;
  domainNameAliasHostedZoneId: string;
  domainNameAliasTarget: string;
}

export class MuaFrontendApiGatewayStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props: MultistackProps) {
    super(scope, id, props);

    const domain = apigateway.DomainName.fromDomainNameAttributes(
      this,
      `existing-domain-${props.stage}`,
      {
        domainName: props.domainName,
        domainNameAliasHostedZoneId: props.domainNameAliasHostedZoneId,
        domainNameAliasTarget: props.domainNameAliasTarget
      }
    );

    const api = new apigateway.RestApi(this, `api-gateway-${props.stage}`, {
      restApiName: `api-gateway-${props.stage}`
    });

    new apigateway.BasePathMapping(this, `basePathMapping-${props.stage}`, {
      domainName: domain,
      restApi: api
    });

    const lambdaOne = lambda.Function.fromFunctionArn(
      this,
      `lambdaOne-${props.stage}`,
      props.functionArn
    );
    const lambdaIntegration = new apigateway.LambdaIntegration(lambdaOne, {
      contentHandling: apigateway.ContentHandling.CONVERT_TO_BINARY
    });
    const rootProxy = api.root.addProxy({
      anyMethod: false
    });

    const methodOne = rootProxy.addMethod("ANY", lambdaIntegration);

    new lambda.CfnPermission(this, `permission-for-lambda-${props.stage}`, {
      action: "lambda:invokeFunction",
      principal: "apigateway.amazonaws.com",
      functionName: lambdaOne.functionArn,
      sourceArn: methodOne.methodArn.toString()
    });
  }
}
```