teleren/devto huggingface dataset:
Scalable Vector Graphics: Drawing Basics
Tags: tutorial, css, programming, html
Published: 2020-11-30 10:09:14

If you’re completely new to SVGs, it may help to read the following articles first:

* Scalable Vector Graphics: an Overview
* 7 Reasons to Consider SVGs Instead of Canvas

#SVG Co-ordinate Grid
An SVG is defined in whatever coordinate space you give it. That space does not necessarily correlate with pixels, centimeters, inches, or other absolute units, because an SVG can be scaled to any dimension.

The SVG’s viewBox attribute determines the co-ordinates the image uses. The following SVGs would look identical when scaled to the same size:

a `viewBox` of `0,0` to `200,100` with a line from `0,0` to `100,50`
a `viewBox` of `0,0` to `300,150` with a line from `0,0` to `150,75`
a `viewBox` of `0,0` to `30,15` with a line from `0,0` to `15,7.5` (fractions of a unit are permitted)

#SVG XML Document
An SVG image is an XML document that follows strict conventions (closing tags, quoted attributes, etc). When SVGs were first developed in 1999, files required an XML declaration and DOCTYPE at the top of the document above the root `<svg>` element:
```
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="https://www.w3.org/2000/svg">

  <!-- image data -->

</svg>
```
You may still encounter this format, but it’s more usual for .svg files to use a single root element:
```
<svg xmlns="https://www.w3.org/2000/svg">

  <!-- image data -->

</svg>
```
Also visit: <a href="https://cheapandbesthosting.com/">Best Web Hosting Review Site</a>

#Grouping Elements
Any set of elements (lines, circles, rectangles, text, etc.) can be grouped using `<g>...</g>` tags. In essence, it’s similar to grouping drawing objects in a graphics package so they can be manipulated as a single item.

For example, you could define a root group node so the whole image can be manipulated via JavaScript or CSS:
```
<g id="main">
  <!-- drawing elements to go here -->
</g>
```
A single group can have any number of inner groups with nesting as necessary.

#Lines
A single line between two points is drawn using the line element:
```
<line x1="10" y1="10" x2="100" y2="200"
stroke="#999" stroke-width="5" stroke-linecap="round" />
```
#Polylines
Polylines define a set of connected straight line segments:
```
<polyline points="580,10 560,390 540,200 520,390 400,390"
stroke="#c00" stroke-width="5" stroke-linecap="round"
stroke-linejoin="round" fill="none" />
```

`Read more on SitePoint`

**Thanks**
Micro Frontends – Revolutionizing Front-end Development with Microservices
Tags: microservices, architecture, software, webapplication
Published: 2020-11-30 09:28:44

Today, it is possible to develop apps with 90% front-end code and it won’t be a stretch to say that a majority of web apps are being built with that approach. This brings us to a much-debated topic in the development world – Micro Frontends.

Micro Frontend means approaching front-end development process of web apps with the concept and idea of microservices.

Read More: https://www.cuelogic.com/blog/micro-frontends-part1
Free Workshop on SQL Serverless
Tags: database, news, beginners, tutorial
Published: 2020-11-30 09:22:57


# Free SQL Serverless Workshop

On Dec 7th, I'll be hosting an hour workshop teaching you how to analyze NYC Taxi data with Serverless SQL.

