teleren/devto huggingface dataset:
Adding social share tags to your website
Tags: metatags, twitter, share, social
Published: 2020-11-13 08:46:38

If we want to share our website on social media such as Twitter, FB or LinkedIn, we may need to ensure our site is shareable and has a preview image, title and description. 

In order to do so, we need to include special metatags into our HTML head. Tags that have `twitter:` keyword are required for Twitter cards, and tags with `og:` keyword are for Facebook and LinkedIn cards. 

Here's an example of tags I added for a website I just finished and wanted to share on social. 

```
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@irinakramer" />
    <meta name="twitter:title" content="Evaluate News with NLP" />
    <meta name="twitter:description"
        content="Check an article for sentiment such as positivity, subjectivity and irony. Powered by MeaningCloud API." />
    <meta name="twitter:image" content="https://evaluate-news-nlp-17.netlify.app/evaluate-news-screenshot.png" />
    <meta property="og:title" content="Evaluate News with NLP" />
    <meta property="og:description"
        content="Check an article for sentiment such as positivity, subjectivity and irony. Powered by MeaningCloud API." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://evaluate-news-nlp-17.netlify.app/" />
    <meta property="og:image" content="https://evaluate-news-nlp-17.netlify.app/evaluate-news-screenshot.png" />
```
This is how this tweet appears in my feed:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bqgaf6ryf1aw2o77ooub.png)

Just to make sure our tags work correctly, we can validate them on Twitter and Facebook developer sites:
https://cards-dev.twitter.com/validator
https://developers.facebook.com/tools/debug/

There are more options for these tags and details can be found here:
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
https://ogp.me/

PS: This was my first ever blog post, so please forgive if something isn't perfect. Feedback is appreciated!
Need Contributors for xtra-power css library
Tags: css, opensource, help
Published: 2020-11-13 08:46:11

Hello friends,
xp stands for xtra power css.

Recently, xp.css said 'hello world'.
xp.css can intelligently convert any app to super Responsive. 
For Instance: Text size,div size, images, buttons etc all grows and shrink with device size. This means you don't need to write media queries or using any tool to create UI for mobile phones ( potrait / landscape) to smart tv.

Your UI get fit automatically as per size of device whether its mobile device or smart tv.

Xp.css is easy to implement.

#JOIN US:
open a issue in github and I will add you as contributor.

