teleren/devto huggingface dataset:
How to leverage a CDN to improve your organic rankings

Tags: webdev, devops, tutorial, webperf
Published: 2020-05-27 16:56:27

## WEBINAR: Site performance and SEO

[Join us and register here](https://explore.fastly.com/seo-and-caching?utm_source=devto&utm_medium=referral&utm_campaign=FY20Q2_NA_WBR_SEOandCaching)

Increasing your search rankings can significantly increase the amount of traffic (and potential customers) to your website. But how do you get your engineering and digital teams to work together toward this shared goal? In the webinar, we will go over:

* The importance of a page's rank, including market share of organic search volume for your target keywords.
* The factors that go into a page's rank including site performance.
* Deep dive into site performance metrics like page load and ttfb (time to first byte) and their relationship with page rank.
* How to utilize a CDN and image optimization to improve these metrics for a better UX and improved organic rankings.

[Join us and register here](https://explore.fastly.com/seo-and-caching?utm_source=devto&utm_medium=referral&utm_campaign=FY20Q2_NA_WBR_SEOandCaching)
Azure Kubernetes Service Deployment Center With GitHub Actions. (Video Tutorial)
Tags: github, cicd, kubernetes, tutorial
Published: 2020-05-27 16:52:28

This tutorial provides you with an introduction to building an Azure Kubernetes Service and GitHub Actions.  I walk through each step while providing you with all the code to deploy exactly what I do. 

{% youtube 2Y-zjCt_8xo %}

We'll work with a stateless React.js app that has very little dependencies so the focus is on the deployment and infrastructure.  

Here are some links to help you: 

Microsoft Docs: [Azure Kubernetes Service (AKS)]( https://cda.ms/1jR
) 
Microsoft Docs: [Deployment Center for Azure Kubernetes](https://cda.ms/1jQ)
Microsoft Docs: [Kubernetes core concepts for Azure Kubernetes Service (AKS)](https://cda.ms/1jS)
Microsoft Docs: [Service principals with Azure Kubernetes Service](https://docs.microsoft.com/en-us/azure/aks/kubernetes-service-principal?WT.mc_id=devto-blog-jagord)
Microsoft Docs: [Azure Container Registry Documentation](https://docs.microsoft.com/en-us/azure/container-registry/?WT.mc_id=devto-blog-jagord)
Microsoft Learn: [Azure Fundamentals](https://cda.ms/1jV)
Microsoft Azure: [$200 Free Credit](https://azure.microsoft.com/free/?WT.mc_id=blog-devto-jagord)
10 css grid example
Tags: javascript, webdev, beginners, css
Published: 2020-05-27 16:29:16

---
title: 10 css grid example
published: true
tags: #javascript #webdev #beginners #css
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lkoqtn8inpnyey760c11.jpg)
<p><B>If You Like This Article then check Out more Example [gscode.in]</B></p>
<H2>50+ CSS grid template</H2>
 https://gscode.in/css-grid/

<p>1.Uses CSS Grid Spec and mix-blend-mode to create a mosaic effect from a single image. Photograph by <a href="https://500px.com/photo/184035727/">Christoph Ruhrmann</a>, used under a Creative Commons license.</p>

{% codepen https://codepen.io/dudleystorey/pen/KopwJZ %}

<p>2.The calendar Jake Peralta will <em>never</em> have.</p>

<p>Testing <code>z-index</code> with CSS Grid. This experiment is technically a fail as it's 8/10 UI, 3/10 UX, 0/10 Scalability, 0/10 it-makes-sense-to-do-it-this-way.</p>

{% codepen https://codepen.io/oliviale/pen/QYqybo %}

<p>3.My first take on the CSS Grid Layout Module.</p>

{% codepen https://codepen.io/jakob-e/pen/yOapOm %}

<p>4.A "product grid" demo using</p>

{% codepen https://codepen.io/andybarefoot/pen/oNjxYYG %}

<p>5.When you can't afford to buy a Moleskine and nice stationery for bullet journaling, so you code it up instead 😂 </p>

{% codepen https://codepen.io/oliviale/pen/aPwaXm %}


<p>6.Gridworks in Safari Technical Preview, WebKit Nightly, and Firefox Nightly out of the box. Chrome works with Experimental Extension APIs enabled at chrome://flags/ and in Firefox with layout.css.grid.enabled flag by going to about: config.</p>

{% codepen https://codepen.io/stacy/pen/rLyErg %}

<p>7.Procedurally Generated CSS Numbers</p>

{% codepen https://codepen.io/cobra_winfrey/pen/xvjbYy %}


<p>8.My first time using <code>grid</code>inside <code>flex</code>, instead of the other way around  😱</p>

{% codepen https://codepen.io/oliviale/pen/bOWqbj %}

<p>9.Isometric Card Grid</p>

{% codepen https://codepen.io/jkantner/pen/KQPdXK %}

<p>10.Just a fun, pure CSS exploration of some newer or less common CSS features, including CSS Grid, Flexbox, position: sticky, and Sass (for the random colors and a couple of other niceties).</p>

{% codepen https://codepen.io/joshuajcollinsworth/pen/aEJGvg %}

<p><B>If You Like This Article then check Out more Example [gscode.in]</B></p>
<H2>50+ CSS grid template</H2>
 https://gscode.in/css-grid/
Google Tag Manager Hook for React
Tags: react, hooks, googletagmanager
Published: 2020-05-27 16:18:27

[Google Tag Manager](https://marketingplatform.google.com/intl/en/about/tag-manager/) is a powerful tool from Google for **manage tags** (like cookies, pixels, scripts, etc...) on your app/website from a **single entry point** and **without editing your codebase**!

The **GTM** is an awesome tool for *marketers* and *developers* for adding external libs, handling events and analytics tags without affecting the codebase and, above all, give to the marketing team some working autonomy without deploy a new version of the app/website.

## Why?

Why I wrote this Hook?

Basically because **we are in the Hook era** and, at the moment of writing, there was not any hook to handle it.

## Overview

The Hook will inject the GTM scripts to the document and you don't have to edit your `index.html` anymore.

You can also pass as parameters a custom dataLayer name (it will replace the default `dataLayer`) and custom values/variables to it.

There is also a method to send custom data/events to the GTM (is a wrapper for the `dataLayer.push()`)

## Example Snippets

### Basic/Default usage

```javascript
import { useEffect } from 'react'
import useGTM from '@elgorditosalsero/react-gtm-hook'

const App = () => {
  const { init } = useGTM()

  useEffect(() => init({ id: 'GTM-ID' }), [])

  return <p>My awesome app</p>
}
```

### Send event (after initialization)

```javascript
const MyAwesomeComp = () => {
  const { sendDataToGTM } = useGTM()

  const handleClick = () => sendDataToGTM({ 
    event: 'awesomeButtonClicked', 
    value: 'imAwesome' 
  })

  return (
    <div>
      <p>My Awesome Comp</p>
      <button onClick={handleClick}>My Awesome Button</button>
    </div>
  )
}
```
---

So, what do you think? Will you try it?

*If you think would be useful an article with more example and/or screenshot also from the Tag Manager, let me know in the discussion section*

> **Pull Request, contributions and issue are welcome!**

If this Hook was useful to you and you like it, please add a reaction and/or leave a comment and star on GitHub!

## Repo

{% github https://github.com/elgorditosalsero/react-gtm-hook %}
Youtube 2 Wordpress Uploader
Tags: youtube, wordpress, javascript
Published: 2020-05-27 16:16:30

---
title: Youtube 2 Wordpress Uploader
published: true
description: A simple script to upload Youtube Videos to Wordpress
tags: youtube,wordpress,javascript
cover: https://raw.githubusercontent.com/NinjasCL/youtube2wordpress/master/screenshot.png
---

This simple script ([GitHub Repo](https://github.com/NinjasCL/youtube2wordpress)) can create a new post in your _Wordpress_ using the data found in a _Youtube_ url. 

## Technologies used

_JavaScript_ Libraries Used:

- [Scrape Youtube](https://www.npmjs.com/package/scrape-youtube)
- [Wget Improved](https://www.npmjs.com/package/wget-improved)
- [Wordpress API](https://www.npmjs.com/package/wpapi)


Be sure to configure your _Wordpress_ with [Basic Auth Plugin](https://github.com/WP-API/Basic-Auth/issues/35#issuecomment-470532805) (And _.htaccess_ config) first before using the Rest API.

## Windows

This repo contains a bundled executable with everything you need (nodejs) to execute the scripts with just a double click. See [Releases](https://github.com/NinjasCL/youtube2wordpress/releases).

![](https://raw.githubusercontent.com/NinjasCL/youtube2wordpress/master/screenshot.png)

## Other OS

You can execute the command

`node index.js "youtube-url1 youtube-url2 youtube-url-n"`

## Considerations

The script will search the _Youtube_ url and use the first match. Sometimes _Youtube_ does not return the correct video even when using the full url. Be sure to test your search queries in _Youtube_ to create a query that returns your video as the first result.
Project(s) for functional/performance testing
Tags: help
Published: 2020-05-27 16:11:56

---
title: Project(s) for functional/performance testing
published: true
tags: help
---

I am a QA guy and still n00b as far as the UI test automation or Functional testing is concerned. I came across whole bunch of tutorials which give glimpse of functional/performance testing but no practical hands-on. Is there any such project available through which one could go ahead and learn the stuff? 

Thanks in advance!
New Year Countdown 2021 | Coming Soon Page using JavaScript CSS HTML (Video Format)
Tags: javascript, tutorial, codenewbie, beginners
Published: 2020-05-27 16:11:36

{% youtube -ueCx-zViiA %}

In this tutorial, we'll create a New Year Countdown app 2021 | Coming Soon Page using JavaScript CSS HTML. This project-based tutorial is suitable for all especially beginners.

📕 Concepts covered in this video:
 - DOM 
 - Background Overlay
 - JS Date, setInterval function
 - CSS Flexbox 
 - CSS transform
Windows GIT certificate
Published: 2020-05-27 16:10:16

If you are running git on windows many things can go wrong, one of the more irritating problem are with certificates.

to use the windows certificate store set the following

```bash
git config --system http.sslbackend schannel

```

From the [release notes](https://github.com/git-for-windows/git/releases/tag/v2.14.0.windows.1)


*It is now possible to switch between Secure Channel and OpenSSL for Git's HTTPS transport by setting the http.sslBackend config variable to "openssl" or "schannel".*
Happy Birthday! 🎂👇
Tags: codepen
Published: 2020-05-27 16:05:29

<p>Made a "Happy Birthday" button for this week's "Making awesome things for awesome people!"</p>

<p>There's sound of course!</p>

<p>Built with GreenSock.</p>

<p>Enjoy! 😎</p>

<hr>

<p>Sounds courtesy of <a href="https://freesound.org">freesound.org</a></p>

<ul>
<li><a href="https://freesound.org/people/Reitanna/sounds/242867/#">Blowing out candle</a> by <a href="https://freesound.org/people/Reitanna/">Reitanna</a></li>
<li><a href="https://freesound.org/people/Percy%20Duke/sounds/23270/#">Happy Birthday</a> by <a href="https://freesound.org/people/Percy%20Duke/">Percy Duke</a></li>
<li><a href="https://freesound.org/people/jayfrosting/sounds/333404/#">Cheer</a> by <a href="https://freesound.org/people/jayfrosting/">jayfrosting</a></li>
<li><a href="https://freesound.org/people/InspectorJ/sounds/411639/#">Pop</a> by <a href="https://freesound.org/people/jayfrosting/sounds/333404/#">InspectorJ</a></li>
<li><a href="https://freesound.org/people/JarredGibb/sounds/248236/#">Match strike</a> by <a href="https://freesound.org/people/JarredGibb/">JarredGibb</a></li>
<li><a href="https://freesound.org/people/TiesWijnen/sounds/460496/#">Party Horn</a> by <a href="https://freesound.org/people/TiesWijnen/">TiesWijnen</a></li>
</ul>

{% codepen https://codepen.io/jh3y/pen/BaobKOJ %}
The best minimalistic portfolio you have ever seen?
Tags: discuss, webdev, career
Published: 2020-05-27 16:00:52

Portfolios are a great way to demonstrate the competencies you would list on a resume or talk about in an interview — they allow you to show and not just tell. During a job search, the portfolio showcases your work to potential employers. It presents evidence of your relevant skills and abilities.

So, how can you show your work in a minimalistic way?
Day 6 & 7: holidays & code
Tags: codenewbie, codequality, challenge, career
Published: 2020-05-27 15:59:22

Hey all,

I realize the last two days, I did not release an article so allow me to catch you up. 

I am visiting with my sister, so Memorial monday and yesterday we spent a lot of time with her friends in different cities celebrating which was fun. But, don't think that stopped me from getting in my daily lessons. Holiday's are fun, but as long as I am not where I want to be in life, I can't casually take an entire day off without working on some code for at least an hour or so. 

For the past two days, I have been focusing on finishing the basic javascript section which is proving to be a really good section as far as fundamentals go. I know a lot of the code and can read solutions fairly easily. I still want to continue to practice until I can code a game or a small app like a to-do list from scratch without having to use any help or stack-overflow, which I feel like I am getting close to being able to do. 

I have some exciting new projects that were introduced over the past two days as well which is something that I will talk about in the days to come, but I know some of you are following the daily progress, so I wanted to stay updated on my progress.
textContent VS innerText
Tags: javascript, webdev, react, todayilearned
Published: 2020-05-27 15:54:55

I used to think that there is no difference between `textContent` and `innerText`. But today I came to know that there exist some important differences between them.

**i)** textContent gets the content of all elements, including `<script>` and `<style>` elements. In contrast, innerText only shows `human-readable` elements.

*Example:-*
*HTML*
```html
<p>
    some paragraph text
    <style>
      p {
        color: red;
      }
    </style>
</p>
```
*JS*
```js
const p = document.querySelector('p');
console.log(p.textContent);
/* textContent returns the content inside style, script elements as well..Above statement logs:
  Some textSome Other Text

  p {
    color: red;
  }
*/
console.log(p.innerText);
/* innerText returns only human-readable elements. Above statement logs:
  Some textSome Other Text
*/
```

**ii)** textContent returns every element in the node. In contrast, innerText is aware of styling and won't return the text of `hidden` elements.

*Example:-*
*HTML*
```html
<style>
.special {
      display: none;
    }
</style>
<h1>Heading <span class="special">Special</span> </h1>
```
```js
const h1 = document.querySelector('h1');
console.log(h1.textContent);
/* textContent is not aware of styles. So it returns entire content. Above statement logs:
Heading Special
*/
console.log(h1.innerText);
/* innerText is aware of css, doesn't return hidden content. Above statement logs:
Heading
*/
```

Happy Coding 😀
Deploying React-web application with out ngnix and with ngnix on fargate
Tags: devops, aws, react, reactweb
Published: 2020-05-27 15:54:26

is there any advantage deploying react-web[static application] on fargate with ngnix? since we are coving the security aspects with AWS WAF. is it good to have a  ngnix or any suggestions will be helpfull.
How about javascript this
Tags: javascript, thinkingjavascript
Published: 2020-05-27 15:49:59

---
title: How about javascript this
published: true
description: Talk about javascript this keywords
tags: Javascript, Thinking Javascript
---

That interesting things about javascript **this** scope, let's review code together 

```javascript
function foo(){
  console.log(this)
}
foo()
```
This code will output `window` object in browser env.

Try review other code once more

```javascript
let bar = {
  myName : "myName1",
  test1 : 1
}
function foo(){
  this.myName = "myName"
}

foo.call(bar)
console.log(bar)
console.log(myName)

```

Will output 

```javascript
// {myName: "myName", test1: 1}
// VM289:11 Uncaught ReferenceError: myName is not defined
    at <anonymous>:11:13
(anonymous) @ VM289:11
```
What happen why i got exception? it hard to understand? 

Don't worry just follow my step.

First if call function without with object like this `method()` javascript will call method on global context, here global in `window` object 

At code `foo.call(bar)` will bind `bar` object to foo and **this** will point to bar also you have another methods to do this like `apply`,`bind`.

difference `call` method `bind` just bind method context to `foo` and this will point to `bar`
difference `call` method `apply` just argument like `foo.apply(bar,[arg1,arg2])`

Ok let's back, `console.log(bar)` will output `{myName: "myName", test1: 1}` because execute `foo.call(bar)`  then `this.myName='myName'` `bar` object `myName` will be overwrite.

Emmmm... how about exceptions happen? call `console.log(myName)` in global context, javascript will found `myName` attrs in global scope. but you know global env haven't defined `myName` variable. this is main reason why exception.

So far i have show you two javascript code about how context effective behavior, one words function context `this` will follow call object. if no object indicate. global object will replaced

Short words
```javascript
foo() // `this` will point to global object like: window, global
obj.foo() // `this` will point to obj
```
Any SMEs on JavaScript lexers and parsers?
Tags: help
Published: 2020-05-27 15:40:23

**Lexer and Parsers?**
Are the fundamental (first and second) phase of generating a compiler.  When you know how to use these tools, you can create some amazing tools.  

**Are you Familiar with JavaScript tools shown below?**
 
SME are you a subject matter expert on lexers and parsers?

What's the best, easiest and fastest etc.?
[Github css parsers](https://www.google.com/search?q=css%20parsers%20site%3Agithub.com)
[Goolge searh for CSS parsers](https://www.google.com/search?q=javascript+css+parsers)
[Google search for lexers and parsers ](https://www.google.com/search?q=javascript+lexers+and+parse)
Take the 2020 Ruby on Rails developer community survey
Tags: ruby, rails, survey
Published: 2020-05-27 15:18:18

Back in 2009, we invited our community to participate in the first survey about the state of deploying Ruby on Rails applications. Over the years, we've evolved this to include questions about tools, frameworks, and workflows in order to see how the environment is changing.

If you're a Ruby on Rails developer, please consider taking the survey and inviting your peers to do so, too.

You can take the survey at: https://planetargon.survey.fm/rails-survey-2020

To view more details and past results, visit https://rails-hosting.com/
Go - Testing panic.
Tags: go, test
Published: 2020-05-27 15:02:18

---
title: Go - Testing panic.
published: true
description: 
tags:
  - golang
  - test
---

I usually test "panic" with below code.
Is it redundant?

```go
// Testing if testFunc calls panic.
// e.g.
// IsTestCallPanic(func(){
//   <place test target here.>
// })
func IsTestCallPanic(testFunc func()) (ok bool) {
	defer func() {
		if err := recover(); err == nil {
			ok = false
		}
	}()
	ok = true
	testFunc()
	return
}

// Test of test.
func TestIsTestCallPanic(t *testing.T) {
	isCalled := IsTestCallPanic(func() {
		var i interface{}
		if i == nil {
			panic("Hi, panic.")
		}
	})
	if !isCalled {
		t.Errorf("failed.")
	}
}
```
Is super.super.method() allowed in Java?
Tags: java, softwaredevelopment, softwaredesign, cleancode
Published: 2020-05-27 14:57:49

---
title: Is super.super.method() allowed in Java?
published: true
description: I encountered this question through an interview process. I thought to myself that I haven’t seen this usage and wondered what might be the reason 
tags: Java, Software Development, Software Design, Clean Code
---
I encountered this question through an interview process. I thought to myself that I haven’t seen this usage and wondered what might be the reason for it to be not allowed. I didn’t know the answer. After the interview, I looked for it and found that it is, indeed not allowed in java, but why?

In C++, we can use the scope resolution operator (::) to access any ancestor’s member in the inheritance hierarchy but in Java, we can access grandparent’s members **only through the parent class.**

So the question is “Why is super.super.method() not allowed in Java?”

Because it violates encapsulation. **Encapsulation** is a principle of wrapping code and data(variables) together into a single unit. It’s one of the four fundamental OOP concepts. The other three are inheritance, polymorphism, and abstraction.

**Encapsulation** is often used to implement a data-hiding mechanism. This mechanism reduces the accessibility of attributes to the current class and uses public getter-setter methods to control and restrict external access to these attributes. These methods not only allow you to define which attributes can be read or updated, but it also enables you to validate the new value before changing the attribute.

With **Encapsulation**, the fields of a class can be made read-only or write-only and a class can have **full control** over what is stored in its fields.

Therefore, we shouldn’t be able to bypass the parent class’s behaviour. It makes sense to sometimes be able to bypass your own class’s behaviour (particularly from within the same method) but not your parent’s!

For example, we have a base “collection of items”, a subclass representing “a collection of red items” and a subclass of that representing “a collection of big red items”.

{% gist https://gist.github.com/inanc/8f202dda10a8734017b086132b009a50 %}

With **super.super.add(item)** we could add anything and the invariant in RedItems is broken.

Okay, but why does C++ allow this?

When I searched for this question, I found this answer:
Because c++ doesn’t care if you shoot yourself in the foot :)
I think the main reasons are the flexibility and the fact that C++ assumes we understand how to programs to the edge of bytes and RAM while Java assumes we don’t know how to program and Java doesn’t allow us to design software poorly.

This article was originally published on medium: {% medium https://medium.com/@inanccakil/is-super-super-method-allowed-in-java-f00b6ae37f61 %}
Coding to relax from obligations
Tags: teamlead, techlead, discuss
Published: 2020-05-27 14:50:25

---
title: Coding to relax from obligations
published: true
description: 
tags: #teamlead #techlead #discuss
---

Going through a stressfull period at work at the moment.
Finally got a chance to code without interruptions this afternoon.

It was pure bliss, just me, the problems in front me, and the ecstatic feeling of flow.

I am considering asking my manager to have a "vacation" from my team/teck lead role to rest up a bit, might even be a good opportunity for me to train a standin for when i am on vacation etc.

Anyone else have similar experiences?
Hacking Unicode characters to hide secrets in strings
Tags: javascript, opensource, programming, webdev
Published: 2020-05-27 14:43:20

My friends and I built Stegcloak, a pure JavaScript steganography module designed in functional programming style, to hide secrets inside the text by compressing and encrypting with Invisible Characters. It bypasses all blacklists and works everywhere, including the most important ones like Twitter, Gmail, Whatsapp, Telegram, Instagram, Facebook, documents, etc

{% youtube RBDqZwcGvQk %}

Interesting? Check out how we built it: 

{% medium https://blog.bitsrc.io/how-to-hide-secrets-in-strings-modern-text-hiding-in-javascript-613a9faa5787 %}

Try it out [here](https://stegcloak.surge.sh/)


Source code 

{% github kurolabs/stegcloak %}