teleren/devto huggingface dataset:
A Poor Man's Vue-SEO Solution 
Tags: vue, seo, handlebars
Published: 2019-07-01 09:49:32

Suppose you are just starting off with your latest side project. Vue enabled you to turn your idea into reality. And now you want the search engines to start crawling your brand new site. Of course the landing page is also built with Vue. For regular visitors this page loads fast and responds snappy, thanks to the optimized bundle webpack created for you. Only the web crawlers tend to prefer raw html and don't care what the page looks like visually.

Not willing to spend ages of your precious spare time on a full fledged SSR solution like nuxt or an almost even invasive prerenderer. Why not try to reuse the templates your end user is presented with a touch of NGINX magic added to the mix.

# Render static HTML from Vue templates

## Include Vue templates
First of all we need to teach Handlebars how to include external files
```javascript
const handlebars = require('handlebars')
const fs = require('fs')
const path = require('path')

handlebars.registerHelper('importVueTemplate', (relativePath) => {
  const absolutePath = path.join(__dirname, relativePath)
  const source = fs.readFileSync(absolutePath, 'UTF-8')

  // Peel out the template content
  const regex = /^<template>([^]*)<\/template>/

  let matches = regex.exec(source)

  return matches[1]
})
```
## Render markdown content
```javascript
const handlebars = require('handlebars')
const fs = require('fs')
const path = require('path')
const marked = require('marked')

handlebars.registerHelper('renderMdFile', (relativePath) => {
  const absolutePath = path.join(__dirname, relativePath)
  const source = fs.readFileSync(absolutePath, 'UTF-8')

  return marked(source, {
    sanitize: true,
    breaks: true,
    gfm: true,
    tables: true
  })
})
```
## Handlebars template
```html
<!DOCTYPE html>
<html>
  <head>
    <title>dochub - share the knowledge</title>
    {{! put all of your SEO tags here }}
  </head>
  <body>

    <header>
      {{#importVueTemplate '../src/components/LandingHeader.vue'}}{{/importVueTemplate}}
    </header>

    <main>
      {{#importVueTemplate '../src/components/LandingPage.vue'}}{{/importVueTemplate}}
    </main>
  </body>
</html>
```
## Compile to html in a build step
```javascript
let source = fs.readFileSync(path.join(__dirname, `/index.hbs`), 'UTF-8')
let template = handlebars.compile(source)

fs.writeFileSync(path.join(__dirname, '../dist/crawlers/index.html'), template({}))
```
# Serve static HTML to web spiders
Now we have to intercept web crawler traffic and redirect this to the static page we just created.
```javascript
location / {

  root /usr/share/nginx/html;

  # Enable history mode for Vue Router
  try_files $uri $uri/ /index.html;

  # Checking for top 8 web crawlers (see https://www.keycdn.com/blog/web-crawlers)
  if ($http_user_agent ~* (googlebot|bingbot|slurp|duckduckbot|baiduspider|yandexbot|sogou|exabot)) {
      root /usr/share/nginx/html/crawlers;
  }
}
```

Posted earlier on my own blog: https://boplicity.nl/knowledgebase/Vue/A+Poor+Mans+Vue-SEO+Solution.html
value Prop doesn't return integer 
Tags: valueprop
Published: 2019-07-01 13:28:00

valueProp returns String instead of Integer
      

key: 'dummy',
      type: 'select',
      templateOptions: {
        label: 'Select',
        options: [
          {label: 'one', value: 1},
          {label: 'two', value: 2},
          {label: 'three', value: 3},
          {label: 'four', value: 4},
          {label: 'five', value: 5},
          {label: 'six', value: 6},
          {label: 'seven', value: 7},
          {label: 'eight', value: 8},
          {label: 'nine', value: 9},
          {label: 'ten', value: 10},
              ],
            labelProp: 'label',
             valueProp: 'value'
      },
    },
First step
Tags: react
Published: 2019-07-01 13:15:46

---
title: First step
published: true
description: taking my first step...
tags: #react
cover_image: https://cdn.worldvectorlogo.com/logos/react-1.svg
---

Our journey towards our goal always begin with these tiny little pieces of progress. And that tiny little pieces serves as a building blocks to create something, something that seems too complex in the eyes of individual who always look on the whole picture instead of pixel.



