teleren/devto huggingface dataset:
How to improve your website's preview cards on sites like LinkedIn. 
Tags: webdev, tutorial, html, beginners
Published: 2021-10-12 20:36:35

###The Intro###

You may have noticed that when you host a personal project and share it on LinkedIn or on most social networks, it usually doesn't show a description, title, or an image. And it typically looks something like this..

![Alt text of image](https://res.cloudinary.com/dlsacnkot/image/upload/v1634068752/Screen_Shot_2021-10-12_at_12.56.56_PM_kfsmuc.jpg)


This short tutorial will help you create preview cards for sites like LinkedIn so it can end up looking like this:

![Alt text of image]
(https://res.cloudinary.com/dlsacnkot/image/upload/v1634070420/Screen_Shot_2021-10-12_at_12.15.14_PM_copy_1_copy_2_v11q2i.jpg)

***
###The How-To ###

Here are 2 steps and resources that helped me create my first LinkedIn preview cards:

1. LinkedIn looks at the `<meta>` tags inside the HTML's `<head>` tags but it also looks for the meta tags that are "Open Graph Protocol" type. Below are the tags you will need to add **inside** the HTML `<head>` tags. You can read more about the Open Graph Protocol:  [here](https://ogp.me/) .

```

<meta property='og:title' content='My Title'/>
<meta property='og:image' content='URL to the image you want in the preview, LinkedIn recommends a 1.91:1 ratio (1200x627px)'/>
<meta property='og:description' content='This should be a very short description'/>

```

2.After Step 1 is completed, utilize LinkedIn's Post Inspector to see how it looks. Here is the link to the Post Inspector : (https://www.linkedin.com/post-inspector/)

___

### An Example ###

Here is what my code looks like:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="styles.css" rel="stylesheet">
    <script src="script.js" async></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atma:wght@300&display=swap" rel="stylesheet">
    <title>Kid's Halloween Memory Card Game</title>
    <meta property='og:title' content='Kids Halloween Memory Card Game'/>
   <meta property='og:image' content='Assets/Images/preview3.png'/>
   <meta property='og:description' content='A fun Halloween themed Kids Memory Card Game. The game has animations and music which kids will enjoy!'/>
</head>
<body>
```

***

###The End###
I enjoy sharing my knowledge and I hope this will help you with your LinkedIn cards! 🎉
Commit case-sensitive only filename changes in Git
Tags: git, github, webdev
Published: 2021-10-12 19:44:24

Suppose you have a folder name `Dashboard` you changed it to `dashboard` default configuration git doesn't recognize that change. Same things happens to files.

For that need to clean the cache, after struggle few hours I found a simple workable solution.

Here it is 

```
git rm -r --cached .
git add --all .
git commit -a -m "Versioning untracked files"
git push
```
[source](https://stackoverflow.com/questions/17683458/how-do-i-commit-case-sensitive-only-filename-changes-in-git)
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2021-10-12 19:23:15

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 


##  Take it away, Tech Twitter!

@pascavld came through with a great reminder that DEV is a great place to share both in-depth articles _and_ easily digestible resources — like this roundup of favorite recent tech-related tweets. 

{% link https://dev.to/pascavld/my-10-favorite-tech-twitter-tweets-from-the-past-week-3ab2 %}

## The Pyramid of Challenge

@theworstdev says that distributing challenges across a team is one of their personal top priorities when managing. Here's why...

{% link https://dev.to/theworstdev/distributing-challenge-on-building-highly-engaged-teams-2d3c %}

## The Responsibility of Accessibility 

"Many times, I've tried to find a comprehensive, yet, not too detailed technical first-temps guide to accessibility for the team. So I decided to put together this one." 
Great job with this, @alenanik!

{% link https://dev.to/alenanik/accessibility-a-gentle-introduction-1398 %}

## A friendly breakdown of REST & API

If you caught @whitep4nth3r's [talk at CodeLand 2021](https://community.codenewbie.org/whitep4nth3r/on-demand-talk-this-box-will-change-your-life-1jb5), you know that they have a knack for breaking down complex topics into fun and engaging lessons. This post is no exception!

{% link https://dev.to/whitep4nth3r/what-is-a-rest-api-51h %}


## (Informed) VSC Opinions

@neer17's hot takes on Visual Studio Code may or may not accord with your own thoughts. Either way, this post is worth a read!

{% link https://dev.to/neer17/opinionated-guide-on-tweaking-vs-code-for-productivity-1o53 %}

## ARIA First Development Approach

"In order to understand the tangled web of ARIA that is being seen in web development," says @steady5063 "we must first understand the first rule of ARIA."

Let's do it! 

{% link https://dev.to/steady5063/a-tangled-web-of-aria-50nk %}

## Game on

Video games are often what spark a software developer's interest in the field but the path of game development is often shrouded in mystery and misinformation. @unitybuddy is taking steps to change that with this article.

{% link https://dev.to/unitybuddy/become-a-game-designer-step-by-step-guide-90a %}



_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
Lead / Sr Full Stack Engineer
Tags: hiring
Published: 2021-10-12 19:22:42

## About Us
We power and protect events for the people who plan and attend them.  
We are VOW


## About The Opportunity
Saas Start-Up in need of experienced Full Stack Engineer for long-term engagement to dive into our all-in-one communication suite.  We have an active user-base for our application and are looking for engineers to help expand our feature-set.

We’re looking for a Lead / Senior Full Stack Engineer that can help us execute on our product roadmap. You will work as part of our Engineering Team.


## Skill & Qualifications
* Hands-on Technical Seniority and Execution
* Comfortable being in an Agile Development environment
* Highly motivated and able to provide areas for improvement/efficiency
* Full Stack Expertise (Infrastructure, API & DB, SASS/SCSS, Bootstrap 4, UI prototyping, Docker)
* We use Laravel Sail (PHP), Vue.js (Nuxt.js), MySQL & Secure File Storage
* Responsive web / mobile browser development
* Experience with messaging tools such as Twillio, MailGun
* CI/CD Expertise (currently using TeamCity & Github Actions) with cloud systems such as AWS, IBM Cloud, Digital Ocean, OVH, etc..
* A product/business approach to Product Development and Engineering
* Clear communication and availability to attend calls such as * Daily Stand Ups and Weekly Product Planning meetings
* Team player looking for collaboration in Product Development

Bonus
* Systems Admin (Unix/Linux) experience to help manage our AWS, Digital Ocean & third-party services (Cloudron, MailGun, Pusher etc…)
* Chat systems such as Matter Most, RocketChat


## How To Apply
Please e-mail your resume/CV, Code Repo (GitHub, etc..) and LinkedIn/Website URL to development@vow.app


_Please feel free to leave questions in the comments section._
Rescript React Lifting Component state
Tags: rescript, react
Published: 2021-10-12 19:20:18

Let's see how lift state in rescript

Let's assume there is button component which increments count like below

```
// button.res
type action =
    | Add

type state = {
  count: int
}

let reducer = (state, action) => {
    switch action {
        | Add => {count: state.count + 1}
    }
}

let getInitialState = () => {
    let initialState = {
       count: 0
    }
    initialState
}

let make = (state, dispatch) => {
    let onClick = () => {
        dispatch(Add)
    }

    <button onClick>{React.string("add")}</button>
}

```

Now we want to use the component in a parent component, which uses the component but also wants to store the state of the child in it. One of the way I figured is like below, in two steps
1. One of the parent action would be variant encapsulating the child action
2. dispatch which is passed to the child component here button would take the child action and encapsulate in the parent action and dispatch to the parent state

You can see the above steps in action below

```
// parent
type action = {
    | Text(string)
    | Button(Button.action)
}

type state = {
    text: string,
    buttonState: Button.state
}

let reducer = (state, action) => {
    switch action {
        | Text(text) => {...state, text: text}
        | Button(action) => 
            let {buttonState} = state
            let newButtonState = Button.reducer(buttonState, action)
            {...state, buttonState: newButtonState}
    }
}

let getInitialState = () => {
    let initialState = {
        text: "",
        buttonState: Button.getInitialState()
    }
    initialState
}


let make = () => {
   let {state, dispatch}  = React.useReducer(reducer, getInitialState())

    let childDispatch = (action: Button.action) => {
    dispatch(Button(action))
    }

    let onChange = () => {
        
    }

   <div>
    <TextInput onChange=onChange value=state.text />
    <Button state=state.buttonState dispatch=childDispatch />
   </div>
}
```
Hope this helps!
Monitor Docker containers using SAM and cAdvisor
Tags: sam, discuss, docker, analytics
Published: 2021-10-12 19:10:10

[cAdvisor](https://github.com/google/cadvisor) (short for **c**ontainer **Advisor**) analyzes and exposes resource usage and performance data from running containers. cAdvisor exposes Prometheus metrics out of the box. 

https://prometheus.io/docs/guides/cadvisor/

Prometheus is integrated in SAM. This makes it possible to leverage the cAdvisor metrics and expose them via Prometheus and Grafana.

Since cAdvisor listens on port 8080, which conflicts with the Nginx port, you can choose to change the Nginx port to accommodate that.

Configuration Steps:

1. Change nginx port.

modify nghix.conf:

    server {  
        listen 9991; 

This allows you to access cAdvisor UI via http://server:8080/, which comes with many example dashboards.

2. Configure docker-compose to add cAdvisor container:

in docker-compose.yml, add the following:

  cadvisor:  
    image: google/cadvisor:latest  
    ports:  
      - 8080:8080     
    volumes:  
      - /:/rootfs:ro  
      - /var/run:/var/run:rw  
      - /sys:/sys:ro  
      - /var/lib/docker/:/var/lib/docker:ro

3. Configure prometheus to add job for cAdvisor:

modify isc_prometheus.yml and add:

- job_name: cadvisor  
  scrape_interval: 5s  
  static_configs:  
  - labels:  
      cluster: "1"  
      group: node   
    targets:  
    - cadvisor:8080

You're done! To make sure prometheus is pulling cAdvisor metrics, go to prometheus UI http://server:9090/, under Status->Targets, you should see the cAdvisor endpoint and status.

you can download some excellent pre-built dashboards with cAdvisor metrics, just need to add the cluster parameter in each query.

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zhv1outo3xu5x1b7r6g.png)
Electron Adventures: Episode 80: Svelte Unicodizer Package
Tags: javascript, electron, svelte
Published: 2021-10-12 19:00:30

In previous episode we created a Unicodizer app. Now it's time to package it!

### Import

Let's try to follow the same steps, and use Electron Forge importer:

```shell
$ npm install --save-dev @electron-forge/cli
$ npx electron-forge import
```

That instantly causes problem that `rollup` wants `npm run start` to run `sirv public --no-clear`, and Electron Forge wants to take it over for `electron-forge start`. So let's edit scripts section to support all commands:

```javascript
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear",
    "electron": "electron .",
    "forge-start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
```

### `index.js`

Before we start packing anything, we can already notice that `index.js` is trying to open `http://localhost:5000/`, which will not be there in packaged version.

We can use `app.isPackaged` to figure out which version we want.

```javascript
let { app, BrowserWindow } = require("electron")

function createWindow() {
  let win = new BrowserWindow({
    webPreferences: {
      preload: `${__dirname}/preload.js`,
    },
  })
  win.maximize()
  if (app.isPackaged) {
    win.loadFile(`${__dirname}/public/index.html`)
  } else {
    win.loadURL("http://localhost:5000/")
  }
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})
```

### Build

Now we need two commands to build the app. `npm run build` compiles Svelte code to `public/build/bundle.js` and `public/build/bundle.css`. `npm run package` creates an Electron package in `out`.

It would be more convenient if we could get it down to one command, but it's good enough.

### Results

Here's the results:

![Episode 80 Screenshot A](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4g4zhfmxp6bykirsjrj.png)

![Episode 80 Screenshot B](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0kl24i9w8o9223lm00o.png)

As usual, [all the code for the episode is here](https://github.com/taw/electron-adventures/tree/master/episode-80-svelte-unicodizer-package).

The series is still planned to go for full 100 episodes, but for now I'll be taking a couple weeks break. See you soon!
My mind wanders...
Tags: javascript, beginners
Published: 2021-10-12 18:58:00

I've purchased a couple of handy JS courses on Udemy and I like them but my mind does tend to wander.  I get distracted easily.  In fact doing this blog is me actually being distracted.
I wanted to try the FreeCodeCamp.org and I am at #106 of 111 so I am almost done but something happens to my brain when I almost get to the finish line.  It's like I don't want to finish.  I don't get it either.
I have a friend who didn't watch the final episode of LOST.  Who does that?

Anyways...  I have 5 more to go.  It's 1:33pm.
I'll continue this when I fisinh that last one.
But first I gotta pee.

I did more than pee...  I had lunch too.  It's 2:57pm and I just did 111/111 but damn...  I really don't get recursion just yet.  Ughhh
Make the materialUI TextField & Select look alike in the form
Tags: materialui
Published: 2021-10-12 18:48:24

const [place, setPlace] = useState("");


<Grid item xs={12} sm={6}>
<TextField
value={place}
onChange={e => setPlace(e.target.value)}
variant="outlined"
label="City"
select
>
{city.map((city, _id) => (
<MenuItem key={_id} value={city.name}>
{city.name}
</MenuItem>
))} 

{
city.map((city, ) => {

})
}
</TextField>
</Grid>
How To Become A Software Architect
Tags: career, architecture, security
Published: 2021-10-12 18:31:01

Cal Evans, Developer Evangelist at [Gun.io](https://bit.ly/3mLW9an), sat down with Keith Casey to discuss what it takes to become a Software Architect and how to make a career change into architecture.

Keith most recently worked on the Product Team at Okta. Previously, he served as an early Developer Evangelist at Twilio and worked on the Ultimate Geek Question at the Library of Congress.

Keith walks us through his own experience of transitioning to a new career from security to architecture and why everyone isn't fit for the role. We've broken down all of the key takeaways from the conversation [here](https://bit.ly/3iShMoe).
EuroPython 2021: All edited videos now available
Tags: europython, videos, python
Published: 2021-10-12 18:21:24

We’re happy to release another batch of 41 cut videos of [EuroPython 2021](https://ep2021.europython.eu/) covering the [third day sessions of the conference](https://ep2021.europython.eu/schedule/30-july) and a number of edited videos for the previous days. In total, we now have 118 videos waiting for you. You can watch them on [our YouTube channel](http://europython.tv/). We have created a [EuroPython 2021 playlist](https://www.youtube.com/playlist?list=PL8uoeex94UhFuRtXhkqOrROsdNI6ejuiq) for this.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rbw056oarddxod0gkdc.png)

## All EuroPython Videos
Our YouTube channel has videos of all EuroPython conferences going back to 2011. Check out [more than 1500 Python videos](https://www.youtube.com/playlist?list=UU98CzaYuFNAA_gOINFB0e4Q) covering 10 conference years.

In the coming weeks, we'll upload the EuroPython 2021 videos to [our archive.org channel](https://archive.org/details/@europythonvideos) as well.

Enjoy,
[EuroPython 2021 Team](https://ep2021.europython.eu/europython/team/)
[EuroPython Society](https://www.europython-society.org/)
[EuroPython 2021 Website](https://ep2021.europython.eu/)
Basic Intro to Markdown or .md
Tags: github, markdown
Published: 2021-10-12 18:07:23

### Hey there 👋, I am back with another interesting topic. Markdown. 
I will show you how to write markdown and where to write markdown.
## What is Markdown?
According to [www.markdownguide.org](https://www.markdownguide.org/getting-started/), it is a light weighted markup.
No need to remember this. It is basically a language or more precisely a markup language which use to document your code on github or sometimes people use it for their mathematical work. 

The work we do with some word editor like ms-word or google docs, we can do with it.
And remember different editor preview markdown differently.

## Where to write?
If you are fan of vs-code like me then, there is an extension for it so, there whatever you write you can preview it. [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced) 
If you don't use vs-code, no worry that's not end of world. You can use [StackEdit](https://stackedit.io/) for online mode or [Typora](https://typora.io/) for offline use.

## Basic Syntax of Markdown
### For Heading
```markdown
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

```
![Heading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7388dkimnu2n9dj5kfpc.jpg)

### Paragraph
```markdown
This is Paragraph
```
![Paragraph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjb8oh1oieel0y0ixxwi.jpg)

### Text Style
```markdown
This is **Bold** text.
This is *italic* text.
This is ***italic bold*** text.
```
![Text Style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vw52bo2ffbe9yzu4nj7p.jpg)

### Line 
``` markdown
***
---
___
```
![Line](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h73r9ctnca2wlwrj4vlm.jpg
)

### Blockquotes
```markdown
> Block Quotes
> > Nested Block Quote
> >> Another Nested Block Quote
```
![Blockquotes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2jdjygihph5bnx10omn.jpg)

### For Images
``` markdown
![Alt Text](Place image link here)
```
### For code 
![Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6qagra16i2m5z5pniiv.jpg)
A Next.js Starter configured with Nav and Animations
Tags: react, javascript, productivity, weddev
Published: 2021-10-12 17:49:43


Today I would like to share with you a minimally-styled Next.js Starter that I have created to help you scaffold your next single-page web project. It features a Navbar linked to 4 commonly-named sections, which you can fully customize yourself, as well as an animation component (Framer-motion) which you can use to reveal your HTML elements on-scroll.

You can view the github repository here:
https://github.com/EMurrell/next.js-singlepage-starter

And you can preview it here:
https://next-js-singlepage-starter.vercel.app

Like what you see so far? Then let's get started (this post assumes you are somewhat proficient or at least familiar with Next.js, TailwindCSS, Framer-motion and Node.js).

First thing's first, cd into your chosen directory and run the following command:

`npx create-next-app [your-project-name] -e https://github.com/EMurrell/next.js-singlepage-starter`

This will create a new Next.js application, using my repository as the example. Be sure to replace [your-project-name] with whatever it is you're going to call your project.  You can also ditch the square brackets.

At first, you'll notice some warnings in your terminal as the files are downloaded.  Don't worry, we'll install some dependencies and clear those right up for you. Once the downloads are finished, go ahead and cd into the project you just created. 

Now run `npm install` in your terminal. This will setup the dependencies we'll need, including Framer-motion and react-intersection-observer (which we use to reveal HTML elements upon entering the viewport.)

Last but not least, run `npm run dev` to start up your development server, and head on over to `localhost:3000` in your browser. 

You'll notice that the navigation links collapse down to a hamburger-menu on any screen size smaller than "lg". You can change that through the CSS utility classes in the Navbar component.

Rename, add, or remove the sections that are defined in const links = [...], also in the Navbar component, as well as in the "components" folder at the root of the project. (The 'section' components are imported into the index.js file).

Also in the components folder is a component called FadeUp.  You can wrap this component around an HTML element to make it "Fade up" into view. It is triggered on-scroll.  Treat it in much the same way as you would with framer-motion's "motion.div"s.  You can also customize the props values directly in the FadeUp.js file.

Alright there you have it.  She ain't much to look at yet, that part's up to you.  My intention for creating this starter was not to define the look of your project, but rather to save you some time and effort setting up some basic functionality.

Hope you enjoy playing around with it and creating your next amazing project.  Thanks for reading!
New Episode of WISDOM!
Tags: podcast, jokes, management, haskell
Published: 2021-10-12 17:13:32

Finally, unhinged conspiracy theorizing gets its place on the podcast (because major tech companies banned it)! Then Enoch Wise interviews Alex Kharlamov, engineering manager!

Check out our episode that dropped today!

{% spotify spotify:episode:2SxNVp6q9aCvnb6kWyvBGZ%}
USeful Chrome Extensions
Published: 2021-10-12 17:11:24

#Fake Filler 

Fake Filler is a forms to fill input fields on a page with randomly generated fake data. 

#Window Re-sizer

This extension re-size the browser's window in the to emulated various resolutions and devices.

#Notion Clipper 

Notion web clipper -you can save any page of website into your notion workspace.

#Daily Dev 

Daily.dev - news for Busy Developers. the extension keeps you up to date on the latest programming news.

#What Font 

What Font indentifies fonts on web pages.you can know the web fonts by just hovering on them. 

#React dev tools 

The extension adds React debugging tool to the chrome Developer Tools. It adds Components & Profiler tabs.

#Wappalyzer 

Wappalyzer is a technology porfiler that shows you what websites are built with.

#Web Developer

The Web Developer extension adds a toolbar button to the browser with varrious web developer tools.