teleren/devto huggingface dataset:
Blog SEO. Be careful cross-posting on dev.to with new domains
Tags: devto, blogging, hashnode, healthydebate
Published: 2021-03-18 15:47:55

Recently I decided to create a blog on my own domain. I am neither pro at SEO neither a confident blogger but did my research. I decided to go with Hashnode, while it is not lightning fast - it is compatible with your own domain (and I want to see more analytics and stuff, link to my own product), drives your traffic directly there and the devs are pretty active in discord.

It is well-known fact that SEO is impacted by several factors:
1. Keywords, search terms you target
2. Page optimizations, mobile-friendliness
3. Domain trust (backlinks, etc)
4. Page information uniqueness

And well, in case google crawler sees several pages, it decides to pick one of them the original - usually the oldest, but I guess the most trusted and mobile-friendly one.

Canonical links should resolve this issue, but it seems there are problems with dev.to implementation https://github.com/forem/forem/issues/9509.
In comments we see several people complaining, some telling that the solution was to post on dev.to after 2 weeks or so...
The devs are stating that everything is normal, canonical is deduced correctly.

But my experiment with Hashnode blog shows that either dev.to is so optimal and pleasant to google, that it is ignoring the canonical link. Or it treats devto page as different content.

There were fixes merged related to that issue. Hope this will be fixed soon and I can finally start cross-posting on this fastest and most responsive community.

I described this and other cases as well as my journey in my recent post [Dev Blog SEO. How to rank my blog? Should I cross-post?](https://dev.lifl.space/blog-seo-how-to-rank-my-blog-should-i-cross-post)

As of 24.03.2021 issues still persist. And I had to issue a removal after 2 weeks.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qu2bmpo0khlyhtwikscn.png)
Why I'm switching from C# to Python with Selenium
Tags: selenium, python, csharp, testing
Published: 2021-03-18 15:17:51

I was recently tasked with automating our product's new login wrapper. This involved hitting the server UI page, redirecting to a login page and validating if the login succeeds or fails. Another requirement was to have the ability to run the tests in Azure DevOps pipelines.

I'm typically not a UI automation guy, I usually focus on Rest APIs and code in C#. So I started with Selenium C#. While it was fairly easy to automate the login steps I was immediately blocked when I found out that I need to support host headers to run the tests in a Kubernetes (K8S) environment. [Well Selenium out of the box doesn't support host headers](https://github.com/SeleniumHQ/selenium/issues/7131)...

I stared searching for possible solutions and the best one I found by far was [Seleniumwire](https://pypi.org/project/selenium-wire/). Seleniumwire supports access to underlying requests/responses. You can modify them and get http response codes as well. I felt like I was back in my API testing world! The only difference was that Seleniumwire only supports PYTHON and not C#. But I had to have the Seleniumwire functionality even if my Python skills were somewhat noob-ish. 

Lets look how easy it is to set a host header with Seleniumwire
```
import pytest
from seleniumwire import webdriver

def test_isAlive(url, hostheader):
    web_driver = webdriver.Chrome()
    web_driver.maximize_window()
    # check to set host header    
    if hostheader != 'none':
            web_driver.header_overrides = {'Host' : hostheader}
    
    isAliveUrl = '/api/isAlive'
    UIEndpoint = url
    loginURL = UIEndpoint + isAliveUrl
    web_driver.get(loginURL)

 ```
Now the above isn't the whole script but you get the picture. This solved a huge issue that wasn't possible with Selenium C#. Note that I check for a host header value of "none" if I don't want to use a host header. 

Another cool Seleniumwire feature is to grab an http response code which I can then use in an assert to check that the page loaded. This can be an additional test to the builtin Selenium page load response check. 

```
# Access requests via the `requests` attribute
    for request in web_driver.requests:
        if request.response:
            print(
                request.url,
                request.response.status_code,
                request.headers                
            )    

    assert request.response.status_code == 200
```
These Seleniumwire features might seem minor but they are actually huge helps in UI Automation. Selenium should get off of it's high  "we need to act like a browser" horse and incorporate this library in all versions! Until they do I'm now a Python automation guy :)
Javascript: Data type and variables
Tags: variables, javascript, frontend, datatype
Published: 2021-03-18 14:51:20

Data types are concepts to be able to operate on variables.
JavaScript variables can hold Data types like Strings, numbers, arrays, and so on.


**Strings**
Strings are written in double quotes(" ") or single quotes(' ').
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tc6hdfmpbb333h99w5p3.png)

