teleren/devto huggingface dataset:
Feedback on a tpl engine based openapi tool BOATS
Tags: openapi
Published: 2019-04-15 05:13:05

---
title: Feedback on a tpl engine based openapi tool BOATS
published: true
description: Looking for feedback, suggestions on a newly published tool
tags: openapi
---

Hi all,

I am looking for any feedback/critique on a new tool i just published.

[https://www.npmjs.com/package/boats](https://www.npmjs.com/package/boats)

It enables one to write a little more dynamic openapi spec files with the use of a template engine, Nunjucks.

I was finding it very repetitive writing openapi files as there was no ability to inject content into re-usable chunks, for example writing json api style outputs means a lot of writing the same top level attributes over and over again, or the new openapi 3 declaring json response. As a trail solution I wrote into the package 2 helper functions "mixin" and "uniqueOdId".

Mixin function acts a lot like sass/less mixin and allows you to inject code into re-usable chunks. 

UniqueOdId returns a string that is based on a files location within a filesystem, super important for and code generators ;)

Anyways, I thought i would just throw it out there into the opensource world and see if it sinks or swims or just floats around a little.

Cheers,
John
Binge watching random tutorials is a waste of time!
Tags: beginners, career
Published: 2019-04-14 19:34:19

A lot of people try to learn programming trough reading a book from cover to cover, attending boot camps or watching endless tutorials.

This approach can help you to get some knowledge, but most of the time you learn way less as you have hoped.

If you really want to learn to code, there is only one right way to do it:
**Find or create a real project, you can work on!**

Why is this approach to learning programming a lot better?
In contrast to tutorials or programming books, you will get at some time to a point where you have to find a solution for a problem you can't solve yet.
To get ahead with your project, you have to find a solution to this problem.
Now, you're in a situation where you will learn more about programming and problem solving as if you read through 100 books or watching random tutorials.

You work with your code and you search for solutions to a real problem.

Everything you have truly learned in your lifetime, you only have learned because you did it.
Reading through a book or watching random tutorials without directly using the information bring you some information about the topic but you learn nothing.

It's like watching someone is riding a bike.
You may know how to do it: Step into the pedals and not falling off.
But you don't know how to do it and why it's correct in this or a different way.


Thanks for reading.
Gatsby Tip on Running Multiple Queries (GraphQL Aliases)
Tags: gatsby, react, graphql, jamstack
Published: 2019-04-15 05:03:43

---
title: 'Gatsby Tip on Running Multiple Queries (GraphQL Aliases)'
published: true
description: 'A quick tip on how to run multiple queries in one component/page using graphql aliases'
canonical_url: 'https://malikgabroun.com/blog/gatsby-tip-on-running-multiple-graphql-queries/' 
cover_image: 'https://thepracticaldev.s3.amazonaws.com/i/eok3ztahwx0jxum7rd3c.jpeg'
tags: ['gatsby', 'react','graphql','jamstack']
---

Say you want to fetch specific data in one page based on an argument or a condition which can't be run using one query as you can't query the same field with different condition or argument. One way of doing that by using [GraphQL aliases](https://graphql.org/learn/queries/#aliases) which you can use to rename the returned dataset to anything you want.

## Example

```javascript
export const query = graphql`
  query {
    post: allMarkdownRemark(
      limit: 3
      sort: { order: DESC, fields: [frontmatter___date] }
      filter: { frontmatter: { type: { ne: "portfolio" } } }
    ) {
      edges {
        node {
          timeToRead
          frontmatter {
            title
            path
            date(formatString: "DD MMMM YYYY")
            summary
            images
            tags
            type
          }
        }
      }
    }
    portfolio: allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date] }
      filter: { frontmatter: { type: { eq: "portfolio" } } }
    ) {
      edges {
        node {
          frontmatter {
            title
            path
            images
            tags
            type
          }
        }
      }
    }
    siteMetaData: site {
      siteMetadata {
        title
      }
    }
  }
`;
```