{% link https://dev.to/manishfoodtechs/introducing-xtra-power-css-device-size-no-more-a-challenge-1cp1 %}
CSS3 3D cube Animation with image
Tags: css, html, webdev
Published: 2020-11-13 08:28:08

CSS animation is a web design process for animating certain HTML elements without taking any help from javascript. CSS animation is one of the most powerful tools in web design. It makes a simple-looking website awesome to its users. In this blog, I will share another simple yet exciting snippet about creating a 3D cube animation with an image using HTML and CSS. during this process, no javascript or jquery was needed. <a href="https://www.divinectorweb.com/2020/11/css3-3d-cube-animation-with-image.html">Download the code</a>
Data Binding in Angular
Tags: angular, databinding, webdev
Published: 2020-11-13 08:23:09

Angular data binding is an important topic when it comes to passing data between components to DOM. In this article, I’m going to discuss one-way and two-way data binding.

#One-Way Data Binding
This is a unidirectional data binding method. If we use one-way data binding we can only bind data from component to view or from view to the component. There are many different ways that we can use one-way data binding in our Angular application.

1. Interpolation Binding
Interpolation is a very common method that we use to bind data in Angular and this refers to binding values into UI elements.

2. Property Binding.
This is another widely used approach to bind data and with this method, we can bind values from components into the DOM properties of the HTML elements.

If we use Interpolation in such situations button will be always disabled neglecting the value of the variable.


3. Attribute Binding
Attribute binding is used to bind an attribute property of a view element. Let's take a scenario that we need to merge some columns in a table using a colspan attribute.

4. Class Binding
Syntax of class binding is very similar to Attribute Binding and this method is used to set a class property of a view element. With the use of this binding method, we can add CSS classes conditionally to an element, creating dynamically styled elements.

5. Style Binding
This method is also very similar to the previous two methods and we can set Style Binding to set inline css styles.

#Two-Way Data Binding

Two-way data binding is establishing a bi-directional connection between View and component allowing users to exchange data in both ways. Two-way data binding can be easily achieved by using (ngModel).

Please make sure to import FormsModule from @angular/forms to app.component.ts file if you are using (ngModel).
Hope you enjoyed this article.
2020-11-12 | Debugging Docker
Tags: learninpublic, beginners, webdev, career
Published: 2020-11-13 08:21:29

---
title: "2020-11-12 | Debugging Docker"
description: "Summary of my day"
published: true
tags: ["LearnInPublic", "Beginners", "Webdev", "Career"]
series: "miku86 Diary"
canonical_url: "https://miku86.com/blog/day-2020-11-12"
---

Quiet day!

The day started with translating.
No tech stuff, just how to get help as a beginner.
This is a very important topic.

Afternoon was all about finishing the deployment of the backend.
I finally did it. Learned a lot about Docker internals.

Big thanks to [josegonzalez](https://github.com/josegonzalez), because he debugs literally every [dokku issue](https://github.com/dokku/dokku/issues).
Chromebook specs for browser-based development
Published: 2020-11-13 08:08:48

Hi community! Here is a question for you:

For webdevelopment (Nuxt webapps for startups & small to medium sized companies) I am experimenting with using a Chromebook + Codesandbox. With 4 weeks in, the experience is promising. 

**However, I am wondering whether upgrading my Chromebook would result in a better experience.** Currently the weapon of choice has a Intel Celerion processor and 8gb RAM. Would upgrading to/buying a new Chromebook with a i5 processor result in a significant improved development experience? 

I am confused because the work happens in the browser. Not sure if and how much influence the processor or RAM have in this case. Maybe a faster internet connection (better wifi or ethernet cable) would generate bigger improvements.
expo - read barcode ean5
Published: 2020-11-13 07:59:22

hi, i have a problem:
i must read barcode newspaper EAN13 + EAN5.
expo read EAN13 only and not read EAN5 with xpo-barcode-scanner
https://docs.expo.io/versions/latest/sdk/bar-code-scanner/#barcodescannerbarcodescannerresult

how can I do?
Thanks in advance
Emanuele Salati
System design interviews done right!
Tags: productivity, saas, design
Published: 2020-11-13 07:47:29

Hi👋

My names Jason and at my previous company, I was on both sides of the classic systems design interview, and found the remote experience to be far from ideal. I was frustrated that existing tools didn't support real time cursor and shape movements, easy access to common symbols used in software engineering, and a dashboard for managing the interview experience.

I realized most companies use tools like google draw which provides a far from ideal experience for both interviewer and interviewee. Considering these interviews are used to hire high level engineers, I thought a dedicated platform needed to be built!

Me and a friend built DesignPad and it is now ready for beta! Here is our demo https://www.youtube.com/watch?v=V2EijbEVWmI&ab_channel=designpad !

What can it do?
✅ Realtime collaboration (shapes, text, arrows, cursor locations)
✅ Suite of shapes commonly used in engineering design
✅ Fully functioning dashboard equipped with archived rooms, screenshots, and scheduling

We would love any feedback and if youre interviewing anyone soon, please give this a try! We think you will see a huge difference when using DesignPad vs other tools!

How can I get started?

1. Signup at https://designpad.io/signup
2. Check out our user guide at https://www.notion.so/DesignPad-User-Guide-43bad70f4bbd4cfea37e802a8318e471

Let us know what else would be useful for you 🙂
Happy Interviewing!
Node Module Export
Tags: node, module, export
Published: 2020-11-13 07:43:13

---
title: Node Module Export
published: true
description: Node Module Export
tags: node, module, export
//cover_image: https://direct_url_to_image.jpg
---

create a file like **people.js**

```
var people = ['sakib', 'tamim', 'bipon']

var a = 6;

function test(){
    console.log("test")
}

```

Import into **index.js** file

```
const people = require('./people')
```

Then run into terminal by `node index.js`. Showing blank `{}`

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

Update one line into **people.js** file

```
var people = ['sakib', 'tamim', 'bipon']

var a = 6;

function test(){
    console.log("test")
}

module.exports = people;
```
Or 

```
var people = ['sakib', 'tamim', 'bipon']

var a = 6;

function test(){
    console.log("test")
}
console.log(module)
// module.exports = people;

module.exports = {
    people: people,
    a: a,
    test: test
}
```

**Output**

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

If `console.log(module)` then showing bellow output. 

Command into terminal `node people`

**Output**

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

By default exports blank. `exports: {}`. That's why without export showing blank value.
Understanding Docker: part 14 – Dockerignore
Tags: docker, devops, beginners, cloud
Published: 2020-11-13 07:40:33

---
title: Understanding Docker: part 14 – Dockerignore
published: true
description: Serie of sketchnotes about Docker. Explaining in a visual way Docker principles.
tags: Docker, DevOps, beginners, Cloud
series: Understanding Docker in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7ay7bzvuuufqpmc46kkg.jpg
---

Understanding Docker can be difficult or time-consuming. In order to spread knowledge about Cloud technologies I started to create sketchnotes about Docker. I think it could be a good way, more visual, to explain Docker (and other technologies like Kubernetes and Istio).

We continue the series of Docker sketchnotes with a focus about a not well known feature of Docker: .dockerignore file

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7ay7bzvuuufqpmc46kkg.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qawdfdt9fquddcef0qap.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gwigbp43czazl65ytlav.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vxx5ykb2bpqcvrnet8e0.jpg)

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).