In the image below..you can use a double quote and single quote interchangeably or when using two double quotes or a single quote in a sentence, a backslash can be used in front.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oax3cfvgtok1y0iyr4us.png)

**Number**
For the number data type, It is either a negative or a positive number. It can also be a decimal number.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xezqqjhfn5hg1wo8kr3h.png)

**Booleans**
In boolean, It is either true or false, Yes or no, off or on.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk3zgqrmxf2p7awpuq4v.png)

**Arrays**
It is used to store a list of data. Arrays are written using square brackets [ ].
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2xc5dnct1mvg80zhbfi.png)
*An array can be written inside another array.**Arrays can be accessed by their index. Every array has an index that starts with 0.*

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


**Objects**
The object is a data type that allows the storage of collections of data. They are denoted using square brackets { }. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4hcwmgt97yjybomtz3b.png)

*To access the data of an object:* `ObjectName.keyName`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ad3t4ppwpndsw10di9kl.png)

**Undefined**
If a variable has been declared but has not been assigned a value, has the value undefined.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c2h50e85bdqngc5qk8b.png)
PWA empty fetch callback
Published: 2021-03-18 14:39:35

If you have the empty fetch call back in service worker, PWA will no longer be installable from august 2021.

You have to respond with custom response in fetch request, check if request is in cache then send file from cache else proceed with request
```
self.addEventListener('fetch', (evt) => {
  evt.respondWith(
    caches.match(evt.request).then((cacheRes) => {
      return cacheRes || fetch(evt.request)
    })
  )
})
```
Learn: Get To Know Before Integrating Google APIs & Services into Our Projects
Tags: learn, story, google, api
Published: 2021-03-18 14:12:09

Have you ever wonder how a Sign-In with Google button works? Or displaying a location using Google Maps? These can be done by integrating Google APIs & Services into our project.

