teleren/devto huggingface dataset:
Using Open Sea Map data in Kibana maps
Tags: dataviz, kibana, opendata, maps
Published: 2021-03-30 12:54:56

---
title: Using Open Sea Map data in Kibana maps
published: true
date: 2021-03-04 00:00:00 UTC
tags: dataviz,kibana,opendata,maps
canonical_url: https://rmoff.net/2021/03/04/using-open-sea-map-data-in-kibana-maps/
---

Kibana’s map functionality is a powerful way to visualise data that has a location element in it. I was recently working with data about ships at sea, and whilst the built in `Road map` is very good it doesn’t show much maritime detail.

 ![maps01](https://rmoff.net/images/2021/03/maps01.png)

Kibana’s map visualisation has the option to pull in additional visual information from other places (known as tile servers). I found [a list of Tile servers](https://wiki.openstreetmap.org/wiki/Tile_servers), which had details of [OpenSeaMap](https://wiki.openstreetmap.org/wiki/OpenSeaMap) which includes:

> beacons, buoys and other seamarks, port information, repair shops, ship supplies and much more, but also shops, restaurants and places of interest

 ![maps05](https://rmoff.net/images/2021/03/maps05.png)

Adding the tile server details is relatively easy - the trick is getting the incantation of the URL exactly right (which is why I’m even writing this up in the first place, because it took me a bit of fiddling).

1. Click on `Add layer`

     ![maps02](https://rmoff.net/images/2021/03/maps02.png)

2. Select `Tile Map Service`

     ![maps03](https://rmoff.net/images/2021/03/maps03.png)

3. Enter the details
   ![maps04](https://rmoff.net/images/2021/03/maps04.png)
   * Url: `https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png`
   * Attribution text: `OpenSeaMap`
   * Attribution link: `http://openseamap.org/`

4. Click the `Add layer` button at the bottom, and optionally give the layer a name on the next screen, and click `Save & close`

You now get visuals from OpenSeaMap overlaid, showing things like shipping lanes at a high level…

 ![maps07](https://rmoff.net/images/2021/03/maps07.png)

…down to much more detailed attributes:

 ![maps06](https://rmoff.net/images/2021/03/maps06.png)

Of course, Kibana is not just a map viewer - it’s a data visualisation tool in which maps provide the canvas on which to illustrate the data, like this:

 ![maps08](https://rmoff.net/images/2021/03/maps08.png)
Linkable log lines now available!
Tags: logging, netlify, deploy
Published: 2021-03-05 16:11:32

---
title: Linkable log lines now available!
published: true
date: 2021-03-04 00:00:00 UTC
tags: logging, netlify, deploy
canonical_url: https://www.netlify.com/blog/2021/03/04/linkable-log-lines-now-available/
---

Wow! I loved [Lincoln Logs](https://www.basicfun.com/lincoln-logs.html) when I was a kid! It was so fun to be able to build houses, or even castles, and get so creative with them, and the— wait, there’s a typo in my notes… ohhhhh, not **Lincoln Logs** , it’s **linking logs**!

Well, you know, this is just as fun. We have some very cool changes just released in your deploy logs at Netlify!

Your deploy logs include all kinds of important info, like details about your site’s build image, the Netlify build process, dependency caching, build plugins, and details about if your deploy succeeded or not. And sometimes, you’re going to want to share some of that information, just like you might share your Lincoln Logs with your friends!

![Linkable log lines!](https://www.netlify.com/img/blog/loglines.png "Linkable log lines!")

When you go to your logs, you can now select the line number to highlight the line, or hit Shift and select a range of lines, and you can share the resulting URL with your teammates. Wow, that was so easy, almost as easy as… Lincoln Logs. 👀

If you’d like to read more about how to use this feature, [check out the docs](https://docs.netlify.com/site-deploys/overview/?utm_campaign=devex-cs&utm_source=blog&utm_content=loglines#share-log-content) and get to it!

Not on Netlify? Want to be? [Sign up here](https://app.netlify.com/signup?utm_campaign=devex-cs&utm_source=blog&utm_content=signup)!
Numberize a value
Tags: webdev, javascript, utils
Published: 2021-03-10 16:24:56

---
title: Numberize a value
published: true
date: 2021-03-04 00:00:00 UTC
tags: webdev, javascript, utils
canonical_url: https://thomasxbanks.com/articles/numberize-a-value/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz03zr7cz1w6ovepw67g.jpg
---

If you get a CSS value but you want to do maths with it, what do you do?

```js
const width = window.getComputedStyle(document.body, null).getPropertyValue('width'); // 960px
document.body.style.width = (width / 2); // NaN
```

Oh noes! 😖

I guess we could use the CSS `calc()` syntax…

```js
document.body.style.width = `calc(${width} / 2)`; // <body style="width: calc(960px / 2);">
```

This is all well and good for simple calculations like that but what happens when we start getting spicy?

```js
const padding = window.getComputedStyle(document.body, null).getPropertyValue('padding'); // 8px
const margin = window.getComputedStyle(document.body, null).getPropertyValue('margin'); // 32px
document.body.style.width = `calc(calc(${width} / 2) + calc(${padding} + calc(${margin} * 0.5))`;  // <body style="width: calc(calc(960px / 2) + calc(8px + calc(32px * 0.5)));">
```

Ew! Gross! 🤮

What you _actually_ want is to be able to treat that string like a real number, right?

## Make that string an integer

A fun quirk/feature of JavaScript is that `parseInt()` and `parseFloat()` can be used on any string that _starts_ with a number and it will just magically work!

```js
document.body.style.width = (parseInt(width, 10) / 2) + (parseInt(margin, 10) * 0.5) + parseInt(padding, 10) + 'px'; // <body style="width: 504px;">
```

The magic here is JavaScript's _Type Inference_ - it's doing a lot of the heavy lifting in assuming that - because you're "parsing an integer" - the string passed **is an integer**.

Again, this works but I, for one, don't like things to run off assumptions. And, no, rewriting the application in TypeScript isn't going to happen, Reply Guy!

## Make that string _definitely_ an integer

If you just want the code, here you are…

```js
const numberizeValue = (input) => parseFloat(input.split('').filter(x => !x.match(/[0-9.]/g)).join(''), 10);
```

### Now, let's break that down!

Firstly, we're going to use `parseFloat()` because it will allow us to "numberize" numbers with decimal places. We're going to assume our numbers are decimal and return the result using Base 10.

Next, we explode the provided string into an array with `input.split('')`. The use of `''` gives us an array of individual characters.

We can now filter the array to remove any characters that are _not_ numbers using `.filter(x => !x.match(/[0-9.]/g)`. The RegEx in the `match` function is looking for decimal numbers between _0_ and _9_, and the full-stop/period character.

Now the array has been stripped of letters and (most) punctuation, we can `join` the array back into a string to be parsed.

![numberizePixels examples](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq4poj76hgk609hycdpw.png)
What is the best database to use in your app?
Tags: database, nosql
Published: 2021-03-04 13:03:23

---
title: What is the best database to use in your app?
published: true
date: 2021-03-04 00:00:00 UTC
tags: database, nosql
canonical_url: https://jhall.io/archive/2021/03/04/what-is-the-best-database-to-use-in-your-app/
---

Today I saw a poll on LinkedIn:

> What is the best database to use in your app?
> 
> - MySQL
> - PostgreSQL
> - Microsoft SQL Server

With my consultant hat on, my answer is of course, “It depends!”

For many applications, none of these three is the ideal answer. And I’m not talking about SQLite.

For many applications, a relational database is simply the wrong answer. But “which flavor of SQL should I choose?” has become the default question most developers ask when designing an app.

Next time you’re designing an app, consider whether a [non-relational database](https://en.wikipedia.org/wiki/NoSQL) might make sense. Here are a few not-so-random ones to look at:

- [MongoDB](https://www.mongodb.com/)
- [CouchDB](https://couchdb.apache.org/) or [PouchDB](https://pouchdb.com/)
- [Cassandra](https://cassandra.apache.org/)
How to put SVG inside pseudo elements in CSS?
Tags: css
Published: 2021-03-04 00:00:00

---
  title: How to put SVG inside pseudo elements in CSS?
  published: true
  tags: CSS
  date: Thu Mar 04 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/put-svg-in-pseudo-elements-css
  cover_image: https://melvingeorge.me/_next/static/images/main-4b5c4007f9d5aa7ca89d6c4d17f27dc0.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/put-svg-in-pseudo-elements-css)
  
To put SVG as the content inside pseudo-elements like `:before` and `:after`, you can use the `url()` function in the CSS and pass the link to the SVG file as a string to the function.

```css
/* Put Svg in Pseudo element ✅ */
div:after {
  content: url("path-to-my-svg.svg");
}
```

For example, let use a real SVG icon to understand. Check out the [SVG](https://upload.wikimedia.org/wikipedia/commons/9/99/Leo.svg) which we will be using for the example.

Now in the `:after` or `:before` pseudo elements for a `p` (paragragh) element, you can use it like this,

```css
p:before {
  content: url("https://upload.wikimedia.org/wikipedia/commons/9/99/Leo.svg");
}
```

That's it! 🔥

See the above code live in [JSBin](https://jsbin.com/relezoguvu/4/edit?html,css,output)

### Feel free to share if you found this useful 😃.

---
Get Environment Variables From a File into Makefile
Tags: make, linux, unix
Published: 2021-05-16 17:02:45

---
title: Get Environment Variables From a File into Makefile
published: true
date: 2021-03-04 00:00:00 UTC
tags: make, linux, unix
canonical_url: https://tech.serhatteker.com/post/2021-02/get-env-vars-from-a-file-into-makefile/
---

It is very easy to achive that in [make]:

```make
# Makefile

include .$(PWD)/.env
```

That's all. You can now access your *env vars* in *make targets*:

```make
# Makefile

include .$(PWD)/.env

dummy-target:
    @echo $(SOME_ENV_VAR)
```


## Sub-make

If want to you pass **all** your environment variables into `Sub-make` you should `export` them:

```make
# Makefile

ENV	:= $(PWD)/.env

# Environment variables for project
include $(ENV)

# Export all variable to sub-make
export
```


## Multiple Files

You can use multiple *env* files and their names can be anything:

```make
# Variables
# -------------------------------------------------------------------------------------
VENV		:= $(PWD)/.venv
ENV			:= $(PWD)/.env
ENVS		:= $(PWD)/.envs

# Environment variables for project
include $(ENV)
# Local environment variables for db
include $(ENVS)/.postgres
include $(ENVS)/.redis

# Export all variable to sub-make
export
```


All done.




[make]: https://www.gnu.org/software/make/manual/html_node/index.html#Top
SpellcheckCI
Tags: github, actions, ci, blogging
Published: 2021-03-29 11:36:13

---
title: SpellcheckCI
published: true
date: 2021-03-04 00:00:00 UTC
tags: ["github", "actions", "ci", "blogging"]
canonical_url: https://joshghent.com/spellcheck-ci/
---

Making sure you have correct spelling on your blog posts is vital to keep readers attention. Unfortunately, it’s a laborious process and sometimes things fall through the cracks. Being the nerd I am, I decided I needed a shell script to solve this problem.

Thankfully, someone has created an open source markdown based spellcheck module that is Node based - [mdspell](https://github.com/lukeapage/node-markdown-spellcheck).

Since I’m using Gatsby, my posts can be found under `content/blog/*/index.md` - where `*` is the name of the blog post. The command to run the spell check was then

```
$ npm i -g node-markdown-spellcheck && mdspell -a -n "content/blog/**/*.md"
```

This would go through each of my posts and then validate the spelling is correct. When it comes across an incorrect spelling, it notifies me and asks me if I want to correct it, or add it to a local dictionary.

But, because I often blog from my iPad, where I don’t have a terminal, I wanted this feedback to be visible on the CI for the new blog posts. My workflow for creating new posts is create a new git branch, create the file and write the post, push to github and create a new pull request. You can find this exact blog post’s pull request [here](https://github.com/joshghent/blog/pull/165).

## Time to Automate

I’m a big user of GitHub Actions so I went with that to setup this process.

Initially, I went down the road of installing all the node dependencies, then installing mdspell and then running the spellcheck. However, I found that it took over a minute to download all the node modules! It turns out, I could have used `npx` to use mdspell without having to install the project.

Here is the complete GitHubCI - which, across over 50 blog posts, takes around 10 seconds to run!

```
# ./.github/workflows/spellcheck.yml
name: Spellcheck

on: [pull_request]

jobs:
  spellcheck:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm i markdown-spellcheck -g
      - run: mdspell -a -n -r "content/blog/**/*.md"
        name: Spellcheck
```

I hope this proves useful to you for your own blog. If you don’t have one already, I’d highly recommend creating one!
LaTeX: Importing Images
Tags: latex, codenewbie
Published: 2021-03-03 23:07:21

Hello, how are you? :) 

Today I start with a new topic, **Images**.

The images are so important because you can illustrate your ideas which you are talking about or just add some color to your work.

I am going to talk about the basics of images in LaTeX, of course, in some posts we are going to learn how to mix images and tables to start putting together all the things we have learned. 

# Images

If we want to put images in our document we need to import the `graphicx` package.

## Supported formats

We have a lot of image formats, there are some packages to import different formats, here, we talk about *eps, pdf, png, jpg*. My suggestion is the following 
 
* `eps` and `pdf` for math figures
* `png` and `jpg` for *other* images

But why? With the formats `eps` and `pdf` the image does not lose quality and it is optimized for diagrams and those little things. With `png` and `jpg`, we can have more details and are good for *images*

## Importing images

We can import our image with

```
\includegraphics[attributes]{fileName.ext}
```
Where *fileName* is the name of the file and *ext* is the extension, it is *eps, pdf, png, jpg*. In *attributes* we can set the height, width, angle, etc. So the entire command will be 

```
\includegraphics[height=Xcm, width=Ycm]{myFile.ext}
```

Where *X* and *Y* is the desired size.

In the next post, we are going to learn about the `figure` environment

Greetings :)
Day 321 : Different
Tags: hiphop, code, coding, lifelongdev
Published: 2021-03-03 22:59:06

_liner notes_:
- Professional : Cleaned up some of the code from the Web Components demo I made. Going to show it tomorrow in a meeting. Speaking of meetings, I had a couple. One was a talk prep session and the other was a company-wide presentation. Had a quick chat with a team member to get my opinion on something they were working on. Walked around the park a few times. Did a bunch of different tasks today.

- Personal : Last night I was able to get my upload application to display previews of multiple images and then upload each image one at a time and display which one is being uploaded and display a link once that image has uploaded. That was a horrible sentence. haha I'm tired. Finished it pretty late. Did some more research and went to sleep.

![View from a log partially in the lake, looking up at a gray mountain in the distance with a pine tree forest surrounding the late](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7je7cacjpjwautcdnj1w.jpg)

Now that I know the upload application can work, I'm going to turn it into a Svelte application and start saving information to a database. Hopefully I can get that knocked out quickly. I need to add authentication also. That means I'll need to be able to add the users to the database first which means I need to get back to my admin application. So I'll have to start there. Going to get something to eat and get to coding.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube ClMLHRr6l4w %}
Combining Music and Code with Amirreza Amouie and Jérémie Astor
Tags: discuss, podcast
Published: 2021-03-03 22:07:35

---
title: Combining Music and Code with Amirreza Amouie and Jérémie Astor
published: true
description: Listen to S4E4 of DevDiscuss!
tags: discuss, podcast
series: DevDiscuss Season 4
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkh9try8rhgufnj0fvdy.png
---

> **As we'll discover in S4E4 of DevDiscuss, putting music and code together can be very generative**

{% podcast https://dev.to/devdiscuss/s4-e4-how-to-combine-music-and-code %}

This week's episode of the DevDiscus podcast was a particularly fun one for @jess and me to record. In it, we had the pleasure of chatting with [Amirreza Amouie](https://www.linkedin.com/in/amirreza-amouie/), aka Amu, indie artist and software engineer, and [Jérémie Astor](https://dev.to/fennecdjay), creator of Gwion, a programming language aimed at making music. The conversation you'll hear is focused on the software side of music-making, how code and music intersected in the lives of our guests, and much more. We’ll also hear clips of some of the music our guests have made! 

If you’ve ever been fascinated by the effect music has on your ability to focus or code in a more enjoyable way, I think this episode will strike a chord with you. 

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s4-e4-how-to-combine-music-and-code/id1513053883?i=1000511427226)
- [Spotify](https://open.spotify.com/episode/48vL6XgSc8lM4ePquUM86X)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzI5?sa=X&ved=0CAQQkfYCahcKEwjg6Ou375TvAhUAAAAAHQAAAAAQBQ)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss/s4e4-how-to-combine-music-vPfGQeKb0JY/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=161243959)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [DEV Pods Site](https://devpods.herokuapp.com/podcasts/devdiscuss/episodes/119)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- _Our season four sponsors: DataStax, New Relic, Educative, and Ambassador Labs!_

# 🗣️🗣️🗣️
Exception Handling with JDK 6 vs JDK 7 and above.
Tags: java, tutorial, beginners, codenewbie
Published: 2021-03-03 22:07:03

**Exception handling** is one of the most important concept in any programming language, so sooner or later in your journey you will have to learn it.
This article is not to talk about Exception Handling in general but some changes made in the Java syntax and how to take advantage of that change *(called try-with-resources)*.

The syntax of the normal try-catch-finally block:
```java
try {
    // code to try
} catch(Exception e){
    // code when error occurs
} finally{
    // code to run no matter the outcome
}
```

The syntax of the **try-with-resources**:
``` java
try (AutoCloseable objects){
    // code to try
} catch(Exception e){
    // code when error occurs
} finally{
    // code to run no matter the outcome
    // the finally block can be optional.
}
```

**Now lets say we want to write to a file.**

In JDK 6 and below, we write it as:
```java
File file = new File(“test.txt”);
FileWriter fw = null;
try {
   fw = new FileWriter(file); 
   fw.write(“Hello World in the file!!\n”);
   // fw.close(); // close it if everything goes well (optional)
} catch(IOException ioe){
    System.out.println(“Error writing to file”);
} finally{
    try {
        if(fw != null){
	    fw.close();  // we close the file
        }
    }
}
```

It was a good way and it still is, but we have to always close the file manually. What if we forget to close the file, or forget to include the finally block, then there will be a resource leak. In a small program its will seem ok but in a big program,... :(


**In JDK 7 and above, we write it as:**

```java
File file = new File(“test.txt”);
try (FileWriter fw = new FileWriter(file);){
   fw.write(“Hello World to the file!! \n”);
}catch(IOException ioe){
    System.out.println(“Error writing to file”);
}finally{
    // do something else
    // the finally block is optional
}
```
We can even add many more Closeable objects inside the parenthesis, but they must be separated by semicolon. 
*eg:*
```java
try(FileWriter fw = new FileWriter(parameter); 
    PrintWriter pw = new PrintWriter(parameter);){
	......
// rest of code
```

Its much easier now, because Java will automatically close the file after the try-catch block.
There are a few limitations to this, the try-with-resources works with:
  * Only Classes that implements the AutoCloseable interface.
  * The Object must be instantiated inside the parenthesis, *eg:*

```java 
FileWriter fw = new FileWriter(parameter);
```

It is not always that good to use try-with-resources, like making a chat app, because the server needs to be open for connections, so that client can send and retrieve data.

You can use both ways and they will work on any version of Java you are using, it depends on what you feel comfortable using.
100 Bytes Of Wisdom: Day 18 - more code review wisdom!
Tags: career, journey, advice
Published: 2021-03-03 21:56:06

---
title: 100 Bytes Of Wisdom: Day 18 - more code review wisdom!
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5s6fgjwz49b8lmc6o8p.png)

I love advising the teams I work with to attach visual proof to code review. Not only does it give context (more on that in my next byte) but it means you've actually run the code, seen it works and compared it with your own expectation or mocked design. Visual proof doesn't have to be only for front ends, it could be a screenshot of some logs, or some graphs, anything. 

The benefit here is two-fold. 

First, you are proving to your reviewers you did the task and the code works. I've even found bugs as I recorded a demo record a small demo or took a screenshot. Use the demo gods for good!

Second, you're having your reviewers review what you think the proof is. Is what you've done enough to solve the task? Are you observing the right output to come to the conclusion that you are finished? This is another great chance to collaborate with a reviewer. 

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/