My experience as a Front-End Web Developer in regards with learning is it always start with a small step like how we build our components in React it always begin on something really small. Something that we might not even notice. These small steps are the key to take bigger steps and another bigger steps and another and another and suddenly you just end up having a car so you won't get really tired taking too many steps.



To be honest I don't really know that much about ReactJS other than using components, state, and props or building a TODO list out of it. But I write. In reason for spreading my gift, talent, experience, knowledge, and wisdom that I've learned from the School of Hard Knocks. 



Salamat.
Hacker Slides markdown slides builder
Tags: showdev, opensource, reveal, productivity
Published: 2019-07-01 13:09:31

# Hacker Slides


Github https://github.com/msoedov/hacker-slides

Hacker Slides is a self hosted reveal.js markdown slides builder


### Features:
Reach ui editor
Markdown markup
Live reload
Color schemes
Pdf print
Tiny 10 Mb docker image
Optional Basic auth
Demo version
Congratulations! Today is the day you have been waiting for.
Tags: productivity, career, learning, advice
Published: 2019-07-01 12:43:40

---
title: Congratulations! Today is the day you have been waiting for.
published: true
description: Today my friend, is the day you take action. 
tags: productivity, career, learning, advice
canonical_url: https://rizwan-javaid.squarespace.com/blog/congratulations-today-is-the-day-you-have-been-waiting-for
cover_image: https://dzwonsemrish7.cloudfront.net/items/1I2y0u0e21352c2T2h1j/cover-today-is-your-day.gif?v=cdf2bdb4
---

Can you smell it in the air? 

Can you taste the sweetness? 

Do you feel it in the depths of your soul? 

That day in the distant future is here!

That day you’ve been waiting for is finally here!

The day you’ve been putting things off to is here right now. Today is the perfect day for you to get started. 

No more putting things off. 

No more procrastination. 

No more inaction. 

No more distractions. 

No more wondering maybe someday you will start. 

No more worry about what might happen. 

No more lost time. 

No more delays. 

Today is the day!

It’s going to be a wonderful day full of action. It’s going to be an amazing day of doing what you have wanted to do for a long time. You are going to amaze yourself in how much progress you make in one single day. It doesn’t get better than that.

I hope you’re well rested and energized because you are going to get in the zone pretty soon. Say no to the digital distractions and focus on what you want to do. Imagine the freedom that comes when you decide to take action.  

All you have to do is take the first step right now. Make it small. Make it actionable. Make it amazing! Make progress towards your goal no matter how small. 

Today is the day you have been waiting for. 

Now get out there and kick some butt like I know you can!


Need accountability? Share what you will start today. 

What have I been putting off? For a long time, I've been putting off updating my portfolio and will start working on it today. 

Today is the day!
Why you should know more WPCoffeeTalk podcast
Tags: internet, wordpress
Published: 2019-07-05 12:55:19

---
title: Why you should know more WPCoffeeTalk podcast
published: true
tags: Internet,WordPress,WordPress
canonical_url: https://kevinhq.com/why-you-should-know-more-wpcoffeetalk-podcast/
---

I found this WPCoffeeTalk some days ago when exploring a sub-Reddit for  WordPress. Though it has “Coffee” on its name, it did not make itself exclusively for coffee lovers only. It is for everyone who uses, loves, or even makes a living using this most popular CMS. Appreciate its inclusiveness At first, I thought: oh,… 