In my personal experience, I was trying to show a Maps that integrated with EONET from [NASA Open APIs] (https://api.nasa.gov/). About this project, I store it on my GitHub [here](https://github.com/ilhambara/volcano-tracker-map). But I can't fully show the Maps cause there's a watermark "for development purposes only" that covers up the entire Maps.

Moving on to my next project recently when I'm about to use Google Sign-In API. Besides, showing static maps using Google Maps Javascript API based on geolocation. The sign-in process and display of the information are smooth. But the problem here, the static maps that used latitude and longitude by accessing the coordinates can't be shown.

Then I came up with a conclusion after _understanding the roadblocks_. It tells me that I should :
1. Activate my billing on [Google Cloud Platform](https://console.cloud.google.com/).
2. Make sure that APIs and Services are enabled.

The Importance of **setting up billing on Google Cloud Platform** is a must if we want to have full access to the services.

Friendly reminder: The bill costs. Do not forget.
An Introduction to React Portals
Tags: react, javascript, programming
Published: 2021-03-18 14:08:18

The first thing that comes to my mind when thinking about the word portals is teleporting. We are able to teleport outside our parent-child hierarchy and create a sibling element. Today I'll be talking about React Portals. Before actually explaining what a portal is, let me tell you what do portals solve.

###The Problem
Any basic react app has a `div` in the HTML file and a javascript file has the following code:

```js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));
```

ReactDOM converts the `App` component into HTML, CSS and Javascript and injects it into the selected element.

By default, most react apps have the following hierarchy:


![Screenshot 2021-03-18 at 16.46.59](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wwjsxi9gmner7l6ndmb.png)

We all embed our components into the `<App />` component. When we try to build a modal component, we want it to cover the whole page and nothing else should be clickable. In normal HTML pages, we would do something like this:

```HTML
<div class="content">
  <!-- button to open modal -->
  <button class="modal-activate">Open Modal</button>

  <!-- content of page goes here -->
</div>

<div class="modal hidden">
  <!-- Modal goes here -->
</div>
```

Through Javascript, we can do something like this:

```js
const modal = document.querySelector('.modal');
const modalActivateButton = document.querySelector('.modal-activate');

modal.classList.remove('.hidden');
```

We can add some CSS to set the `display` to `none` in the `hidden` class... you get the idea.


As you can see, we have to sibling `div`s, one for the modal and the other for the rest of the content. Now, let's see how to do the same in React.

###Portals
Portals basically allow us to add a component to a sibling `div` of the root `div`. First, we need to add another `div` in our `index.html` file.

```html
<div id="root"></div>
<div id="modal"></div>
```

Let's create a new component called `Modal`:

```js
import React from 'react';
import ReactDOM from 'react-dom';

export default function Modal({ title, content, actions, onDismiss }) {
	return ReactDOM.createPortal(
		<div>
                  // Content for modal goes here
                </div>,
		document.querySelector('#modal')
	);
}
```

Now we can add any buttons/content into the div.

That's it, we're done. A sibling `div` is created! That's all for now. I hoped you like this simple post, if you did please like it and follow me. Bye 👋
Benefits of Web Scraping Services
Tags: webdev, startup, database
Published: 2021-03-18 11:29:03

The primary purpose of web scraping tools is to extract information from different websites. They are likewise referred to as web extraction tools or web harvesting tools. These are beneficial for anybody who is trying to gather some sort of information from the web. Web scraping happens to be a new technique of entering data that does not need repetitive copy-pasting or typing. These applications search for new information either automatically or manually. For instance, one might accumulate information regarding products and their costs from Amazon by using a scraping tool. In this article, we will mention some essential information on the top 11 web / data scraping tools out there. But before that, we will see why we need to use these tools after all.

Benefits of using data scraping tools

Data scraping tools can be utilized for various purposes in different situations, some of which we have mentioned in the following paragraphs.

1. Gathering information for market research

Data scraping tools will allow you to be informed of exactly where your business or industry will head in the subsequent six months, thus serving as a robust tool for making market research . These tools can fetch information from several data analytics providers and market research companies and consolidate them into a single spot for easy analysis and reference.  

2. Extract contact information

Web scraping tools can likewise be utilized for extracting information like phone numbers and emails from different websites , which makes it feasible to have a list of manufacturers, suppliers, and other individuals of interest to your company, along with their individual contact information.  

3. Search for jobs or candidates

For employers who are actively searching for more candidates to get enrolled in their team or for jobseekers searching for a specific role or job vacancy, the web scripting tools can also prove to be extremely beneficial since they can fetch information effortlessly depending on various applied filters and Also retrieve information effectively without performing any manual searches.  

4. Track prices from more than one market

In case you are involved in online shopping and put like to track the costs of products actively across different online stores and markets , then a web scraping tool will be your ideal solution.  

Learn more here about Top 11 Web Scraping Tools:https://homment.com/qrEb6VdDiLfHO5rubw5v
KeyStore Explorer - A useful tool for certificate management
Published: 2021-03-18 14:02:01

In a lot of moments, we need to check some certificates, check their validity... and we never remember all the commands to do it.

### This time is *OVER*!

With the **KeyStore Explorer**, you can quickly and easily load a certificate and be able to describe it, add a new certificate to a jks...

![](https://keystore-explorer.org/images/win10_mykeystore.png)

So if you are interested, go check their website!

---
## Links
- Website: https://keystore-explorer.org

---

I hope it will help you! 😀
JavaScript videos from February
Tags: javascript
Published: 2021-03-18 13:37:27

Hey guys,

We've brought you our latest JavaScript video selection from February, covering topics like webassebmly, CSS with JS, machine learning, and even counters.

You can either check our article or pick what you want to see below.

https://blog.meetupfeed.io/javascript-meetup-videos-feb-2021/

JavaScript: Introduction to webassembly | Guy Royse

Want to write a web application? Better get familiar with JavaScript. JavaScript has long been the king of front-end. While there have been various attempts to dethrone it, they have typically involved treating JavaScript as an assembly-language analog that you transpile your code to. This has led to complex build pipelines that produce JavaScript which the browser has to parse and *you* still have to debug. But what if there were an actual byte-code language you could compile your non-JavaScript code to instead? That is what WebAssembly is.

In this session we will explain how WebAssembly works and how to use it. We’ll cover what it is, how it fits into your application, and how to build and use your own WebAssembly modules. And, we’ll demo how to build and use those modules with both Rust and the WebAssembly Text Format. That’s right, we’ll be live coding in an assembly language. We’ll also go over some online resources for other languages and tools that make use of WebAssembly.

Link: https://meetupfeed.io/talk/javascript-web-assembly

The past, present and future of CSS in JavaScript | Max Stoiber

Max Stoiber, creator of styled-components and react-boilerplate, talks about what is CSS-in-JS, why do people use it, how has it come as far as it has and where is it going.

Link: https://meetupfeed.io/talk/the-past-present-and-future-of-css-in-js

Machine learning for JavaScript developers 101 | Jason Mayes

Discover how to achieve superpowers by embracing machine learning in JavaScript using TensorFlow.js in the browser.

Learn what machine learning is, get a high-level overview of how it works, get inspired through a whole bunch of creative prototypes (from invisibility to teleportation) that push the boundaries of what is possible in the modern web browser, and then take your own first steps with machine learning in minutes.

Link: https://meetupfeed.io/talk/javascript-machine-learning

JavaScript counters the hard way – HTTP 203

You’ve seen loads of counter tutorials online, but they’re all a bit wrong… or at least most of them are. Jake and Surma dissect different techniques and identify how to make the counter work accurately and efficiently across browsers.

Link: https://meetupfeed.io/talk/java-script-counters-the-hard-way-http-203
Next-Gen Data Storage And Analytics With Elasticsearch
Tags: datascience, analytics, elasticsearch, tutorial
Published: 2021-03-18 13:36:39

{% medium https://towardsdatascience.com/next-gen-data-storage-and-analytics-with-elasticsearch-a833ca7ca54a %}

Elasticsearch is a hugely popular service that provides an incredible search-engine and analytics tool powered by a powerful schema-free document database.

It provides a scalable, highly available, and lightning-fast search engine. The database itself is distributed across nodes, which can be further split into shards — which are by default replicated to protect against data loss.

Alongside Logstash, Kibana, and Beats — we produce a world-class data collection, transformation, analytics, and visualization platform.

Together these are known as the Elastic (or ELK) stack — and are a powerful tool for anyone working with data. Elasticsearch is the heart of the stack.

In this article, we will cover everything you need to know to get started with Elasticsearch, including:

* Elasticsearch
* Getting Free Access to Elastic Cloud
* Key Points of Interest
  * Deployment Details
  * Kibana Dashboard
  * Console
* API Requests
  * Request Structure
  * Connecting Remotely
* Adding and Querying Data
  * Index Creation
  * Adding Data
* * Querying
Infracost diff - "git diff" but for cloud costs
Tags: terraform, devops, sre, aws
Published: 2021-03-18 13:35:44

Recently we [released](https://infracost.io/docs/#installation) a new `infracost diff` command inspired by `git diff`. This shows a diff of monthly cloud cost estimates between the current and planned state of Terraform projects. At a high-level this might seems like a simple exercise of subtracting the current state's cost estimate from the planned state, but cloud costs are rarely that simple to deal with. Let's take a look at the following screenshot to understand some of the nuances.

![Infracost diff command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6k73nhh82l687xksop6.png)

1. The `aws_instance` is being changed, which reduces the cost by $125/month (from $743 to $618).

2. AWS EC2 has **many** different cost components, so to explain what caused the above change, we also flag the sub-resource `ebs_block_device[0]` that changed (the first attached block device). Underneath it, we show the cost component that caused the actual cost diff, Provisioned IOPS SSD Storage (io1); i.e. reducing the size of that volume can save $1500/year. For those who have done this in production, they know it's not a one-click change as you need to create a new EBS volume and copy over the data. What Infracost enables you to do is to quickly tell how much such a change would save you, then decide if it's worth it.

3. A new `aws_lambda_function` is being added. Since we don't know how much it's going to be used, we can't show a cost estimate. But we can still show you the prices you'll be charged for: $0.20 per 1M requests and a tiny amount per GB-second. This is a [usage-based resource](https://infracost.io/docs/usage_based_resources), so if you like you can create a yaml file to provide usage estimates and get a cost estimate. It's hard to think in GB-seconds, so we enable you to input the average request duration and we'll do the math to map that to GB-seconds based on the `memory_size` of your function and any rounding rules that AWS applies.

    ```yaml
    version: 0.1

    resource_usage:
      aws_lambda_function.hello_world:
        monthly_requests: 100000000 # Monthly number of requests.
        request_duration_ms: 250 # Average duration of each request in milliseconds.
    ```

4. Finally we show a summary at the bottom: the EC2 instance change reduces the cost by 17%, and you can use the above yaml file to do simple what-if analysis on the Lambda costs.

The new `infracost diff` command is used by our [**CI/CD integrations**](https://infracost.io/docs/integrations/cicd) and is open source alongside the rest of Infracost. We look forward to hearing what you do with it via [GitHub issues](https://github.com/infracost/infracost/issues) or our [community Slack](https://www.infracost.io/community-chat)!
HTML Image Map & CSS Image Map
Tags: imagemap, html, css
Published: 2021-03-18 13:34:54

전통적으로 HTML Image maps를 이용하여 이미지위에 클릭 가능한 영역을 만들었습니다. CSS를 이용하여 이미지 맵을 만들 수 있습니다.

#1. HTML 태그를 이용한 이미지 맵

```
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
```

[참조](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_map2)

#2. CSS를 이용한 이미지 맵

###HTML 코드
```
<div id="workmap">
<a href="https://365ok.co.kr" id="workmap1" alt="웹학교"></a>
<a href="https://sir.kr" id="workmap2" alt="냑"></a>
<a href="https://skin.fiance.co.kr" id="workmap3" alt="데모"></a>
</div>
```

###CSS 코드
```
#workmap{
  background-image: url(../img/main.jpg);
  width: 950px;
  height: 634px;
  position: relative;
}
		
#workmap a {
  display: block;
  border: 0;
  position: absolute;
  text-decoration:none
}
		
#workmap a:hover {
  border: 0;
  text-decoration:none
}
a#workmap1 { width: 168px; height: 23px; left: 30px; top: 188px; }
a#workmap2 { width: 168px; height: 23px; left: 30px; top: 216px; }
a#workmap3 { width: 168px; height: 23px; left: 30px; top: 245px }
```

CSS에서 이미지 및 사이즈 등은 임의로 적었습니다. 적용하려는 이미지에 맞게 수정하여 사용하면 됩니다.

[HTML강좌](https://365ok.co.kr/tj/html7)
[CSS강좌](https://365ok.co.kr/tj/css7)
Create an awesome landing page design - HTML & TailwindCSS✈️
Tags: html, css, tailwindcss, javascript
Published: 2021-03-18 13:34:11

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

####Hello Developers,
Welcome to another post, so in this post, we are gone be discussing how to create an **awesome landing page design with HTML & TailwindCSS** and some external libraries such as **swiper.js** for creating slider and **animate CSS** for animations so let's get started!

Outline ⏱ 
0:00​ : Intro
0:11​ : Preview
1:52​ : Asia
13:00​ : Africa
21:48​ : Demo with Swiper.js
23:51​ : Australia
31:32​ : Animation

If you want to see/catch the step by tutorial, please check out the below-given tutorial to understand things step by step!

{% youtube _aAsPMXouBY %}


Source code will be available very soon!