If you are interested, I published all the sketchnotes on Docker (and new ones!) to make a "book" of 93 pages: ["Understanding Docker in a visual way"](https://gumroad.com/aurelievache#YTLzM).
When actions fire in xstate
Tags: xstate, statecharts
Published: 2020-11-13 07:39:03

While working with [statecharts](https://statecharts.github.io) in the popular [xstate](https://xstate.js.org) library I fell into a trap of not understanding how and when are [actions](https://xstate.js.org/docs/guides/actions.html#actions) fired.

Most of the time it does not really matter. Until it does. That until happened when I tried to "smartly" use [transient transitions](https://xstate.js.org/docs/guides/transitions.html#transient-transitions).

Given [following statechart](https://xstate.js.org/viz/?gist=eea1ced4d06f3a38df86e0bd53ccfb70):

```js
const machine = Machine(
  {
    initial: 'idle',
    context: {
      winning: 'heads',
      selected: 'tails'
    },
    states: {
      idle: {
        on: {
          SELECT: [
            { target: 'playing' }
          ]
        },
      },
      playing: {
        // It might seem that entry level action fires first.
        entry: ['flipCoin'],
        on: {
          '': [
            // And *after* that the guard is checked.
            // But this is not how it works.
            { target: 'score', cond: 'isScore' },
            { target: 'nope' }
          ]
        }
      },
      nope: {
        type: 'final'
      },
      score: {
        type: 'final'
      },
    }
  }, {
    guards: {
      isScore(context) {
        console.log('guard isScore');
        return context.selected === context.winning;
      },
    },
    actions: {
      flipCoin(context) {
        context.selected = 'heads';
        console.log('action flipCoin');
      }
    }
  }
);
```
one might assume that given the `entry` [action](https://xstate.js.org/docs/guides/actions.html#actions) called `flipCoin`, which will change [state](https://xstate.js.org/docs/guides/states.html#states) `selected='heads'` the [guard](https://xstate.js.org/docs/guides/guards.html#guards-condition-functions) `isScore` will return `true` and thus we will end in the `score` [final state](https://xstate.js.org/docs/guides/final.html#final-states).

But this is not how things work. According to [the documentation](https://xstate.js.org/docs/guides/actions.html#actions):

> Actions are not immediately triggered. Instead, the State object returned from machine.transition(...) will declaratively provide an array of .actions that an interpreter can then execute.

So in my head:

> After event is sent to xstate, the next state of the statechart is determined based on _current_ context _before_ any actions are fired.

-----

<span>Photo by <a href="https://unsplash.com/@clyde_he?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Clyde He</a> on <a href="https://unsplash.com/s/photos/wires-computer?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
How I misunderstood Lombok
Tags: java, programming
Published: 2020-11-13 07:38:24

I was working on a project, and I wrote some code which I expected to work fine. The snippet was like

{% gist https://gist.github.com/satylogin/6a41774345a53b8fd3ec76219517e425 %}

But to my surprise, I got a `Medium Priority Warnings` from `findbugs`: **`RCN_REDUNDANT_NULLCHECK_WOULD_HAVE_BEEN_A_NPE: Nullcheck of value previously dereferenced`**

Basically it started complaining that I have non null check on a name on line `19` after it is being de-referenced at line `22` (the numbers are correct, bear with me for a while), so if the value was null, I would get NPE before even reaching this point.

This error in itself was super confusing, atleast for me. From what I understood here, we are creating Concrete, and checking if both the input are non null. Before it is initialized, we are passing this value super where we have non null check on name, and it is set as value. 

So, I went and looked at the decompiled .class file. It was expanded as:
```
public Concrete(
    @NonNull final String name,
    @NonNull final String address
) {
    super(name);
    if (name == null) {
        throw new NullPointerException("name");
    }
    this.address = address;
}
```

What was happening here was, the non null check was applied after calling the super class constructor, as opposed to before calling it, which is not what I would have expected. I thought that non null check will happen, before anything is executed in body, but I was definitely wrong. 

Lombok is a super helpful tool, and it has made java much much (a couple of thousands much) less painful. But this incident reminded me again that no matter what, we should never just assume something while writing code.

This was a great learning for me.
Scraping Cryptocurrency Data from Yahoo Finance with Python and Beautiful Soup
Published: 2020-11-13 07:33:22

Today we are going to see how we can scrape Cryptocurrency data using Python and BeautifulSoup is a simple and elegant manner.

This article aims to get you started on a real-world problem solving this article aims, so you get familiar and get practical results as fast as possible.

So the first thing we need is to make sure we have Python 3 installed. If not, you can just get Python 3 and get it installed before you proceed.

Then you can install beautiful soup.
We will also need the library's requests, lxml, and soup sieve to fetch data, break it down to XML, and to use CSS selectors.
Once installed, open an editor and type in.
Now let's go to the Yahoo cryptocurrency page and inspect the data we can get.
Back to our code now. Let's try and get this data by pretending we are a browser.
Save this as yahoo_crypto_bs.py.

If you run it.
You will see the whole HTML page.

Now let's use CSS selectors to get to the data we want. To do that, let's go back to Chrome and open the inspect tool.
We notice that all the individual rows of data are contained in a with the class 'simpTblRow'. We can get BeautifulSoup to select that data.
This prints all the content in each of the rows.

We can now pick out classes inside these rows that contain the data we want. The symbol is in the element with the attribute aria-label with the value Symbol.
If you run it, it will print out all the symbols.
Bingo!! We got the symbols.

Now with the same process, we get the other data like Name, price, change, change percentage, etc.
When we run it, it will print out every detail we want.
We even added a separator to show where each symbol data ends. You can now pass this data into an array or save it to CS and do whatever you want.

If you want to use this in production and want to scale to thousands of links, then you will find that you will get IP blocked quickly by Yahoo. In this scenario, using a rotating proxy service to rotate IPs is almost a must.

Otherwise, you tend to get IP blocked a lot by automatic location, usage, and bot detection algorithms.

Our rotating proxy server Proxies API provides a simple API that can solve all IP Blocking problems instantly.

With millions of high speed rotating proxies located all over the world
With our automatic IP rotation
With our automatic User-Agent-String rotation (which simulates requests from different, valid web browsers and web browser versions)
With our automatic CAPTCHA solving technology
Hundreds of our customers have successfully solved the headache of IP blocks with a simple API.

A simple API can access the whole thing like below in any programming language.
DOM manipulation
Published: 2020-11-13 07:24:51

This is how to get off innerHTML and use textContent instead keeping the power that innerHTML offers
   < p id="output"></ p >
    
          let a = newEl("em");
          let b = newEl("strong");
          let c = newEl("span");
              a.textContent = "I ";
              b.textContent = "love ";
              c.textContent = "javascript";
              c.style.cssText = "color: red;";
                 let d = document.querySelector("#output");
                          d.appendChild(a);
                           d.appendChild(b);
                            d.appendChild(c);
    function newEl(el){
      return document.createElement(el);}
List Of Top 14 free Blogging websites in 2020 – I verified
Published: 2020-11-13 07:18:53

What is Blogging :-A discussion or informational website published on the World Wide Web is called A Blog consisting of discrete, often informal diary-style posts. Posts are typically displayed in reverse chronological order so that the most recent post appears first, at the top of the web page.

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



After a slow start, blogging rapidly gained in popularity. Blog usage spread during 1999 and the followed with years. Blog’ and ‘blogging’ are now loosely used for content creation and sharing on social media, especially when the content is long-form and one creates and shares content on regular basis. So, one could be maintaining a blog on Facebook or blogging on Instagram, Tumbler etc.



Why Blogging is Important:- There is some debate out there in the world as to whether blogging is still relevant in today’s social media marketing environment or not. Regardless to that if you are running a small business, or a multinational company, blogging is integral to your online content marketing strategy even today. here are some reasons mentioned below:

Blogging gives you the opportunity to create relevant content for your customers & clients. And we can use this marketing tactic to drive traffic back to your website.
Well written articles demonstrate your company as an leader of the industry and maintain your image. By posting topics which resonate with your market and show your knowledge, and that’s how you are marketing your skills for your business, service or product too.
This provide another source to deepen the connection with your clients. By connecting directly on your website, your clients are able to get to know your business or product from the comfort zone. Read More https://www.devopsschool.com/blog/list-of-top-14-free-blogging-websites-in-2020-i-verified/
❎❓Quiz: Web Performance #13
Tags: challenge, webperf, webdev, quiz
Published: 2020-11-13 07:15:14

Quiz time: What is the Total Blocking Time?

- The time between First Contentful Paint and Time to Interactive.
- The time between Time to First Byte and Time to Interactive.
- The time between Largest Contentful Paint and Time to Interactive.
- The time between Cumulative Layout Shift and Time to Interactive.

---
<center>[Answer the question](https://marcradziwill.com/web-performance-quiz/what-is-the-total-blocking-time/)</center>
---
Functional Programming Là Gì- So Sánh Sự Khác Nhau Object-oriented
Published: 2020-11-13 07:14:19

Functional Programming là gì? Cũng như sự khác nhau giữa hai mô hình này như nào? Hãy cùng nhau tìm hiểu vấn đề này ngay trong nội dung chia sẻ sau đây Xem chi tiết tại: http://laptrinhvacongnghe.com/functional-programming-la-gi/
Heroku Là Gì- Những Thông Tin Đầy Đủ & Chi Tiết Nhất ②⓪②⓪
Published: 2020-11-13 07:04:45

Định nghĩa Heroku là gì? Tính năng của nó ra sao? Tất cả sẽ được ITNavi chia sẻ thông qua bài viết dưới đây. Hãy cùng theo dõi nhé! Xem chi tiết tại: https://blog.itnavi.com.vn/heroku-la-gi/
Best Math Courses for Machine Learning- Find the Best One!
Tags: machinelearning, datascience, career
Published: 2020-11-13 06:46:20

Are you looking for **Best Math Courses for Machine Learning?.** But confused because of so many courses available online. 

Then give your few minutes and find out the best math course.

**Knowledge of Mathematics is very important** in order to understand how machine learning and its algorithms work. In math, the most important topics are-

1. Probability and Statistics
2. Linear Algebra
3. Calculus
4. Matrix

This image from **Built-In** shows the importance of each mathematics topic for Machine Learning.

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

So, in order to learn or brush up these topics, I have chosen some **Best Math Courses for Machine Learning.** 

First, let me tell you, on what **criteria** I have filtered these courses-

##**Criteria-**

1. Rating of these Courses.
2. Coverage of Topics.
3. Engaging trainer and Interesting lectures.
4. Number of Students Benefitted.
5. Good Reviews from various aggregators and forums.

So, without wasting your time, let’s start finding the Best Math Courses for Machine Learning.
**[Click to continue reading...](https://www.mltut.com/best-math-courses-for-machine-learning/)**