[Check out the event here.](https://aka.ms/createdata)

![](https://media.giphy.com/media/l46Cy1rHbQ92uuLXa/giphy.gif)

You'll learn:

## Tools:
You will learn the technical tools:

* Set up your workspace
* What is serverless SQL
* What is inferring schema automatically and how to do it
* Time series analytics
* Seasonality analytics
* Outlier analytics
* Exploratory data analysis


## Analytics:
From NYC Taxi you will learn how to :
In particular, you analyze the New York City (NYC) Taxi dataset that includes:

 - Pickup and drop-off dates and times.
 - Pick up and drop-off locations.
 - Trip distances.
 - Itemized fares.
 - Rate types.
 - Payment types.
 - Driver-reported passenger counts.


-------

There's no catch. It's completely free. Just register [here](https://aka.ms/createdata) and mark your calendar for the upcoming Create: Data event and show up.
Stalk datastruct smartcontract deployed on XinFin Network.
Tags: blockchain, xinfin, xdc, database
Published: 2020-11-30 09:22:56

Lots of #smartcontracts available around but datastructure has special importance as it is used widely. Today I have deployed a stalk datastructure #smartcontract on XinFin #XDC Network under injected web3 environment. 

Check my code: 
`pragma solidity ^0.4.11;
contract Stack {
    event Popped(bytes32 top, uint number, string name);
    event Pushed(bytes32 top, uint number, string name);
    uint public height = 0;
    bytes32 public top;
    struct Object {
        bytes32 next;
        uint number;
        string name;
    }
    mapping(bytes32 => Object) public objects;
    function Stack() public {
    }
    function push(uint _number,string _name) public returns (bool) {
        Object memory newObj = Object(top, _number, _name);
        bytes32 id = keccak256(newObj.number, newObj.name, now, height);
        objects[id] = newObj;
        top = id;
        height = height + 1;
        Pushed(top, newObj.number, newObj.name);
    }
    function pop() public returns (bool) {
        require(height > 0);
        bytes32 _top = top;
        top = objects[top].next;
        Popped(top, objects[_top].number, objects[_top].name);
        delete objects[_top];
    }
}`
Learn from Data Breach
Tags: security, privacy, news
Published: 2020-11-30 09:11:35

October and November were pretty scary in terms of Data breaches. 😨👇🏼

In this video I am coming back on a lot of these breaches that have occurred in recent weeks. 👨🏼‍🏫

Full of interesting things, as usual, to help us understand the path followed by hackers to breach a system and thus see where it is interesting to put effort to improve the security of our system. 🛡

Basically, Password Manager, unique password for each site, long and complicated password for each site and make backups of your data. 👌🏼
So this way, you can avoid dictionnary and brute force attacks against the leaked passwords. 👍🏼

{% youtube IEN3Nv7WIZ8 %}
<figure>
  <figcaption>Video with French Audio & English Subtitles</figcaption>
</figure>

---

Links to the description of the Data Breaches :
Capcom : https://www.bleepingcomputer.com/news/security/capcom-confirms-data-breach-after-gamers-data-stolen-in-cyberattack/
Sopra Steria : https://www.clubic.com/antivirus-securite-informatique/interview-18496-sopra-steria-serieusement-touche-par-le-ransomware-ryuk-ce-qu-en-pensent-les-experts-cyber.html
GoDaddy : https://www.nextinpact.com/lebrief/44788/des-employes-godaddy-utilises-pour-attaquer-services-cryptomonnaies
MixCloud : https://www.zdnet.com/article/data-of-21-million-mixcloud-users-put-up-for-sale-on-the-dark-web/
BlackBaud : https://www.bbc.com/news/technology-54370568
London Neighborhoud Attack : https://www.zdnet.fr/actualites/un-quartier-de-londres-frappe-par-une-importante-cyberattaque-39911313.htm
Github : https://www.nextinpact.com/lebrief/44519/du-code-source-github-enterprise-server-fuite-sur-github-suite-a-erreur-github

The article that explains how to sign your commit with GPG : 
https://dev.to/shostarsson/how-to-use-pgp-to-sign-your-commits-on-github-gitlab-bitbucket-3dae

The Zerologon vulnerability :
https://www.trendmicro.com/en_us/research/20/i/zerologon-and-value-of-virtual-patching.html

---

*If you like this content, push the like button, that helps spread the message. 👍🏼
If you think it can be useful to anyone in your network, share it. 📨*

---

Video produced by [Wild & Secure](https://wildnsecure.com), your consulting firm to all things security and real estate.
If you want to receive weekly quality content about security, subscribe to our newsletter [on our website](https://wildnsecure.com/contact).
Where do you promote your products/apps?
Tags: watercooler, promotion
Published: 2020-11-30 09:03:32

---
title: Where do you promote your products/apps?
published: true
description: 
tags: watercooler, promotion
cover_image: https://www.paldesk.com/wp-content/uploads/2020/03/9-tips-on-promoting-your-business-online.png
---
When you have put a lot of time and effort into developing your app, the last thing you want to do is thrown it all away by not promoting it properly. As Gary Vaynerchuk has said:

> “What you do after you create your content is what truly counts.”

Where do you normally promote your apps and which methods have turned out to be the most effective for you? 

Some of the first ones that come to my mind would be: [ProductHunt](https://www.producthunt.com/), [Twitter](https://www.twitter.com/), [Reddit](https://www.reddit.com/), [Facebook](https://www.facebook.com/), [DEV listings](https://www.dev.to/listings), blog posts, email lists, etc.
Do you prefer callbacks, promises, or async/await?
Tags: discuss, javascript, async
Published: 2020-11-30 09:01:39

---
title: Do you prefer callbacks, promises, or async/await?
published: true
description: 
tags: discuss, javascript, async
cover_image: https://miro.medium.com/max/2446/1*puSX3unG2gP-x_iHiGeXEg.png
---
There are multiple approaches for handling asynchronous operations in Javascript. Some of the most common ways include Callback functions, Promises, and Async/Await.

Which one do you prefer to use and why?
Versioning APIs In Anypoint Platform
Published: 2020-11-30 09:00:50

Artifices for API versions on Anypoint Platform: 

Follow a split plan on versioning APIs:

Make sure to make all changes to APIs backwards-compatible.
However, believe that contrary modifications will be required at any point and forward version of your APIs from the start.
An API versioning approach is evident everywhere in the application network and should therefore be standardized by the C4E.

On Anypoint Platform the version of an API is noticeable in these places:

The URL of the API endpoint
The RAML representation of the API: version and baseUri
The Anypoint Exchange entry (asset) for the API: "API version", "Asset version", "API instances".
The Anypoint API Manager listing for an API instance: "API version", "Asset version", "Implementation URL" and "Customer endpoint".
Perception connotative versioning of APIs on Anypoint Platform: 

Use semantic versioning with major, minor, and patch version numbers for APIs:

Major.minor.patch:

Major versions include backward-incompatible changes in the structure of the API that require API clients to adapt.
Minor versions introduce backward-compatible changes to the API that do not require API clients to improve unless the API client aspires to take the assistance of the newly introduced changes.
Patch versions introduce small fully backward-compatible fixes, so as documentation corrections.
If semiotic versioning is accompanied, then version 1.2.3 of an API is an entire stand-in for variant 1.1.5, and so all API clients that have previously used version 1.1.5 can be made to use version 1.2.3 instead, without having to be created aware of the development. For this speculation, typically, only the significant version of an API is made visible to API consumers.

This means that only the major version of the API should be visible in

The URL of the API endpoint.
The RAML representation of the API in both versions and baseUri.
The Anypoint Exchange record (asset) for the API in "API version".
The Anypoint API Manager entry for an API instance in "API version", "Implementation URL" and "User endpoint".
By contrast, the full connotative version is noticeable in

    • The Anypoint Exchange record (asset) for the API in "Asset version" and "API instances".

    • The Anypoint API Manager listing for an API instance in "Asset version".

Here is because

   • the Anypoint Exchange entry of type "REST API" also saves the RAML description itself. 

   • the Anypoint API Manager entry for an API situation may depend on that API specification for the representation of API policies that apply only to selected federations of API resources and HTTP methods.
What is your 🤯 or 💡 moment?
Tags: discuss, bestpractice, development, knowledge
Published: 2020-11-30 09:00:45

I had been creating 'mobile first' websites for years, but in reality I was making websites that were responsive. A subtle difference, but it was an important shift I had to make in my mentality towards it. Rather than building for mobile first, I was adapting desktop layout to work on mobile. When I think about why that would be, I think it's because my intro to media queries always used `max-width` in examples.

A few years ago, I worked with a front-end specialist who showed me that he used `min-width` instead! 🤯

When you're getting the job done, sometimes it’s not obvious that there’s another way to approach the problem.

Another example for a scenario where something just clicked is when I found a use for CSS variables to greatly reduce the amount of CSS I was writing:

{% link https://dev.to/cchana/using-css-variables-to-create-a-dark-mode-for-your-site-ja1 %}

Have you had a moment when the lightbulb has turned on all of a sudden or your mind has genuinely been blown?
Go development with VSCode and vim
Tags: opensource
Published: 2020-11-15 02:46:35

## Gofmt
Go takes a strong stance on code formatting. The gofmt tool rewrites code into the standard format.

```
gofmt filenames
```

## Golint

Linter is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.
Using Linter provides many benefits.
- Find bugs
- Speed up code review
- Manage code quality


```	
go get -u golang.org/x/lint/golint
golint filenames
```

## VSCode setup

Install the Go extension maintained by Go Team at Google(previously maintained by Microsoft).

You should immediately see a prompt in the bottom-right corner of your screen titled Analysis Tools Missing. This extension relies on a suite of command-line tools, which must be installed separately. Accept the prompt, or use the Go: Install/Update Tools command.

Also, see the tutorial [https://code.visualstudio.com/docs/languages/go](https://code.visualstudio.com/docs/languages/go)

## vim setup

Install the vim-go plugin 
`Plug 'fatih/vim-go', { 'do': ':GoUpdateBinaries' }`

The official toturial [https://github.com/fatih/vim-go/wiki](https://github.com/fatih/vim-go/wiki)

Here are some settings from my vimrc file
```bash
augroup go
  autocmd!

  autocmd FileType go nmap <silent> <Leader>v <Plug>(go-def-vertical)
  autocmd FileType go nmap <silent> <Leader>s <Plug>(go-def-split)
  autocmd FileType go nmap <silent> <Leader>d <Plug>(go-def-tab)

  autocmd FileType go nmap <silent> <Leader>x <Plug>(go-doc-vertical)

  autocmd FileType go nmap <silent> <Leader>i <Plug>(go-info)
  autocmd FileType go nmap <silent> <Leader>l <Plug>(go-metalinter)

  autocmd FileType go nmap <silent> <leader>b :<C-u>call <SID>build_go_files()<CR>
  autocmd FileType go nmap <silent> <leader>t  <Plug>(go-test)
  autocmd FileType go nmap <silent> <leader>r  <Plug>(go-run)
  autocmd FileType go nmap <silent> <leader>e  <Plug>(go-install)

  autocmd FileType go nmap <silent> <Leader>c <Plug>(go-coverage-toggle)


  autocmd Filetype go command! -bang A call go#alternate#Switch(<bang>0, 'edit')
  autocmd Filetype go command! -bang AV call go#alternate#Switch(<bang>0, 'vsplit')
  autocmd Filetype go command! -bang AS call go#alternate#Switch(<bang>0, 'split')
  autocmd Filetype go command! -bang AT call go#alternate#Switch(<bang>0, 'tabe')
augroup END
```
What junk-cleaner utilities do you use?
Tags: watercooler, software
Published: 2020-11-30 08:53:24

---
title: What junk-cleaner utilities do you use?
published: true
description: 
tags: watercooler, software
cover_image: https://i0.wp.com/www.prowell-tech.com/wp-content/uploads/2020/08/5-Best-PC-Cleaner-Software-For-Windows-10-2020.jpg?fit=1200%2C675&ssl=1
---
I used to run [CCleaner](https://www.ccleaner.com/) for this, tho nowadays it has become pretty bloated and I don't even know if the free version is worth keeping around.

What solutions do you use to clean out the 'junk', that accumulates over time: temporary files, broken shortcuts, etc?
General relativity vs complex analysis
Tags: watercooler
Published: 2020-11-30 08:47:08

There are two distinct categories of scientific discoveries and inventions: facts and methods.

The great thing about "fact" discoveries is that they are often easy to give a one-line, catchy summary.

If someone asks what's the big discovery of the general relativity, you can say "it's that massive bodies bend the spacetime around them". It will be a correcty, even if simplistic explanation. The best thing is that it can even be confirmed visually, with pictures of stars during a total solar eclipse and spectacular effects of [gravitational lensing](https://en.wikipedia.org/wiki/Gravitational_lens).

There's another class of discoveries that can be described as "methods". Complex analysis is a great example.

High school students are sometimes taught complex numbers. Or rather a set of meaningless rules for manipulating imaginary numbers. Let's pretend there's a number _i_ such that _i^2 = -1_. Very funny game, isn't it?

The real big idea of complex analysis sounds vague and ambiguous to the uninitiated: you can discover properties of real functions by studying their complex-valued versions.

You can classify singularities using a [complex-valued equivalent of Taylor series](https://en.wikipedia.org/wiki/Laurent_series), calculate contour integrals using [just one point](https://en.wikipedia.org/wiki/Residue_(complex_analysis)) and find the [factorial of `-3/2`](https://en.wikipedia.org/wiki/Gamma_function).

It also takes a few months of study to understand the power of complex analysis.

What does it have to do with programming? Technically, in computer science and software engineering, every discovery is a "method".

However, some discoveries are much closer to facts. For example, the [Dijkstra's algorithm](https://en.wikipedia.org/wiki/Dijkstra%27s_algorithm) is a fact: there's a quick way to find shortest paths in a graph. You can even make an animated demonstration.

Many programming techniques, however, are exactly methods—not unlike complex analysis or group theory. Higher order functions, dependent types, formal verification and so on: they are useful and important, but don't allow for catchy and correct descriptions.

Even relatively simple concepts like the World Wide Web can fall into this category. I'm pretty sure in 1990, a description like "it allows everyone to publish documents online and link to any other document" prompted a lot of "so what?" reactions.
You have to see the Web in its advanced state to realize that it enables completely different usage patterns than any closed hypertext environment.

Thus, if you see a description that seems vague, it may not be a communication failure. Maybe its very nature makes a consice description impossible.

How to tell if it's the case, or if a proposed method is any good (or if it even works) is another question.
The Front End: S2-E9 - Rob Kendal Q&A
Tags: podcast, frontend, career
Published: 2020-11-30 08:33:30

🚨 NEW EPISODE ALERT 🚨

For the penultimate episode (9) of season 2, I'm hosting a special 1-2-1 show where I answer some of your burning questions on front end development, careers, and more.

Listen to the brand new episode here:

- Apple Podcasts > https://podcasts.apple.com/gb/podcast/the-front-end/id1499349107
- Pocket casts > https://pca.st/osul2zsa
- Spotify > https://open.spotify.com/show/4GuAxptrtY8Es5iHwp09dT
- Anchor > https://anchor.fm/the-front-end

## In this episode

I'm Rob, a freelance front end developer, Shopify Partner, and lover of WordPress, the Jamstack, and helping people learn to code. 

I'm going to answer burning developer questions such as:

- Should I learn React or Vue?
- How long before I start looking for a job?
- How do I start blogging and creating content?
- How can I get into freelancing?
- ...and many more!

## Listening direct

Want to listen directly from here?

{% spotify spotify:episode:7pPFw49ukXjY18mDElc8Vt %}

## Want to be a guest or sponsor the show?

We're always happy to take requests for guests to talk about a range of different development topics from careers to origin stories, learning and professional growth, frameworks and more.

Similarly, we're looking for sponsors to fill promotional slots within the show. 

You can find out more here:

- [Being a guest](https://thefrontendpodcast.site/guests)
- [Sponsorship information](https://thefrontendpodcast.site/sponsorship)

Thanks for listening!
An open-source Swift animated Tab Bar
Tags: github, swift, ios
Published: 2020-11-30 08:26:26

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vhgorkpircpj8b1btyzb.jpg)

Hello everyone,

I've just released my first iOS open source project based on Swift.

https://github.com/Pizzo15/LPLiquidSwiftTabBar

It is an **animated Tab Bar** to which you can add up to 5 View Controllers.

The **goal** of this library is to give developers an elegant and easy customizable component to use in their applications.

I was looking for feedbacks since I'm new to open source and the project is still in its initial phase.

Any suggestions and/or constructive critics are well accepted!🙂
Interview JS Part 4 - DOM and Layout Trees
Tags: javascript
Published: 2020-11-30 08:20:51

### What is the DOM?

At the most basic level, a website consists of an HTML document. The browser that you use to view the website is a program that interprets HTML and CSS and renders the style, content, and structure into the page that you see.

In addition to parsing the style and structure of the HTML and CSS, the browser creates a representation of the document known as the Document Object Model. This model allows JavaScript to access the text content and elements of the website document as objects.

Let's see an example:-

```
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>

</html>
```

The above is the simple HTML code, and also you might be knowing that almost all the webpages have their structure defined in HTML. Now just inspect the element on this page and see the elements tab on the right-hand side of the browser. Whenever you hover over some line you can see some effect on the webpage depicting the element you are hovering at.

![](https://assets.digitalocean.com/articles/eng_javascript/dom/the-dom.png)

You might also see the arrows in the HTML page on the elements tab. The HTML follows the parent-child relationship between the elements.

![](https://cdn-media-1.freecodecamp.org/images/3n6SPcMH0mmG6cFeB3SJBEA-9Yyfgp3xYZ7u)

### The Document Object

A document object is a built-in object that has many properties and methods that we can use to access and modify websites.

These include:- 

1. getElementById()
2. getElementsByClassName()
3. getElementsByTagName()
4. querySelector()
5. querySelectorAll()
6. Events
7. clicks
8. select

Some inbuild methods to traverse the DOM include:-

1. .firstChild
2. .nodeName
3. .nodeValue
4. .nodeType

The Elements include:-

1. .parentNode
2. .firstElementChild
3. .lastElementChild

In the next article, I will brief each and every DOM method from elements to manipulating the DOM.

In the above example where we wrote the HTML code. Just go to the console and type in 

`document.body.style.backgroundColor = 'fuchsia';`

And you can see the background color to be fuchsia. This is one of the examples of DOM manipulations

**Stay Tuned for the next article**