teleren/devto huggingface dataset:
Social Media Cheat Sheet for TYPO3 2020
Published: 2020-05-25 07:37:18

Social Media plays a crucial role in connecting people and developing relationships by providing a great opportunity to establish customer service.

TYPO3 needs more engagement and sharing on social media. Moreover, while TYPO3 is an amazing Opensource CMS, it should be known to all as it has evolved throughout the years into a powerful website builder and a robust content management system. More awareness can be brought through Social media.

Explore Social Media Cheat Sheet for TYPO3 with topics

- Why Do You Need a Social Media Cheat Sheet for TYPO3?
- Choose Your Social Media Platforms
- Social Media Image Sizes Checklist
- Setting up Social Media Optimization in TYPO3
- Check how your post would look
- Adding Social Sharing Buttons to Your TYPO3 Website

Read blog in depth at — https://t3terminal.com/blog/social-media-cheat-sheet-for-typo3-2020/
How to install jupyter notebook on Ubuntu 16.04
Tags: jupyter, ubuntu1604
Published: 2020-05-25 01:49:04

---
title: How to install jupyter notebook on Ubuntu 16.04
published: true
description: 
tags: Jupyter, ubuntu16.04 
---

The version of Python is 2.7 or so.

```
python --version
Python 2.7.12
```

Installing jupyter notebook

```
sudo pip install jupyter
```

Confirmation of jupyter notebook startup

```
jupyter notebook
```

The browser starts up and jupyter notebook opens.
http://localhost:8888/tree

How to finish.
Ctrl+C to terminate the process on the console where jupyter notebook is running

How to create a new Notebook
Press the new button at the top right of the jupyter notebook screen to select Notebook: Python 2.

To open an existing Notebook from the console

```
jupyter notebook FILENAME.ipynb 
```
When saving a Notebook
Click on the good old floppy disk icon on Notebook's screen.
To rename the file, click on "Untitled1" on the right side of the jupyter on the screen to open a dialog for renaming the file


## Check if data analysis libraries numpy, scipy, scikit-learn, matplotlib, and pandas are installed.
If you're building your environment in an ansible-playbook repository, you can use
numpy, scipy, scikit-learn, and matplotlib should be installed

Check the list of installations in the pip to make sure they are

```
pip list
```

# Pandas installation

```
 sudo pip install pandas
```

## trying to import with jupyter notebook
If you run the following snippet in jupyter notebook and confirm that the table is displayed
I can confirm that pandas is installed.

```
from sklearn import datasets
import pandas as pd
from collections import OrderedDict

iris = datasets.load_iris()

df = pd.concat([pd.DataFrame(iris.data,columns=iris.feature_names),pd.DataFrame(iris.target,columns=["species"])],axis=1)
df.
```
Understanding Istio: part 3 – Sidecar containers (istio-proxy)
Tags: kubernetes, devops, docker, beginners
Published: 2020-05-25 07:32:02

---
title: Understanding Istio: part 3 – Sidecar containers (istio-proxy)
published: true
description: Serie of sketchnotes about Istio. Explaining in a visual way Istio principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Istio in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/a8jjtidn1st451xnaiwj.jpg
---

