teleren/devto huggingface dataset:
SVG Tricks: Kickass Hotspots!
Tags: svg, webdev, html, beginners
Published: 2019-08-01 09:29:30

---
title: SVG Tricks: Kickass Hotspots!
published: true
description: A look into creating precise hotspots over images using SVG
tags: svg,webdev,html,beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7ip0hw3cjdqdn1g9a0z4.jpg
---

_Precursor: This article assumes you know the basics of SVG. If you haven't already discovered SVG then there's no time like today. The power behind the features of SVG are quite amazing and oh so useful. Today we're going to be talking about just one of those features._

##The Problem

As you're probably already well aware, everything on a website is a box. We can style elements to look like they're not boxes, but ultimately the element and the room it takes up is a box.

For the most part this isn't an issue. A lot of what we create fits quite nicely in a box, but what do we do when we have to create something that doesn't really fit that model?

For example, let's say we have the image below and need each character to be clickable.

![Move poster of main characters from Kick Ass 2](https://thepracticaldev.s3.amazonaws.com/i/w5l569wg06kb2ct3kudp.jpg)

At this point you may be thinking, "Well, I could just use an [image map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map)", which is true, but also limiting and tedious to work with.

Another solution could be to just absolutely position some elements overtop of the image like so: 

{% jsfiddle https://jsfiddle.net/jamesbrndwgn/hvtcnsrj/ result,html,css %}

However, you'll notice because the characters overlap each other it becomes quite difficult to reliably select the character you want. 

##The Solution
So, as I'm sure you've already guessed, our solution is going to be to use SVG! Using Illustrator (but you can use Inkscape, or any other preferred tool to create SVG's, of course) I imported the image and used the pen tool to create paths around each character.

Here's what that looked like:

![Move poster of main characters from Kick Ass 2 with hotspot paths](https://thepracticaldev.s3.amazonaws.com/i/6wt36xzd43mxbacqzzm1.png)

Not very pretty, I know, but we'll clean things up a bit in the code.

Simply by changing our paths fill attribute to transparent we now have invisible hit areas that perfectly (well, as perfectly as you make them 😉) trace our characters...

{% jsfiddle https://jsfiddle.net/jamesbrndwgn/6zp92kg0/5/ result,html,css %}

Pretty cool, eh? Add a splash of javascript and some CSS and the world is your oyster. Oh, and did I mention it's all completely fluid?

##Just For Fun
 
I wanted to see if I could achieve the same over a video and turns out with a bit of absolute positioning, it's certainly attainable, as you can see below:

{% jsfiddle https://jsfiddle.net/jamesbrndwgn/pjwhez4y/2/ result,html,css %}

So there you have it, go forth, try your own out and post what you come up with in the comments. 🙂

And as always, happy coding! 🤓
Vs Code one tip a week: splitting panes
Tags: vscode, webdev, tips
Published: 2019-08-01 09:22:23

---
title: "Vs Code one tip a week: splitting panes"
published: true
description: "Become a VsCode power user by learning one keyboard trick a week. No mouse required!"
tags: #vscode #webdev #tips
canonical_url: "https://nobitagit.github.io/blog/vscode-tip-split-panes/"
cover_image: "https://images.unsplash.com/photo-1530543787849-128d94430c6b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9"
---


It's quite common when coding to have the need to view multiple files at once on the screen. At times, we might even want to view two different parts of the same long file. Other times again we just want to make the most of a widescreen monitor.

For all those case splitting our editor is the solution, and today we'll see how to do it without the help of a mouse.


Split editor to the right (vertically):

Mac - `⌘ + \` <br/>
Win - `Ctrl + \` <br/>
Linux - `Ctrl + \` <br/>

I try to commit to memory this shortcut by associating the (back)slash with the idea of cutting/splitting something in a half. Not sure it makes sense, but it does work for me!

An editor can also be split horizontally (or, as in VsCode lingo, orthogonally). I don't use this shortcut but in case you have different habits here it is:

Mac - `⌘ + K + \`<br/>
Win - `Ctrl + K + \`<br/>
Linux - `Ctrl + K + \`

<img src="https://media.githubusercontent.com/media/nobitagit/blog/gh-pages/images/2019-8-1-vscode-tip-split-panes.gif" />


## Even more ways to split the screen

If you pull up the command palette (`⌘ + SHIFT + P` on a Mac, `Ctrl + SHIFT + P` elsewhere) you will see some other options to split the screen, such as Split Editor Down, Split Editor Left etc.

<img src="https://raw.githubusercontent.com/nobitagit/blog/gh-pages/images/2019-8-1-vscode-tip-split-panes.png" />

These have no associated default key binding and can be accessed via the palette. If you feel you want to have them available as a shortcut, you can use [VsCode key shortcut editor](https://code.visualstudio.com/docs/getstarted/keybindings) to add your custom key combination.


## Credits

- Cover image is by Drew Beamer. Check out his work [here](https://unsplash.com/photos/5DD7-L4A4Uw).

---
This is an effort to learn how to get the best out of Vs Code keyboard shortcuts without feeling overwhelmed.

Learning how to use our favourite IDE without a mouse can make a big difference.
Since an extension like the amazing [Key Promoter for Jetbrains](https://plugins.jetbrains.com/plugin/4455-key-promoter) seems to be [far from being a reality for now at least](https://github.com/Microsoft/vscode/issues/26729), I started collecting my favourite keyboard tricks in bite sized chunks.

The idea is simple: find one tip you like, practice it the whole week until you've really mastered it and made it part of your workflow and then move to the next one. Follow me and improve together!

---

_Originally published on [my blog](https://nobitagit.github.io/blog/vscode-tip-split-panes/)_.
What is faster then a FOR..Loop in JS?
Tags: beginners, javascript
Published: 2019-08-01 09:21:33

Hello everyone, I hope you are doing good!

I am not sure if this is the right way to ask a question in here? Forgive me in that case. I just joined the community. But I hope somebody can help me by pointing me in the right direction?

I am sitting at the moment in a coffee bar in The Hague (The Netherlands), not be confused with a coffee shop! ;) I am getting frustrated about a seemingly easy Javascript Kata...grrrr! So maybe a coffee shop would be a good idea at this point :)


**The Kata instruction:**
*Given a number n, return the number of positive odd numbers below n.*
*Expect Large Inputs!*

My first solution was to loop using a simple For..Loop from 0 to n-1:

for (let i=0;i<n;i++){if (i % 2 != 0) count++} 
 
**Codewars** returned the error 
*Execution Timed Out (12000 ms)*

So I thought to make the loop a bit smarter and not loop through all the numbers but only looping through the odd numbers like this:

 for (let i=1;i<n;i+=2){if (i % 2 != 0) count++}

But this is still not fast enough for Codewars. 
Googling didn't help me find an answer. So I am hoping somebody here knows what I am overlooking? Or is this a Codewars glitch? I tried several times on different days.

Thanks in advance! 
Happy coding!

Heriberto
How to get the "name" of a Component when looping through Components
Tags: vue, vscode, javascript, webdev
Published: 2019-08-01 08:15:14


#####Hi Good afternoon Guys :smile:.


Basically, I had a problem today getting the __name__ of a component so I can use that __name__ as a dynamic prop __title__ in a __span__ tag. So when I hover on that span I can see the __name__ of that component.


A Sample SVG component.
![SVG Comp](https://thepracticaldev.s3.amazonaws.com/i/j2kudskjkx10k1f0ldcm.png)


The __Project.vue__ file.
![Project.vue](https://thepracticaldev.s3.amazonaws.com/i/hjbgd12wk4wfeb8x8xdn.png)




The __CardProject.vue__ file.
![CardProject.vue]
(https://thepracticaldev.s3.amazonaws.com/i/3vaboz5qux6mnbn4zw2h.png)

I wanna have a __span__ tag above the __component__ tag with a __title__ property.

Maybe we can change our __projectTechs__ array to look like this.
![Yuck](https://thepracticaldev.s3.amazonaws.com/i/wr41h99dbbqo4vmeklf7.png)

Using this would change our code in the __v-for__ directive code and it adds a lot of code and it makes our code ugly. I didn't use this approach. So I tried googling the solution for this and I found to get the __name__ of the component you have to use this __this.$options.name__. I tried using it.

![dumb move](https://thepracticaldev.s3.amazonaws.com/i/34fxkn1gwa2rxdvzrjci.png)


And it threw an error.
```JavaScript
  vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'name' of undefined
```

What does this mean is that there is no __$options__ property in the __tech__ object. 


So I tried logging the __technologies__ array in the console.
And I found out there is a  __name__ property in each of the components in the array that you can access directly.

Now my __CardProject.vue__ file looks like this.
![Updated CardProject](https://thepracticaldev.s3.amazonaws.com/i/ijuiw20zx44g2bj0tmer.png)


#### Thanks for reading this post.

### Have a Nice Day Everyone :smiley:.
Task 1: Install Ubuntu on Windows laptop
Tags: ubuntu
Published: 2019-08-01 07:54:47


First, I searched about the pros and cons of dual-boot and virtual machine method of using more than one operating system on the same machine. I chose to use a virtual machine( VMWare Workstation 15 player) because my Laptop has enough RAM to run a guest OS via virtualisation on a host OS. Secondly, dual boot procedure is more complex and I cannot use both OS at the same time which is possible using the virtual machine method.

Second, I installed VMWare Workstation 15 player which is a free version of VMWare for academic and non-commercial use.

Then I downloaded .iso file of Ubuntu 19.04

Opened VMware player and clicked on the Create a Virtual Machine and chose the .iso file of Ubuntu when prompted

VMware has a feature called Easy Install to quickly install the operating system if it recognizes the OS to be installed and since it recognizes Ubuntu there is not much to do i.e VMware will take care of the configurations.

VMware Player will try to choose the best settings on its own, so I left the default settings unchanged except the Disk space which by default was set to 20 GB and I changed it to 22GB.

Memory size allocated to the virtual machine is 2GB by default by VMware and I chose to keep it unchanged as 2 GB should be enough for Ubuntu leaving 6 GB for host OS(Windows) 

Click on the link below for the next post in this series:
https://dev.to/mechatrona/task-2-install-the-sublime-text-3-netcore-2-x-git-in-ubuntu-27i9

Click on the link below for the previous post in this series:
https://dev.to/mechatrona/my-journey-of-learning-software-development-4imb
Task 2: Install the sublime text 3,.netcore 2.x, git in Ubuntu
Tags: git, sublimetext, netcore
Published: 2019-08-01 07:48:34

I followed the links below to install the softwares/modules:

1. sublime text 3: http://tipsonubuntu.com/2017/05/30/install-sublime-text-3-ubuntu-16-04-official-way/
There were some modifications required in the commands in step 1, which were basically changing the path of the file as per its location saved in my system.

2. netcore 2.x:  https://dotnet.microsoft.com/download/linux-package-manager/ubuntu18-10/sdk-current
While installing .netcore2.x I encountered an issue. So when I follow the steps from the link I shared, I get an error(Unable to locate package dotnet-sdk-2.2) on the last step.
To solve this problem I manually downloaded and installed the binaries following the steps on this link:https://dotnet.microsoft.com/download/thank-you/dotnet-sdk-2.2.203-linux-x64-binaries
And in step 2, to verify the installation I cannot use command  dotnet, instead I have to use dotnet-sdk.dotnet because when .NET Core is installed using the Snap package, the default .NET Core command is,dotnet-sdk.dotnet as opposed to just dotnet. And to install snap I also configured snap first

3. git (just the command line, no desktop/UI) https://www.digitalocean.com/community/tutorials/how-to-install-git-on-ubuntu-18-04-quickstart


Click on the link below for the next post in this series:
https://dev.to/mechatrona/task-3-hello-world-in-c-using-the-command-line-in-linux-2011


Click on the link below for the previous post in this series:
https://dev.to/mechatrona/task-1-install-ubuntu-on-windows-laptop-2p8
Blockchain Development Company
Tags: blockchaindevelopmentcompany
Published: 2019-08-01 07:27:27

Oodles Blockchian is a trusted blockchain development company offering a wide range of end-to-end solutions for startups and businesses.

We specialize in high-performance and scalable services such as:
- Cryptocurrency Wallets and Exchange Development;
- Private and Public Blockchain Development; 
- dApp Development; 
- Blockchain Business Analysis; 
- Proof of Concept Development; 
- ICO Development and Audit; 
- Blockchain app Development; 
- Smart Contract Development.

Contact Us To Find Perfect
Blockchain Technology Solutions For Your Business https://blockchain.oodles.io
📦 Generates inverted (opposite) version of the given color
Tags: replit, python, functorflow
Published: 2019-08-01 07:13:04

---
title: 📦 Generates inverted (opposite) version of the given color
published: true
tags: replit, python, functorflow
---

```python
from functorflow import f

print(f('invert-color', '#000')) 
#ffffff

print(f('invert-color', '#282b35'))
# '#d7d4ca'

# input color as RGB array or object

print(f('invert-color', [69, 191, 189]))
# '#ba4042'

print(f('invert-color', { 'r': 249, 'g': 119, 'b': 121 })) 
# '#068886'


# amplify to black or white
print(f('invert-color', '#282b35', bw=True))
# '#ffffff'


# amplify to custom black or white color
print(f('invert-color', '#282b35', bw={ 'black': '#3a3a3a', 'white': '#fafafa' }))     # —> #fafafa
 
# amplify with custom luminance threshold (default is invert.defaultThreshold = ~0.179)
print(f('invert-color', '#282b35', bw={ 'black': '#3a3a3a', 'white': '#fafafa', 'threshold': 0.01 }))     
# #3a3a3a
```

{% replit @functorflow/invert-color %}
Request for feedback: Material Desing for Bootstrap 4.8.7
Tags: showdev, webdev, javascript
Published: 2019-08-01 07:11:01

Hello, our startup - MDB, which stands for Material Desing Bootstrap - is launching a big update for Open Source project and we would like to receive feedback from this community. You can also contribute via github.

You can find our project here: https://bit.ly/2yv88QE
issue while calling api from node js
Tags: react, javascript
Published: 2019-08-01 06:54:08

Access to fetch at 'http://localhost:8077/v1/TADATravelSetting/GetTravelLocations' from origin 'http://172.18.11.6:8001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
J(ump) in 8th - from the repository
Tags: forth, eighth, programming
Published: 2019-08-01 06:31:55

Following [darkain](https://dev.to/darkain/comment/d8o3)'s lead, I've started putting all my old coding projects up on Github.

The first is [j](https://github.com/axtens/j) which is 

> a command-line navigation tool wrapping the functionality of PUSHD and POPD, adding shortcuts and optional commands to run once the change of directory has been achieved.

It's a purely Windows CMD tool written in a Forth-family language called [8th](https://8th-dev.com/)

For those interested in other languages

> 8th™ is a secure, cross-platform, efficient, cost-effective, robust, and fun concatenative programming language for mobile, desktop, server, and embedded application development.

8th does Android, iOS, Windows, Mac, Linux and Raspberry Pi!
Debugging with GIFs!
Tags: debugging, svg, gif, animation
Published: 2019-08-01 06:13:04

---
title: Debugging with GIFs!
published: true
description: Debug your programs using graphics and animations
tags: Debugging, SVG, GIF, Animation
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6u6t9w14xjec7xhym8qn.jpg
---

Have you ever wished you could see a video or animation of your program running? Either to help debug an issue or to explain how it works?

There is an easy way to do this - it's a bit of a hack - but it works well and is easy to setup.

All you need to do is generate an SVG file for each animation frame and then stitch them together into an single playable file. 

## Generating the graphics

For each state you want to visualize, write a serially named `.svg` file with padded zeros. For example: `frames/00001.svg`, `frames/00002.svg` ... etc.

Here's an example that generates a line series. It is written in Elixir, but this technique works with any language.

```elixir
defmodule SVG do 
  def export(frame_index, data) do
    # filename is padded with zeros
    filename = frame_index |> to_string |> String.pad_leading(5, "0")
    path = "frames/#{filename}.svg"
    
    data = """
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 200 200">

      #{points(data)}

    </svg>
    """

    # write to disk
    File.write(path, data)
  end

  # outputs a list of points
  defp points(data) do
    data |> Enum.map(&point/1) |> Enum.join("\n")    
  end

  # outputs a circle for each point
  defp point({x, y}) do
    ~s|<circle cx="#{x}" cy="#{y}" r="1" fill="blue"/>| 
  end
end
```

Now you can call `SVG.export()` from the code you want to diagnose, just supply a `frame_index` and `series` of points: 

```elixir
frame_index = 1
series = [{0, 1}, {1, 10}]

# writes SVG to "frames/00001.svg"
SVG.export(frame_index, series)
```

## Stitching the graphics together

Now that you have bunch of frames, let's turn them into an animation.

### GIF format

To generate a `.gif`, simply use `convert`:

```bash
convert -delay 2 -loop 0 frames/*.svg animated.gif
```

### Video format

For `.mp4` and other video formats, use the indispensable `ffmpeg` utility.

**Note** that `ffmpeg` doesn't understand `.svg` files, so you'll need to convert them to `.png` first:

```bash
mogrify -format png frames/*.svg
ffmpeg -r 10 -i frames/%05d.png -pix_fmt yuv420p video.mp4
```

## Summary

Generate animations and video from any data is easy. It's a useful technique for debugging programs or helping others visualize your programs at work.

All you need are `.svg` files and the utilities `convert` & `ffmpeg`.

**Happy visualizing!** 

You can find a fully working example here: https://gist.github.com/joshnuss/353abbd564167e69eecdadd9d590f9e6
What Is NodeJS? And How It Helps For Perfect Back-End Development?

Tags: node
Published: 2019-08-01 05:00:56

Node.js is used as one of the significant platforms for developing various types of applications. Node js is perfect back end development because of it easy to develop a web site with the help of node js. why use node js because it is open source, flexible, low cost and easy to use.

For More Details:- https://bit.ly/2PuqFDP
Applying the callee's name aka self-referential functions
Tags: todayilearned, javascript, programming, functional
Published: 2019-08-01 03:30:35

Apparently there are some things that one may do with the `arguments` vector that are frowned up. This may be about one of those things.

One can find out the name of the function that one is in at runtime. 
```javascript
function calleeName(a) {
  return a.callee
    .toString()
    .split(" ")[1]
    .split("(")[0]
    .trim();
};
```
Pass in `arguments` as the parameter and receive the name of the function that one is calling from. Caveat: this only works with functions defined using `function` and not with `const`. Also, anonymous functions will return an empty string.

Example
```javascript
function Bruce() {
	console.log(calleeName(arguments));
}

Bruce();
```
This displays `Bruce` on the console.

Before we get to the most interesting thing, here is a support function which I use from time to time when generating small bits of HTML or XML (and which I need later in the demonstration), `tag()`.
```javascript
function tag(a, b, c) {
  return "undefined" === typeof c ? 
    "<" + a + ">" + (null === b ? "" : b.toString()) + "</" + a + ">" :
    "<" + a + " " + b.toString() + ">" + 
      (null === c ? "" : c.toString()) + "</" + a + ">";
}
```
Originally there was an `if` in there but after the Closure Compiler finished with it, it became a complex ternary `boolean ? true : false`. `a` gets the XML/HTML tagname. `b` is the data to wrap. However, if `c` is defined then it is assumed to be the data and `b` is assumed to be an attribute to put after the `a`.

Now we come to the focal point. Below we have some functions that are named after XML markup: `xml`, `staff` and `vehicle`. Instead of coding the name of the markup into the body of the function, we let `calleeName` retrieve it from the `arguments` vector and unshift it into a copy of arguments and then `.apply` that to the `tag` function.
```javascript
function xml() {
  var args = [].slice.call(arguments);
  args.unshift(calleeName(arguments));
  return tag.apply(this, args);
}

function staff() {
  var args = [].slice.call(arguments);
  args.unshift(calleeName(arguments));
  return tag.apply(this, args);
}

function vehicle() {
  var args = [].slice.call(arguments);
  args.unshift(calleeName(arguments));
  return tag.apply(this, args);
}
```
Notice that the body of each of these functions is exactly the same yet the output from each is different. `xml()` will output a `<xml></xml>` with data and optional attributes etc.

So that all gets used like this:
```javascript
var Staff = staff("id='BRUAXT' age='58' languages='English,Tok Pisin,Urdu'", "Bruce");
var Vehicle = vehicle("id='BRUAXT'", "bicycle");
var Xml = xml(Staff + Vehicle);
console.log(Xml);
```
which outputs
```
<xml><staff id='BRUAXT' age='58' languages='English,Tok Pisin,Urdu'>Bruce</staff><vehicle id='BRUAXT'>bicycle</vehicle></xml>
```
While I don't have a use for that right now, it is interesting and I can think of some possible applications. Maybe you can too.
Welcome to the Big Thread Club, Mohammadjavad Raadi. You are the latest winner of the Big Thread Badge. 🎉
Tags: meta, bigthreadbadge
Published: 2019-08-01 02:09:00

Mohammadjavad joins @room_js, @iam_timsmith, @fullstack_to, @espoir, @helenanders26, @philnash, @florinpop17 and @lauragift21 in the club as the fourth winner of this badge.

{% user mjraadi %}

The Big Thread Badge is awarded to the person who creates a discussion thread on the site that sparks the most collective comment love (e.g. score as determined by total ❤️ reactions and adjacent ranking factors).

This was Mohammadjavad's thread:

{% link https://dev.to/mjraadi/if-you-don-t-know-now-you-know-github-is-restricting-access-for-users-from-iran-and-a-few-other-embargoed-countries-5ga9 %}

Entry is simple: Start a thread that is bound to spark a lot of comments. Ask the community to tell a certain kind of story and get lots of comments! Even if these threads aren't always answering _the deep questions_, they are often great for seeing what the broader community thinks of a topic and are usually a lot of fun!

Use the #discuss tag to signal that the post is a discussion thread.

{% tag discuss %}

_DEV employees are not eligible for the Big Thread Badge. 🙂_

## **The Big Thread Oplympics**

This marks 9/9 winners that have gone to folks from a different country. It highlights the global diversity of our community of folks helping one another out. How long will the streak continue? Europe now leads with three winners, followed by Oceania, Europe and Africa two each, with one from North America and one from Asia.

## **Happy Coding!**