Looking at the above example, we can see the query I made will return multiple datasets by giving it an alias which allowed me to run multiple queries with different arguments and conditions to get the specific data object I needed as you can see in the screenshot.
![graphql alias](./https://thepracticaldev.s3.amazonaws.com/i/ftzlcvbjfqixkd1c0ouo.jpg)
You Can't Test Quality Into a Product
Tags: agile, softwarequality, qa, technicalexcellence
Published: 2019-04-15 03:27:58

---
title: You Can't Test Quality Into a Product
published: true
description: 
tags: agiledevelopment, softwarequality, qa, technicalexcellence
---

QA testing and reviews are activities done after development has been completed. You can't test a feature until after it has been built, and you can't review code until after it has been written.

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

The earlier potential issues are detected, the lower the overhead for managing bugs and reimplementing functionality.

Quality assurance is a proactive team activity starting with development. It requires tight feedback loops designed to assure that quality will be built into the product in the first place.
Exploratory Data Analysis; Much Time & Effort?
Tags: datascience, eventdriven, discuss, help
Published: 2019-04-15 03:10:38

---
title: Exploratory Data Analysis; Much Time & Effort?
published: true
description: How much time or effort do you spend on EDA? 
tags: #datascience #eda #discuss #help
---

Kind Ladies & Gentlemen of Data Science,

I am curious about your datascience work flow. In particular, how much time and effort do you spend on *exploratory data analysis* (EDA)? I have found that it is way *too easy* to write up a huge list of tests, tables, bar charts, histograms, etc. of R functions and produce pages and pages. 

But what EDA do you find yourself focusing on most often?
Quick Lists:  Free static website hosting
Tags: hosting, statichosting, free, lists
Published: 2019-04-15 03:09:43

---
title: Quick Lists:  Free static website hosting
published: true
description: 
tags: hosting, static hosting, free, lists
series: Quick Lists
---

Here are some places where you can host static files (HTML, CSS, JS) for free:

- [Now](https://zeit.co)

- [Surge.sh](https://surge.sh) (command line)

- [Github Pages](https://pages.github.com/) (command line)

- [GitLab Pages](https://about.gitlab.com/product/pages/)

- [Firebase Hosting](https://firebase.google.com/products/hosting/) (command line)

- [Netlify](https://www.netlify.com/)

- [Neocities](https://neocities.org/) (on-site editor)

- [Updog](https://updog.co/) (Google Drive folder)
VSCode Tutorial - Faster Coding With User Snippets
Tags: vscode, javascript, productivity, snippets
Published: 2019-04-15 02:55:31

---
title: VSCode Tutorial - Faster Coding With User Snippets
published: true
description: VS Code extensions are great at boosting productivity. Sometimes though, you might not find what you are quite looking for and want something more tailored to your needs. User snippets are a great way to add your personal touch to this powerful IDE
tags: vscode, javascript, productivity, snippets
---

{% youtube rdejVsPRPoc %}

Besides being absolutely free, one of my most favorite feature when it comes to VS Code as  an IDE is the flexibility and extensibility it provides no matter the programming language of your choice. You literally have an array of productivity tools at your fingertips via the extensions tab.

Sometimes though, you might want something that is very specific to your coding style or to your company’s coding convention and you might struggle in finding just the right package that can satisfy that needs. 

This is where having your user defined snippets can become very handy, and VS Code makes it really easy to create them.
Debugging Web Pages on the Nokia 8110 with KaiOS using Chrome OS
Tags: pwa, kaios
Published: 2019-05-13 13:23:39

---
title: Debugging Web Pages on the Nokia 8110 with KaiOS using Chrome OS
published: true
tags: pwa, kaios
canonical_url: https://paul.kinlan.me/debugging-web-pages-on-the-nokia-8110-with-kaios-using-chrome-os/
---

This post is a continuation of the post on debugging a [KaiOS device with Web IDE](a%20href=%22https://paul.kinlan.me/debugging-web-pages-on-the-nokia-8110-with-kaios/%22>https://paul.kinlan.me/debugging-web-pages-on-the-nokia-8110-with-kaios/</a), but instead of using macOS, you can now use Chrome OS (m75) with Crostini.

![](https://paul.kinlan.me/images/2019-04-15-debugging-web-pages-on-the-nokia-8110-with-kaios-using-chrome-os-1.jpeg)

I’m cribbing from the [KaiOS Environment Setup](a%20href=%22https://developer.kaiostech.com/environment-setup%22>https://developer.kaiostech.com/environment-setup</a) which is a good start, but not enough for getting going with Chrome OS and Crostini. Below is the rough guide that I followed.

Make sure that you are using at least Chrome OS m75 (currently dev channel as of April 15th), then:

1. Ensure that you have Crostini USB support enabled - [chrome://flags/#crostini-usb-support](chrome://flags/#crostini-usb-support)
2. Open up the terminal in crostini
3. `sudo apt-get install usbutils udev` - You need to make sure that you have the USB tools installed.
4. `lsusb` - You should now see your connected device, if this doesn’t work there might be another issue.
5. `sudo apt-get install --no-install-recommends autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib git lib32ncurses5-dev lib32z1-dev libgconf2-dev libgl1-mesa-dev libx11-dev make zip lzop libxml2-utils openjdk-8-jdk nodejs unzip python`
6. `sudo apt install android-tools-adb android-tools-fastboot`
7. I am not sure I needed it, but I also ran `wget -S -O - https://raw.githubusercontent.com/cm-b2g/B2G/1230463/tools/51-android.rules | sudo tee &gt;/dev/null /etc/udev/rules.d/51-android.rules; sudo udevadm control --reload-rules`
8. `sudo chmod a+r /etc/udev/rules.d/51-android.rules`  and then added the device vendor ID to the file.

If all the above is done, you should then be able to `adb devices` and get your list of connected devices.
What PC would you buy as a new dev now?
Tags: beginners, discuss, help
Published: 2019-04-15 01:01:41

---
title: What PC would you buy as a new dev now?
published: true
description: 
tags: beginners, discuss, help, 
---

What kind of setup would you prefer if you could do it all over again today.

- Mac or Windows, Desktop or Laptop? 
- Would you use the same setup for work vs home?
- How would you handle gaming? Would you have a separate rig for that?
Verify git sign-off with TravisCI
Tags: coding
Published: 2019-04-16 16:46:18

---
title: Verify git sign-off with TravisCI
published: true
tags: coding
canonical_url: http://www.gonsie.com/blorg/travisci-verify-signoff.html
---

I don’t know how to explain my role as a contributor to the [mpiFileUtils](https://github.com/hpc/mpifileutils) project. I joined because these tools are so incredibly useful and just plain cool! I also wanted to represent HPC users and contribute documentation to get more people using them. While I haven’t touched the “core” code, I have [converted the build system to CMake](https://github.com/hpc/mpifileutils/pull/208), created distinct [user](https://mpifileutils.readthedocs.io/) and [developer](https://github.com/hpc/mpifileutils/wiki) documentation, and begun acting as [scrum master](https://en.wikipedia.org/wiki/Scrum_(software_development)) for the team’s development process.

One thing I noticed recently is that our documented [contributing requirements](https://github.com/hpc/mpifileutils/blob/master/.github/CONTRIBUTING.md) did not match what we were doing in practice. Namely, our team had agreed to use ‘signed-off’ commits as part of our project (inspired by [OpenMPI](https://www.open-mpi.org/faq/?category=contributing#contribute-code)). But, since we hadn’t automated the check for it, the sign-off wasn’t always happening.

So, today I set about remedying the situation.

## Verifying a git sign-off

We use a less strict form of git signatures, simply a “Signed-off-by” line in the commit message (rather than a full-blown gpg key signature). This can/should be automatically added to a commit message with the `git commit -s` flag. The check to see if the latest commit has the sign-off is simple:

```
git show --summary HEAD | grep -q "Signed-off-by:"

```

## Integration with TravisCI

We already run some automated tests with [TravisCI](https://travis-CI.org). Travis offers a `before_script` step which triggers before the build of our project. This is the perfect place for the git-show + grep one liner! Everything seemed to work… until I actually created the pull request for this change. Strange.

Turns out, TravisCI not only checks that a branch passes the tests, but it also checks that a branch _merged with master_ passes the tests. Travis was doing a merge, thus changing the `HEAD`, before running the verify line. So, the verify should only trigger for testing the branch. Luckily, Travis provides an environment variable set to if the tests are running on a PR or not.

Thus, the one-liner becomes:

```
'if ["$TRAVIS_PULL_REQUEST" = "false"]; then git show --summary HEAD | grep -q "Signed-off-by:"; fi'

```

With this small change it is now easy and automatic for our team to hold ourselves to the standards we’ve set.

## Caveats

The mpifileutils team has agreed that we won’t enforce a sign-off on every commit, just the final commit of a pull request. Therefore, this check only looks at `HEAD`, the last commit that was made.
Add days to a Date in vanilla JavaScript
Tags: javascript, date, webdev
Published: 2019-05-03 10:48:48

---
title: Add days to a Date in vanilla JavaScript
published: true
tags: JavaScript, date, webdev
canonical_url: https://codewithhugo.com/add-date-days-js/
---

Despite the JavaScript `Date` warts, it’s straightforward to add days to a date in JavaScript.

While it would be very easy to reach for moment.js or another date manipulation library (date-fns, luxon, dayjs) to do something as simple as adding days to a Date in JavaScript, writing a short helper function might just be easier.

## A utility function that creates a Date copy

```js
function addDays(date, days) {
  const copy = new Date(Number(date))
  copy.setDate(date.getDate() + days)
  return copy
}

const date = new Date();
const newDate = addDays(date, 10);

```

## Mutating the Date directly

```js
const date = new Date();
date.setDate(date.getDate() + 10);

```

## Gotchas and examples

This actually works as expected, eg. the month rolls over.

```js
const d = new Date('2019-04-14');

const monthRollsOver = addDays(myDate, 31);
console.log(monthsRollOver)
// 2019-05-15

```

Find the live examples at: [observablehq.com/@hugodf/add-days-to-a-javascript-date](https://observablehq.com/@hugodf/add-days-to-a-javascript-date)

Of course if you’re already using a date manipulation library elsewhere in your code, you should leverage that since you’re already paying the download/parse cost.

[<svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewbox="0 0 32 32"><title>unsplash-logo</title>
<path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg>Wim van 't Einde](https://unsplash.com/@wimvanteinde?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge "Download free do whatever you want high-resolution photos from Wim van 't Einde")
Visual Studio Tips - Bulk Editing Shortcuts
Tags: vstips, productivity, csharp
Published: 2019-04-16 09:10:58

---
title: Visual Studio Tips - Bulk Editing Shortcuts
published: true
tags: VSTips, productivity, csharp
canonical_url: https://hutchcodes.net/2019/04/visual-studio-tips-editing-shortcuts/
---

One of the most tedious things we do as developers is making repetitive changes. Maybe we need to set a handful of properties on a single object, or perhaps we want to add a property to the instantiation of a bunch of test objects. Here are a few shortcuts to help you with that.

<!--more-->
### Multi-Caret Editing

Let’s start with adding a property to the instantiation of some test objects. This is often the perfect scenario for “muti-caret editing.” To start this you can do two things. The first is to position your caret where you’d like to start editing on the first line, then hold `Shift+Alt` and either use your arrows or the mouse to select a column or area. The beautiful thing about this method is it allows you to select a block of text to replace.

![alt text](https://hutchcodes.net/img/2019/MultiCaratReplace.gif "Using Shift Alt to replace text on multiple lines")

The drawback of using `Shift+Alt` is that the columns you want to edit must line up vertically. But frequently that isn’t the case, and that’s where `Ctrl+Alt` comes into play. With `Ctrl+Alt` you set the multiple carets by holding `Ctrl+Alt` and clicking where you want to edit. You can then insert text in all those places, even multiple times on the same line.

![alt text](https://hutchcodes.net/img/2019/MultiCaratInsert.gif "Using Control Alt to insert text on multiple lines")

### Duplicate Line

Those work great if the lines you want to edit already exist, or if you know how many lines you need to create at once. But I often find myself wanting to duplicate a line and make a few changes to it. For that, you can use the `Ctrl+E, Ctrl+V` keyboard shortcut which duplicates the line your cursor is on.

![alt text](https://hutchcodes.net/img/2019/DuplicateLine.gif "Duplicate line with Control E, Control V")

### Clipboard Ring

Another feature I find very useful when I’m making repeated edits is the Clipboard Ring. When you hit `Ctrl+Shift+V`, it brings up your clipboard ring which includes the last nine things you’ve copied or cut (more recently used at the top). You can then select the item you want to paste by typing the number, using your arrow keys or clicking with your mouse.

![alt text](https://hutchcodes.net/img/2019/ClipboardRing.gif "Using Clipboard Ring")

This can be useful when you need to copy multiple things from one file to another. You no longer need to flip back and forth, just copy, copy, paste, paste.

### Insert File as Text

This last feature I just stumbled upon while looking for something in the Edit menu. It’s not something I expect to use a lot, but it might be useful. In the edit menu is a command “Insert File as Text”, and the command does just what it says.

![alt text](https://hutchcodes.net/img/2019/InsertFileAsText.gif "Using Edit, Insert File as Text to insert a file as text")
10 min guide to CSS3 Grid Layout
Tags: css, design, frontend
Published: 2019-04-14 23:35:20

## Introduction 

CSS3 Grid Layout is great for controlling layout with rows <b>AND</b> columns!
1. Create the structure of the layout (i.e. # of rows and columns)
2. Place items on the layout (manually or through auto placement)


   Forge on

## Getting started

1. Placing items on a grid:  "display:grid"

{% codepen https://codepen.io/Kauress/pen/WWELoK %} 

 ## Setting grid columns and rows: 

```
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-template-rows: auto;

```
{% codepen https://codepen.io/Kauress/pen/qwXGQK %} 

*Note* 
1.Grid-template-columns and rows help define *grid-tracks* which is the space between 2 lines on the 2 dimensional grid.

2.Fr: fr is a new unit, that stands for fraction. So we are using 1/4 fractions of the available space for each column.


## Setting auto grid rows/columns 

You can explicitly state how many columns and row you want with grid-template-col/row or you can use implicit number of rows/cols with *auto*

```
/* create as many rows as needed that are 100px in height*/
 grid-auto-rows: 100px;

```

{% codepen https://codepen.io/Kauress/pen/OGxRQQ %} 

## minmax function 

This is a built-in function takes in 2 parameters. The first that lets you specify the minimum 'px' and the second that lets you specify the maximum (for example a maximum of auto). For example:

```
  grid-auto-rows: minmax(100px, auto);

```
{% codepen https://codepen.io/Kauress/pen/xeXqeE %} 

## Positioning items 

When you position items on a grid, you target lines instead of tracks.

```
grid-column-start, grid-column-end, grid-row-start and grid-row-end 

```
{% codepen https://codepen.io/Kauress/pen/yrzbgN %} 

## Grid Areas

When grid cells span multiple cols or rows, it is called a *grid area*

## Grid Gutters

You can create space between cols and rows with *grid-column-gap and grid-row-gap* used on the main grid container, for example:

```
.container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-auto-rows: minmax(50,auto);
 grid-column-gap: 20px;
 grid-row-gap: 20px;
}

```
{% codepen https://codepen.io/Kauress/pen/jRGmKb %} 

## Nested grids

Yes you can nest a grid inside a grid-element of the main container. Simple set *display:grid* and specify the number of cols and rows. For example:

{% codepen https://codepen.io/Kauress/pen/PgJmBg %} 

## Aligning content

1. Align element along the row with *justify-items: center*
2. Align element in columns with *align-items: center*
3. To align content use *text-align:center*

{% codepen https://codepen.io/Kauress/pen/OGxgyP %}
Day 10 Learning Javascript
Tags: beginners
Published: 2019-04-14 21:49:43

---
title: Day 10 Learning Javascript
published: true
description: 
tags: #beginner
---

I know the title says "Day 10", but it's more like day 15 as I've spent the past few days working on a DOM Events exercise where I had to create a shopping list web app. Pretty simple right? Ha.

It took me quite a long time to figure out how mark through each list item when the user clicks on it. Same for creating a delete button beside each item, including any new items the user inputs. And it took me even longer to figure out how to actually remove that item from the list when you click on the delete button.

Honestly, I felt pretty discouraged while working on this, since I know shopping lists and To Do lists are supposed to be a few of the easier things you can create with JS. I thought, "What is wrong with me? Why am I having so much trouble with something so simple??"

But then I realized, right now, it really doesn't matter how long it takes me to grasp something, or create something. What matters most is that I figure it out, and use the many awesome resources available to me. Which I did.

That's a win in my book.
Video follow up: 5 Keyboard Shortcuts to Navigate Your Code Faster
Tags: beginners, discuss, tutorial, tips
Published: 2019-04-14 21:46:26

---
title: Video follow up: 5 Keyboard Shortcuts to Navigate Your Code Faster
published: true
description: Use these 5 keyboard shortcuts to help move around your code faster!
tags: beginners,discuss,tutorial,tips
cover_image: https://source.unsplash.com/NqOInJ-ttqM
---

This is a video follow up to my previous article: [https://dev.to/owenconti/5-keyboard-shortcuts-to-navigate-your-code-faster-npf](https://dev.to/owenconti/5-keyboard-shortcuts-to-navigate-your-code-faster-npf)

{% youtube 3M5M8fS9Z3c %}