[Read More »Why you should know more WPCoffeeTalk podcast](https://kevinhq.com/why-you-should-know-more-wpcoffeetalk-podcast/)
Fixing Python Indentation
Tags: python
Published: 2019-07-01 10:13:39

Atimes or most times some of us face the problem of indentation when it comes to writing code in python. The weird thing is that despite the fact that you think you gave the right indentation in your code editor, popularly visual studio code, you still get stucked in an indentation error. This can be so frustrating because I can tell you confidently that I have experienced this so many times. Good news! I have a solution to any indentation problem you might face when coding with python, this solution works all the time, again I mean all the time. I have experimented this and I can confidently say it works all the time.


The first thing you should do is select all the code block and press shift + tab to align all the code block to the left then hit the tab button the number of times you want to indent to the right. That is it, your indentation problem just got solved. For multiple blocks of code repeat the step above by pressing shift + tab to align the blocks of the code to left and hit tab the number of times you want to indent to the right and that solves the indentation issue.
freeCodeCamp's Markdown Previewer project built in Elm
Tags: elm, freecodecamp, webdev
Published: 2019-07-01 09:40:35

---
title: freeCodeCamp's Markdown Previewer project built in Elm
published: true
description: 
tags: elm, freecodecamp, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/adod47hweec6qv06anbb.png
---

Last week I completed the [Markdown Previewer](https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer/) project in Elm.

Here's my [demo](https://dwayne.github.io/markdown-previewer/) and the [source code](https://github.com/dwayne/markdown-previewer).

Whether you choose to just read the code or to build the project you will learn the following:

1. How to use [elm-explorations/markdown](https://package.elm-lang.org/packages/elm-explorations/markdown/1.0.0/) to render [GitHub flavored Markdown](https://github.github.com/gfm/).
2. How to [edit and preview](https://github.com/dwayne/markdown-previewer/commit/4ca2369e731a82cb3d26f98c9d07d9db5d2ee32f) the Markdown in real-time.
3. How to [maximize and minimize](https://github.com/dwayne/markdown-previewer/commit/0aff16d333b415ab060597b3f8c645e2d1cc0c00) the editor and the previewer.

I'm curious. What are you building in Elm?
Webcron is useful to webmasters
Tags: cronjob, webcron
Published: 2019-07-01 09:34:58

---
title: Webcron is useful to webmasters
published: true
description: 
tags: cron job,webcron
---

Still using Linux Cron? Now you can switch to Easycron more powerful and easier-to-use webcron FOR FREE!

You're in no need to install any software (Cron, Crontab, task scheduler, etc) on your machine. We're "webcron". You will manage your cron jobs in a web interface.

https://www.easycron.com/

![](https://thepracticaldev.s3.amazonaws.com/i/xuj0husr29vn7dkrqmbo.png)

![](https://thepracticaldev.s3.amazonaws.com/i/k8wujguulzy5vr6kqw5z.png)
Add custom icons to Vue Unicons
Tags: vue, icons, githunt, opensource
Published: 2019-07-01 09:14:32

---
title: Add custom icons to Vue Unicons
published: true
description: Add custom icon to Vue Unicons
tags: vue, icons, githunt, opensource
cover_image: https://thepracticaldev.s3.amazonaws.com/i/evlccsevctbvzgpc5qf0.png
---

Vue Unicons is a 1000+ Pixel-perfect svg [unicons](https://github.com/iconscout/unicons) as Vue components. 

But if an icon is missing it's not a problem. You can add custom svg icons.

`custom-icons.js`

```js
// Always use a prefix to avoid coincidence with existing icons.
export const myCustomIcon = {
  name: 'my-custom-icon',
  path: '<path d="M16.327 10.775a.312.312 0 0...</path>' // Copy everything inside the svg tag of the icon you want and past there
}
```

> For correct positioning of svg icon please make sure that the icon to be added has `viewBox="0 0 X X"`

`main.js`

```js
import Vue from 'vue'
import App from './App.vue'
import Unicon from 'vue-unicons'
import { uniConstructor, uniCarWash } from 'vue-unicons/src/icons'
import { myCustomIcon } from './custom-icons'

Unicon.add([uniConstructor, uniCarWash, myCustomIcon])
Vue.use(Unicon)

new Vue({
  render: h => h(App)
}).$mount('#app')
```

`App.vue`

```html
<template>
  <unicon name="constructor" fill="royalblue"></unicon>
  <unicon name="car-wash" fill="limegreen"></unicon>
  <unicon name="my-custom-icon" fill="royalblue" />
</template>
```

{% codesandbox vue-template-t8y1l %}

{% github antonreshetov/vue-unicons %}
Maven or Gradle? What do you prefer?
Tags: discuss
Published: 2019-07-01 08:52:02

---
title: Maven or Gradle? What do you prefer?
published: true
tags: discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3ru03ujwms1g29fvqdmw.jpg
---

Which one do you prefer as a build tool?

I personally like maven, just because I have been using it for a long time.
Grover's algorithm without the Maths!
Tags: quantumcomputing
Published: 2019-07-01 08:48:07

I've built an intuitive explanation of Grover's algorithm which uses no maths at all to explain it :D

https://youtu.be/4EdQkk_cgzs

I feel pretty confident I got it right (intuition level) but feel free to let me know if it's BS ;)
Test Driven Development with Angular
Tags: angular, testing, webdev, javascript
Published: 2019-07-01 08:33:36

In this video, you will learn the basics of test-driven development while building a simple Angular web application. 

It will provide you with the confidence to use TDD for test-heavy environments such as corporate web application development. You will know exactly where to start and will have a working example of building entire features from scratch using TDD.

Throughout this course, you will build an app with a few simple features where for each feature you will write a test first, make it pass by adding code and then refactor to meet the standards. This course is perfect for developers who want to start using test-driven development and all of its benefits but struggle to write that very first failing test. 

{% youtube FDFn9ewY0Ko %}

**Thanks for reading** ❤
If you liked this post, share it with all of your programming buddies!
Follow us on **[Facebook](https://www.facebook.com/angular4u)** | **[Twitter]( https://twitter.com/moriohdotcom)**

### Further reading

☞ [Angular 8 (formerly Angular 2) - The Complete Guide](http://learnstartup.net/p/H1jE_tD3l "Angular 8 (formerly Angular 2) - The Complete Guide")
☞ [Best 50 Angular Interview Questions for Frontend Developers in 2019](https://morioh.com/p/3ab4f8d941e2 "")
☞ [How to build a CRUD Web App with Angular 8.0](https://morioh.com/p/f1893bcb9db8 "")
request-response pattern with socket.io, Am I using anti pattern ?
Tags: help, discuss
Published: 2019-07-01 08:26:27

---
title: request-response pattern with socket.io, Am I using anti pattern ?
published: true
description: 
tags: #help #discuss
---
Hello, I am building a chat app using socket.io. But something hit me.
Right now, I am re-implementing the request-response pattern with socket.io, because every time client send a message, I need to know whether the message is sent or not or timeout. But doing this I thought why not use http to send message ? But I remember that I want to avoid request overhead.

Am I using anti pattern here ? Am I doing thing the wrong way ?
Thank you
#PureCSS - Responsive Iron Man 2 Arc Reactor
Tags: codepen, css, purecss
Published: 2019-07-01 08:15:33

---
title: #PureCSS - Responsive Iron Man 2 Arc Reactor
published: true
tags: codepen,css,purecss
---

<p>Responsive Iron Man 2 Arc Reactor using CSS</p>

{% codepen https://codepen.io/AsyrafHussin/pen/XYpjjV %}
Setting up an SSH-tunnel using plink
Tags: ssh
Published: 2019-07-01 07:55:39

At our company, we can only connect to the outside world using the standard ports. Outgoing traffic to port 8081 is blocked by the firewall. This is a real pain in the ass. We need to publish our Javascript libraries to a Nexus instance. This instance is running in the cloud on, you guessed it, port 8081.

We are already using Jenkins pipelines to automate our workflow. The decision was made to add a new step to the pipeline: ssh-tunneling. Our Jenkins instance is running in Windows Server 2012 R2. Using bash to create a tunnel cannot be achieved. We took a look at Powershell to set up the SSH tunnel but it seems thatthe implementation of SSH in Powershell is not mature enough. Batch scripts to the rescue!

Most of us are using Putty to handle our SSH-sessions. The people who make Putty also make plink, a command-line interface to the Putty back-end. In combination with batch files we can create an SSH-tunnel like this:

```shell
plink -v -x -a -T -C -noagent -ssh -pw “password” -L 8081:our-nexus-instance.com:8081 username@our-nexus-instance.com
```

Let me explain the different flags used in the command above:

    -v : show verbose messages
    -x: enable X11 forwarding
    -a: enable agent forwarding
    -T: disable pty allocation
    -C: enable compression
    -noagent: disable use of Pageant (only needed when using SSH-keys)
    -ssh: use the SSH-protocol
    -pw: provide the password
    -L: forward local port to remote address

Using the -L flag we can map a local port to a remote port. This is done using the following syntax: <localport>:<remoteAddress>:<remotePort>. This is followed by the hostname we want to connect to, prefixed with the username, used to connect: username@remoteHost.

By inserting this command into our Jenkinsfile, we can open a tunnel to our remote Nexus instance:

```shell
stage(‘Publish’) {
 steps {
  bat “plink -v -x -a -T -C -noagent -ssh -pw ‘password -L 8081:our-  
       nexus-instance:8081 username@our-nexus-instance.com”
   }
 }
```
Development Tips for Software Peeps
Tags: tips, javascript, programming, development
Published: 2019-07-01 06:59:37

This is will be my very first post on [Dev.to](https://dev.to).
 
While it's really nice to be here, I believe it will be nicer if I could just add some value by pouring my hearts out about certain tips I think can help boost developer productivity.

I will be emphasizing on time management and **staying in ones comfort zone long enough to leap out of it.**

**Here they come!**

- ## Beware of commuting, it steals time.
Some of us already know this. For those that I have not observed, take note. It will be nice to just invest in a fast transportation system, live close to work or above all, work remote or half-remote than waste endless hours on the road when you could be working on something. That way, we might just be able to save some extra hours for self development each week.

- ## Commuting Steals Strength , focus and then time and productivity
While commuting could help stretch the bones, loosen some body bolts and improve **cardio** efficiency, there are times when it just messes things up with the stress and eventual fatigue that can come from being stuck in traffic. I try to reduce commuting as much as I can , most especially when I am in a busy city. I expect every developer to think of a way to deal with this.

- ## Don't Overthink A Project
There is a reason why some people chose to "Just do it" rather than over-plan a project or an idea until "they the idea fades out of possible execution". This is what happens when we over-think things through it. If you want to be really productive as a developer (or as anything else), it is just better to type away on a side project rather than just over-plan it before you put your hands to the keyboard. When you discover that the planning process is taking too long, I suggest you "just do it". While it is good to make a piece of software as **performant** as possible. I believe it is better to have an imperfect project than have none because an imperfect project can be improved. While this is a good tip, I only apply it to my side projects. Production Codes are a different ball game entirely.

- ## Stay in your comfort zone long enough to leap out of it
Just because your project is better coded in another language does not make it impossible in your present skill set, at least not all the time. If this is the case for you, would it not be nice to at least have a portfolio with projects than have none or one with scanty projects because you want to build the most **performant** code ever. If you have the time to learn something new, fine!, go ahead but if you don't , I suggest you use your present skills , learn later when the time is there and then come back to improve whatever you have done.

Thanks for reading it all.  I hope someone found these tips useful.
CSS Battle #7 - Leafy Trail
Tags: html, css, webdev, tutorial
Published: 2019-07-01 06:49:58

Here is the [seventh one][1]. Half of the challenges are behind. This one is the first to reuse the colors of the previous task, [number five][2], to be precise. Anyways, I really like the composition of the colors used throughout the battles and hope one day to be cool with colors.

## 1. Z-Index

The first solution relies on the precise placement of the `divs`. First we describe a common `div` with its `width`, `height` and `border-radius` and afterward, we use `position: absolute` to allow positioning regardless of the neighbor elements. The `absolute` here can be safely replaced by `fixed` to save some characters if you fancy. Now to stack the elements we use `z-index` yet again. You know, the higher the number, the more is the element on the front. And since we already defined our content box with `padding: 75px` on the `body`, our only movements will be playing around with the left margins.

```css
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

<style>
  body {
    margin: 0;
    background: #0B2429;
    padding: 75px;
  }
  div {
    width: 150px;
    height: 150px;
    border-radius: 100px 0;
    position: absolute;
  }
  #a {
    background: #1A4341;
    z-index: 1;
  }
  #b {
    background: #998235;
    z-index: 2;
    margin-left: 50px;
  }
  #c {
    background: #F3AC3C;
    z-index: 3;
    margin-left: 100px;
  }
</style>
```

## 2. Box Shadows

If somebody will ask, what I've learned from doing the CSS battle, I'd probably respond with "Box Shadows". This single technique keeps appearing throughout the challenges, often resulting in shorter solutions. And mostly these solutions also appear more idiomatic to me personally.
Here again, we use box shadows. The only gotcha here is that each subsequent shadow is placed behind the previous one, so to achieve the wanted appearance we should start with the rightmost leaf.
Notice how some of the values are defined with `vh` and `vw` - that is to save the battle characters. In the end, `50vh` is one character shorter than `150px` and doing this trick 4 times in our case, we save 4 characters.

```css
<div></div>

<style>
* {
    background: #0B2429;
}

div {
    background: #F3AC3C;
    width: 50vh;
    height: 50vh;
    border-radius: 25vw 0;
    margin: 75px 167px;
    box-shadow: -50px 0 #998235, -25vw 0 #1A4341;
}
</style>
```

Which one of these solutions would you prefer? Do you know any others?

[1]: https://cssbattle.dev/play/7
[2]: https://dev.to/pheeria/css-battle-5-acid-rain-1jf9