Understanding Cloud technologies, like Kubernetes, can be difficult or time-consuming. In order to spread knowledges about it, I started to create [sketchnotes about Kubernetes](https://dev.to/aurelievache/kubernetes-sketchnotes-pods-4ib0) and know it's time to talk about a perfect companion of Kubernetes, a service mesh, Istio.

We continue our new serie of Sketchnotes about Istio, let's talk about Sidecars.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a8jjtidn1st451xnaiwj.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sfsf1od694jpk3tf6eeu.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fh6h2fq8vhxad74a8txn.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uoubun9xbnf6aqym1huq.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/upacdo63set1j5xi520d.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oa7djd8rst0jlh05kbsh.jpg)

If you are interested, I published a book with all the sketchnotes on Istio (and new ones!): ["Understanding Istio in a visual way"](https://gumroad.com/aurelievache#vJYhM).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
The Front End Podcast - Episode #8
Tags: career, podcast, frontend
Published: 2020-05-25 07:23:00

That's right folks, it's time for another episode and this one is very exciting! Check it out on [The Front End](https://thefrontendpodcast.site). 

In episode eight I'm joined by [Emma Bostian](https://twitter.com/emmabostian), a prominent software engineer in the tech Twitter community who works at Spotify. Emma talks to us about the technical interview: the good, the bad, where it can be improved and how it can be useful in hiring the best developers. We also talk about increasing diversity in tech roles and how Emma got into software engineering. 

You can also [find Emma on Dev](https://dev.to/emmabostian) too!

Listen to episode 8 today on the following channels:

- 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

## About episode 8

Emma is a software engineer at Spotify. She's worked at a number of high-profile firms and has seen her fair share of good and bad hiring processes. Emma kindly joins us to talk about how to improve the technical interview, where it's useful and how to get it right. 

## Listening direct

Want to listen directly from here?

{% spotify spotify:episode:4BPXqjIC7dbjfnsLPsNQha%}

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

I'm definitely looking 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!
Top 7 E-Commerce Developers in India
Tags: webdev, wordpress
Published: 2020-05-25 07:19:27

Online business is at its full sprout in the current century! Taking everything into account, about 1.66 billion people bought stuff online in 2017 and their count is going up simply bit by bit. The amount of online clients is dependent upon to show up at the accomplishment of 2.14 billion preceding the completion of 2021. Are you searching for the best E-commerce developers in India? this information is more helpful for you

1. Web Destiny Solutions

Web Destiny is one of the main <a href="https://webdestiny.net/ecommerce-website-development/">E-Commerce  Website Development Company in India</a>, The Company was begun in 2010 and finished over 250+ tasks and worked with customers in 27 nations over the globe. The Company makes online stores for a wide range of businesses — small, medium, and large — in the most financially savvy manner.they are the ability in utilizing innovations, for example, jQuery, Ajax, ASP.Net, and MS SQL.

2.Softprodigy

Softprodigy is an e-commerce specialist company based in India and the USA, providing the most remarkable custom eCommerce development services at the most competitive rates. Main Services PrestaShop, Spree Commerce, Shopify development, etc

3.Seawind Solutions

Seawind Solution Pvt. Ltd is an inventive Web Design and Development Company had practical experience in making astonishing client encounters, independent sites with a solid, quantifiable web nearness. Building another Website structure or need to hone your advanced promoting system for your business and so forth

4.Angular Minds
Angular Minds -Enterprise Angular development Company offering end-to-end AngularJS solutions for businesses globally. Angular Minds has provided the number of solutions for B2B and B2C web applications and core services Web Development, Mobile App Development, AWS Cloud Services, etc.

5.WebSenor
WebSensor is one of the main organization in Web advancement and Mobile App Development.the organization have 11 years of involvement with E-trade Web Development. The Company Providing Services dependent on the present market patterns and business necessities completely comprehend the customer's needs. Administrations Website Design and Development, Software improvement, Mobile Applications advancement, Remote Employee and Digital Marketing administrations, and so forth

6.Webcraft

One of the Top E-trade Web Solution in India - Webcraft Company is a specialist in making and building up an imaginative, easy to understand, and secure site for all kind of business. give practical website composition and advancement, Software improvement, Print Design, SEO, Web advancement, and advertising administrations.


7.Synapseindia
Synapseindia is the top e-commerce company that provides high-quality e-commerce solutions to all types of business is small or big.they build very attractive, secure,multi-functional, and responsive online stores.they are concentrate major e-commerce platforms are Magento, Shopify, Open-Cart, WooComerce, etc
Hood Guyz
Published: 2020-05-25 06:57:57

Hood Guyz is a trusted company providing commercial kitchens the most professional Cleaning Services. They provides Kitchen Exhaust Cleaning, Exhaust Fan, vent, hood and duct cleaning in Greensboro, Houston, Chicago, Lafayette, Baltimore, Nashville, Memphis and Birmingham. For more details visit: https://www.hoodguyz.com/birmingham/
ToDo app tailwindcss Reactjs
Tags: react, beginners, tailwindcss
Published: 2020-05-25 06:36:18

---
title: ToDo app tailwindcss Reactjs
published: true
description: ToDo app
tags: react, beginners, tailwind
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0nfdgo3sfbi1w5sats4b.jpg
---

ToDo with [tailwindCss](https://tailwindcss.com/)
and [CRA](https://create-react-app.dev/docs/getting-started/)
[DEMO](https://tailwindtodoreact.netlify.app/)
jsx:
```jsx
import React, { useEffect, useState} from 'react';
import './styles/main.css'
import TodoForm from "./components/TodoForm";
import TodoList from "./components/TodoList";

const LOCAL_STORAGE_KEY = "react-todo-list-todos"

function App() {
    const [todos, setTodos] = useState([])

    useEffect(() => {
        const storageTodos = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
        if (storageTodos) {
setTodos(storageTodos)
        }
    }, [])

    useEffect(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todos))
    }, [todos])


    function addTodo(todo) {
        setTodos([todo, ...todos])
    }

    function toggleComplete(id) {
        setTodos(
            todos.map(todo => {
                if(todo.id === id) {
                    return {
                        ...todo,
                        completed: !todo.completed
                    }
                }
                return todo
            })
        )
    }

    function removeTodo(id) {
setTodos(todos.filter(todo => todo.id !== id ));
    }

    return (
        <div className="flex flex-col items-center h-screen bg-grey-300">
            <h1 className="mb-20 mt-3 text-5xl text-teal-600 underline font-mono text-lg ">React Todo</h1>
            <TodoForm addTodo={addTodo}/>
            <TodoList
                todos={todos}
                toggleComplete={toggleComplete}
            removeTodo={removeTodo}
            />
        </div>
    );
}

export default App;
```
Setting up an on prem function as a service
Tags: linux, kubernetes, devops, faas
Published: 2020-05-25 06:22:59

---
title: Setting up an on prem function as a service
published: true
description: Using openfaas and minikube we will create a  function as a service on prem. Function as a service is available for larger kubernetes systems and can be deployed in the cloud but being able to test locally can be benificial.
tags: linux, kubernetes, devops, faas
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/j25d3dc41lznjtemh2ph.jpg
---

{% youtube bnmg-j1ojpo %}

Using openfaas and minikube we will create a  function as a service on prem. Function as a service is available for larger kubernetes systems and can be deployed in the cloud but being able to test locally can be benificial.
ダイクストラ法 (Dijkstra's Algorithm)
Published: 2020-05-25 06:09:22

{% youtube 9h0UQoC2-JU %}

```js
let input = require("fs").readFileSync("/dev/stdin", "utf8");
const lines = input.trim().split("\n");

let v, e, r, path = []

for (let i = 0; i < lines.length; i++) {
  if (i === 0) {
    [v, e, r] = lines[i].split(" ").map((v) => parseInt(v));
    path = [...Array(v)].map(() => new Set());
    continue;
  }
  const [s, t, d] = lines[i].split(" ").map((v) => parseInt(v));
  path[s].add([t, d])
}

const parent = (i) => Math.floor((i - 1) / 2)
const leftChild = (i) => 2 * i + 1
const rightChild = (i) => 2 * i + 2

const MinHeap = function (n) {
  this.a = [...Array(n).keys()].map(v => [v, Number.MAX_SAFE_INTEGER]) // [vertex, weight]
  this.pos = [...Array(n).keys()].map(v => v)
  this.size = n
}

MinHeap.prototype.extractMin = function () {
  const [v, w] = this.a[0]
  this.swap(0, this.size - 1)
  this.size--
  this.popDown(0)
  return [v, w]
}

MinHeap.prototype.swap = function (i, j) {
  const vi = this.a[i][0], vj = this.a[j][0];
  [this.a[i], this.a[j]] = [this.a[j], this.a[i]];
  [this.pos[vi], this.pos[vj]] = [this.pos[vj], this.pos[vi]]
}

MinHeap.prototype.decreaseKey = function (v, val) {
  const i = this.pos[v]
  this.a[i][1] = val
  this.popUp(i)
}

// vertexが含まれているか
MinHeap.prototype.contains = function (v) {
  return this.pos[v] < this.size
}

// 適切な位置まで上げる
MinHeap.prototype.popUp = function (i) {
  let pi = parent(i)
  while (i > 0 && this.a[i][1] < this.a[pi][1]) { // 親が子より大きかったら交換
    this.swap(i, pi)
    i = pi
    pi = parent(i)
  }
}

// 値を取得
MinHeap.prototype.val = function (v) {
  return this.a[this.pos[v]][1]
}

// 適切な位置まで下げる
MinHeap.prototype.popDown = function (i) {
  const val = this.a[i][1]
  let candidate = null // 子供のほうが小さかったら交換
  const ri = rightChild(i)
  const li = leftChild(i)
  if (ri < this.size) { // right child exist
    if (this.a[ri][1] < val) {
      candidate = ri
    }
  }
  if (li < this.size) {
    if (candidate == null) {
      if (this.a[li][1] < val) {
        candidate = li
      }
    } else {
      if (this.a[li][1] < this.a[ri][1]) {
        candidate = li
      }
    }
  }
  if (candidate != null) {
    this.swap(i, candidate)
    this.popDown(candidate)
  }
}


function dijkstra(n, r, path) {
  const minHeap = new MinHeap(n)
  const dist = Array(n).fill(null)
  const parent = Array(n).fill(null)

  // initialization
  minHeap.decreaseKey(r, 0)
  dist[r] = 0

  while (minHeap.size > 0) {
    const [u, d] = minHeap.extractMin()
    for (const [v, w] of path[u]) {
      if (!minHeap.contains(v)) {
        continue
      }
      if (d + w < minHeap.val(v)) {
        parent[v] = u
        dist[v] = d + w
        minHeap.decreaseKey(v, d + w)
      }
    }
  }

  for (const d of dist) {
    if (d == null) {
      console.log('INF')
    } else {
      console.log(d)
    }
  }
}


// console.log(v, e, r)
// console.log(path)
dijkstra(v, r, path)
```

## 問題

* http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=GRL_1_A&lang=ja
How to Use Custom (Letter) User Avatars in WordPress
Published: 2020-05-25 06:06:27

By default, WordPress shows Gravatar image of the users as their profile picture. If a person is not having a Gravatar account, he or she can choose from the default avatar types on the site.

Do you want to create unique avatars for all users? It should display the first letter in username instead of their photo or generic logo.

WP User Avatar is the most popular <a href="https://www.bloggingtriggers.com/custom-user-avatar-plugins-wordpress/" target="_blank" rel="noopener"> user avatar plugin </a>for WordPress to enable Gravatar or local avatars in WordPress. It is a simple, light-weight plugin that doesn't affect your page loading time anyway.

If you want to show custom or letter avatars 

After installation, it will add a new submenu in your WordPress dashboard. Open Settings > WP First Letter Avatar to configure the plugin.

Letter index field shows 0 as default. It means users will get the first letter in their name as avatar image. If you want to replace it with the second letter in the user's name, enter '1' there. '-1' represents the last letter in the user's name.

Specify your file format, image name for unknown users, avatar directory in the following fields. To allow Gravatar users to use their respective profile images, check 'Use Gravatar' box. If you want to replace everything with first letter avatar, uncheck the box.

Round avatars is the next option. It allows you to show rounded avatars for all users. But the feature may not work sometimes as your theme may override this setting. Plugin filter priority lets you set priority for WP First Letter Avatar over other similar plugins. The value '1' indicates top priority whereas '10' represents lower priority.
FRONTEND DEVELOPER GUIDE - PART 2
Tags: html, css, javascript, frontend
Published: 2020-05-25 05:47:21

Welcome to part 2 of my blog series!

---

### PROJECTS TO BUILD ###

This part is going to focus on just some recommendations about building front-end web dev projects. They are going
to scale as the list goes down.

* Make your own site using just HTML/CSS. No frameworks and no JavaScript. Write the code yourself.
* Clone one template from [here](https://www.free-css.com/free-css-templates) using just HTML/CSS.
* Create a "Simon says", "Towers of Hanoi" or "Tick Tack Toe" game (HTML/CSS/JS).
* Clone [this](https://creativemarket.com/ikonome/686585-Material-Resume-Blue/screenshots#screenshot2).
* Do [CSS Zen Garden](http://www.csszengarden.com/).
* Sign up for [freeCodeCamp](https://www.freecodecamp.org/). Do just the front-end projects, skip the tutorials.
* Recreate your website using Vue, React and Angular.
* Clone [this](https://demos.creative-tim.com/vue-paper-dashboard-pro/#/admin/overview) dashboard using a framework of your choice.
* Write your own CSS grid system.
* Clone Reddit.
* Clone Twitter.
* Clone Facebook.
* Clone the Netflix landing page.
* Clone Spotify.

---

Some more resources that list projects:
* [P1xt Front End Speedrun](https://github.com/P1xt/p1xt-guides/blob/master/speedrun-practice/frontend-dev.md)
* [10 JS projects you can do](https://skillcrush.com/2018/06/18/projects-you-can-do-with-javascript/)
* [JS Projects and practical uses](https://dev.to/yaphi1/javascript-project-ideas-and-practical-uses)
* [100 JavaScript Projects](https://github.com/jessabean/100-javascript-projects)
What are constructor functions?
Tags: react, constructor, functions, javascript
Published: 2020-05-25 05:43:39

Constructor functions have, at least to me, one of the coolest names in programming. The first time I had to explain to someone what constructor functions are, I got all gitty because I just got to use the word `constructor`.

Enough of the bullshit. This post will focus on how constructor functions are use in JavaScript
and React. To use my own reasoning for what they are: *Constructor functions are functions that are called only once* usually at the start of a script **or** in React terms when a component is loaded, we use a constructor functions to set the state of that component, usually using props which have been passed to that functions.

Constructors are functions, but have a few different properties to regular functions:

- They are executed with the `new` keyword.
- They start with a capital letter.

What does the `new` keyword do? Well when used it creates an `object` and binds it to `this`, the body of the new functions is ran, which also changes the `this` with new values, properties...

```javascript
function Animal(species) {
  // this = {};

  // add properties to this
  this.species = species;
  this.size    = 'big';
  this.legs    = 4;

  // return this;
}

let animal = new Animal('Dog');
```

In short they are used to *create AND initialize an object within a class* while most other functions are created and then need to be called with certain parameters.

---

## CONSTRUCTORS IN REACT ##

Because I haven't personally so far used constructors in any other framework other than React I would like to also explain my own reasoning for how React uses them. React used to have a function called `getInitialState` which I happen to still use daily on my job. This function was replaced by just a regular `constructor` for setting a component's state.

```javascript
//Old way
getInitialState(){
  return {
    name    : this.props.name,    //this.state.name
    surname : this.props.surname, //this.state.surname
    age     : this.props.age      //this.state.age
  }
}
```

```javascript
//Current way
constructor(props){
  super(props)
  this.state = {
    name    : this.props.name,    //this.state.name
    surname : this.props.surname, //this.state.surname
    age     : this.props.age      //this.state.age
  }
  //Any other variable you want to define for when state loads
}
```

You will most likely find the second way more often now, unless you are reading some legacy React code, but essentially both ways are the same with slight differences, like you having to use `super(props)` to refer to that component's parent class constructor. Or in more simple terms you are refering to the parent of that component, which also has a constructor.

Thank you for reading!
Free Learning Resources
Tags: webdev, learning
Published: 2020-05-25 05:35:07

So, you want to learn Programming, but you don’t know where to start? This is the article for you.

Let’s start! 🚀

* FreeCodeCamp [freecodecamp.org] (https://www.freecodecamp.org/)
* Codecademy [codecademy.com](https://www.codecademy.com/)
* JavaScript30 [javascript30.com](https://javascript30.com/)
* Frontend Mentor [frontendmentor.io](https://www.frontendmentor.io/)
* Test Automation University [testautomationu.applitools.com](https://testautomationu.applitools.com/)
* Coursera [coursera.org](https://www.coursera.org/)
* Code Wars [codewars.com](https://www.codewars.com/)
* Khan Academy [khanacademy.org](https://www.khanacademy.org/)
* Flatiron School [flatironschool.com](https://flatironschool.com/)
* Sololearn [sololearn.com](https://www.sololearn.com/)
* MDN Docs [developer.mozilla.org](https://developer.mozilla.org/en-US/)
* W3Schools [w3schools.com](https://www.w3schools.com/)

If you liked this article, be sure to ❤️ it.

This article is a repost from my blog. Find the original post here: [List of Free Learning Resources](https://markodenic.com/list-of-free-learning-resources/).

Let's keep in touch:
Blog: [markodenic.com](https://markodenic.com/)
Twitter: [@denicmarko](https://twitter.com/denicmarko)
Github: [github.com/MarkoDenic](https://github.com/MarkoDenic)
Codepen: [codepen.io/denic](https://codepen.io/denic)
How much of NodeJS is enough ?
Tags: javascript, node, react, webdev
Published: 2020-05-25 05:32:03

Back in January this year I started learning NodeJS.
I have developed many application while working with Modules like 
Sockets,EJS,Passport, Express,Mongoose,Express-valditor, Body-Parser ...

I have worked on Session management, CRUD Operations ,Real Time Chat Application ,Secure Login with PassportJS

And the main point is now I want to start learning react as at industry level most of them looking for MERN developers So am I ready to go to react or still I need to spend some time with Node.
My GitHUB <a href="https://github.com/vickyktk">Profile</a>

Thanks in Advance !!!