teleren/devto huggingface dataset:
Can i get a review or tips for my portfolio website?
Tags: portfolio, webdev, website, review
Published: 2020-05-04 08:46:49

Hello everyone!

I'm graduating this year and got hired by a company through campus placement. But due to quarantine(coronavirus) joining is to be delayed. 

So I decided to work as a freelancer developer and joined Upwork. But so far got one project only. Then due to lack of works, I decided to build a small personal website for myself. So i can get more projects but no luck.

LINK: https://keshavjha.me. 

It's built using HTML,CSS(SCSS),JQuery(masonry) and hosted on netlify.

I want you guys to review my portfolio and tell me, where do i lack or can improve. Also any suggestion for self improvement to get better opportunities are welcome.

Thanks in advance.
Creating a floating label using HTML and CSS
Tags: css, beginners, webdev, tutorial
Published: 2020-05-04 07:57:42

Hello everyone 👋, I hope you are doing great.

So, Today we are going to learn **how to create a floating label using HTML and CSS** 😎.

##📄 HTML 
Let's first set up our HTML.
```html
<main>
  <form>
    <div>
      <input id="email" type="email" placeholder=" " />
      <label for="email">Email</label>
    </div>
    <div>
      <input id="password" type="password" placeholder=" " />
      <label for="password">Password</label>
    </div>
    <button>Login</button>
  </form>
</main>
```

##🎨 CSS
Now, let's set up our CSS.
```css
div {
  display: flex;
  flex-direction: column-reverse;
}

input {
  border: none;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 1.6rem;
  border-bottom: 0.2rem solid #bdbdbd;
  outline: none;
}

label {
  padding-left: 1rem;
  color: #bdbdbd;
  transform: translateY(4.8rem);
  transform-origin: left top;
  cursor: text;
}
```

Now, let's set up the ``input`` functionality when the ``input`` is focused.

```css
input:focus,
input:not(:placeholder-shown) {
  border-bottom: 0.2rem solid #212121;
}


input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  padding: 0;
  color: #212121;
  transform: translateY(2rem) scale(0.8);
}
```

That's It 😎.

Example

{% codepen https://codepen.io/bipinrajbhar/pen/wvKPEed %}

#📚 Further Reading:
* [:not](https://developer.mozilla.org/en-US/docs/Web/CSS/:not)
* [:focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
* [:placeholder-shown](https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown)

Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills 😊. You can follow me on [Twitter](https://twitter.com/Bipin_1598) if you’d like to be notified about new articles and resources.
How to generate PDF from web pages
Tags: pdf, php, python
Published: 2020-05-04 07:56:51

---
title: How to generate PDF from web pages
published: true
description: 10 years ago I used some PHP libraries to generate PDFs. It's time to move on
tags: pdf,php,python
---
*[Originally published on my blog](https://coding.napolux.com/how-to-generate-pdf-from-web-pages/)*

For a little project of mine **I had to generate PDF files from a fairly complex HTML web page**.

The original page was created in PHP, so I’ve looked at libraries like [dompdf](https://github.com/dompdf/dompdf) and [TCPDF](https://tcpdf.org/) I used many years ago. They’re still like 10 years ago… Not working well with CSS3 and tables.

After many tries the only library working fine was [WeasyPrint](https://weasyprint.org/). You can use in your Python projects or from the command line.

```
weasyprint https://napolux.com output.pdf
```

Perfect output and small PDF size. **Give it a try!**
SSL: What it is and types of SSL
Tags: ssl, security, websitesecurity, securesocketslayer
Published: 2020-05-04 07:06:48

SSL stands for __Secure Sockets Layer__. It is a way to keep the communication between a client and server secure and hence it safeguards data that is transferred between the two machines. It prevents a hacker from reading or modifying any information that is being transferred, which might include personal information.

It is one of the most widely used cryptographic protocol to provide security over internet communications. Hence, it provides a secure channel for the machines or devices to talk to each other. This turns the website's address from __HTTP__ to __HTTPS__. HTTP is insecure and is liable to eavesdropping attacks as the data that is getting transferred from client to the server is transmitted in plain text. Hence the hacker can easily interpret and view sensitive information. SSL ensures that this data is encrypted and is secure from interception.

__Benefits of SSL certification__
Eliminates the risks of cyber attacks
Ensuring secure communication between client and server machines
Protects user sensitive information
Increases organization's reputation online
Ranking benefits by Google to SSL enabled websites

__Types of SSL certificates__
SSL certificates are categorized based on different validation levels. These offer the same level of encryption but the validation requirements are different. 

__Extended Validation (EV) certificates__
These require highest degree of vetting to obtain. These not only verify domain ownership but also require a significant amount of information from the organization. The issuance process is defined in the EV guidelines. This set of guidelines require that the entity has a legal and operational existence, its identity matches the records, it holds rights to use the domain, etc.

__Organizational Validation (OV) certificates__
This require less stringent requirements to obtain.  Here the Certificate Authority (CA) validates the domain and company ownership and also requires some additional information. It gives an enhanced legitimacy by adding company name to the URL address bar.

__Domain Validation (DV) certificates__
This is the most popular certificates used and is the easiest and cheapest one to use. Here the CA validates the domain ownership but does not require any additional information. Despite this fact, all data is secure under this certificate also.
Bad Version Problem
Tags: coding, javascript
Published: 2020-05-15 08:42:49

---
title: Bad Version Problem
published: true
date: 2020-05-04 06:37:51 UTC
tags: coding,javascript
canonical_url: https://sunilhari.in/blogs/coding-problems/bad-version/
---

Today we will try to solve a classic problem `Bad Version`

> Suppose you have n versions `[1, 2, ..., n]` and you want to find out the first bad one, which causes all the following ones to be bad.You are given an API bool isBadVersion(version) which will return whether version is bad. Implement a function to find the first bad version. You should minimize the number of calls to the API.

To get better clarity lets look at an example.Lets assume we have 10 versions which means in this case `n=10`;Lets also assume that we have this following results

```
isBadVersion(3); // => false
isBadVersion(5); // => true
isBadVersion(4); // => true

```

This clearly tells that starting from `4` all the versions are bad.So our output should be `4` which is the first bad version.

Now that we are clear with what we have to achieve lets device an approach to solve this.Yes we can easily solve this by looping from `0` to `n` and running `isBadVersion` api for each of those.But that would turn out to be expensive and it can lead up to atmost n calls of our api.So lets analyze what do we have so far.We have an array of integers and it has versions which starts from `[1,2,...n]`.

> Yes you guessed it right.The array is sorted in ascending order.So now the problem boils down to finding an element from sorted array.

! Hurray the classic solution to find an element from a sorted array is none other that the great [`Binary Search`](https://www.geeksforgeeks.org/binary-search/).So instead of looping through the entire array,we divide the array into two separate chunks and we will pick either of two sides based on where we have `isBadVersion true`.We will repeat this process and finally zero in on the element we are interested in.

```
/**
 * isBadVersion
 *
 * @param {number} version number
 * @return {boolean} whether the version is bad or not
 */
function solution(isBadVersion) {
  /**
   * @param {integer} n - Total versions
   * @return {integer} The first bad version
   */
  return function(n) {
    let start = 0;
    let end = n;
    let mid = Math.floor(start + (end - start) / 2);
    while (start <= end) {
      mid = Math.floor(start + (end - start) / 2);
      if (!isBadVersion(mid)) {
        start = mid + 1;
      } else {
        end = mid - 1;
      }
    }
    if (!isBadVersion(mid)) {
      return mid + 1;
    }
    return mid;
  };
}

```

> If you feel this write up needs improvement/corrections,kindly raise a PR
Creative Hover Effects
Tags: webdev, css, codepen
Published: 2020-05-04 06:33:28

Over the weekend I created a collection of six creative hover effects for your inspiration. All of the effects are available on Codepen for easy copy-pasting below. [To try all of them, click here](https://wweb.dev/resources/creative-hover-effects)


##[Wave](https://codepen.io/Vincenius/pen/OJyxeaN)
![Wave Hover Effect](https://dev-to-uploads.s3.amazonaws.com/i/1ddrlqsttcgii900eyhs.gif)


____


##[Stripes](https://codepen.io/Vincenius/pen/NWGaZod)
![Stripes Hover Effect](https://dev-to-uploads.s3.amazonaws.com/i/mcin41l1xcm2g047jmp5.gif)

____


##[Curvy](https://codepen.io/Vincenius/pen/VwvMJNo)
![Curvy Hover Effect](https://dev-to-uploads.s3.amazonaws.com/i/cdn7tzlhtyxos4a2qgo9.gif)

____


##[Gradient](https://codepen.io/Vincenius/pen/vYNeoKL)
![Gradient Hover Effect](https://dev-to-uploads.s3.amazonaws.com/i/9c7ijrovz0fqyvm9ipii.gif)

____


##[Border](https://codepen.io/Vincenius/pen/bGVoPPq)
![Border Hover Effect](https://dev-to-uploads.s3.amazonaws.com/i/sev0tvgzvmxmphbxafbi.gif)

____


##[Stripes 2](https://codepen.io/Vincenius/pen/vYNeoyL)
![Stripes 2 Hover Effect](https://dev-to-uploads.s3.amazonaws.com/i/57v4q2qpmk82zsj0iti1.gif)
Working with Pug and Markdown in Vue-CLI
Tags: pug, markdown, vue
Published: 2020-05-04 06:33:23

Using Pug is as simple as `npm i pug-plain-loader pug`, and it will modify the Webpack config for you.

Using Markdown is a little harder. Usually, you might use [markdown-loader](https://github.com/peerigon/markdown-loader) (or [frontmatter-markdown-loader](https://github.com/hmsk/frontmatter-markdown-loader)), but what I suggest is you can inline Markdown in Pug (and can inline Pug in Markdown as well, as I ranted here.)

{% post https://dev.to/patarapolw/pug-with-markdown-is-magic-yet-underrated-4dla %}

You can do it using [Pug filters](https://pugjs.org/language/filters.html#custom-filters), but you will also have to modify [pug-plain-loader](https://github.com/yyx990803/pug-plain-loader#options) config. Inspect first.

```sh
$ vue inspect # or vue inspect > webpack.config.js
```

Now, look for `pug-plain-loader`. And [tap the webpack config in `vue.config.js` accordingly](https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader)

My solution is this,

```js
const dotProp = require('dot-prop')
const showdown = require('showdown')
const mdConverter = new showdown.Converter({
  simpleLineBreaks: true
})

module.exports = {
  chainWebpack: (config) => {
    config.module.rule('pug').oneOf('raw-pug-files').use('pug-plain').loader('pug-plain-loader')
      .tap((options) => {
        options = options || {}
        dotProp.set(options, 'filters.markdown', (s) => {
          return mdConverter.makeHtml(s)
        })
        return options
      })

    config.module.rule('pug').oneOf('vue-loader').use('pug-plain').loader('pug-plain-loader')
      .tap((options) => {
        options = options || {}
        dotProp.set(options, 'filters.markdown', (s) => {
          return mdConverter.makeHtml(s)
        })
        return options
      })
  }
}
```

`options` is actually `undefined`, BTW. For [dot-prop](https://github.com/sindresorhus/dot-prop), I use it so as not to override any config unnecessarily.

Now, `vue inspect` again, to double check your solution.

Now, you can use Markdown in Pug.

```vue
<template lang="pug">
.columns
  .column.is-8-desktop.is-offset-2-desktop
    .content
      :markdown
        # hello
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Home extends Vue {}
</script>
```

## Bonus

As I work with TypeScript and Vue a lot, and the default TypeScript Vue snippet (as in Vetur) is not what I wanted, so I created a new snippet.

[Find User Snippet in Preferences, and click it](https://www.youtube.com/watch?v=KC6T3_O2iWc).

![User Snippet VS Code](https://i.imgur.com/KPfpOfX.png)

Find Vue.

My `vue.json` is as follows.

```js
{
	"ts-property": {
		"prefix": "ts",
		"body": [
			"<script lang=\"ts\">",
			"import { Vue, Component } from 'vue-property-decorator'",
			"",
			"@Component",
			"export default class ${0:App} extends Vue {}",
			"</script>",
			""
		]
	}
}
```
Complete an NLP project from scratch in no time
Tags: machinelearning, tutorial, javascript, beginners
Published: 2020-05-04 06:22:39

Machine Learning is getting a hotter topic by the day. Many talk about it, but few know really what they are talking about. With so many resources and tutorials, it might get pretty overwhelming where to start from if you have no experience with the matter...

In case you have played with the idea of **making a Natural Language Processing project of your own**, we have just the right tips to share with you so you can kick it off on the right foot. Read on!

##The Experiment##
One of our junior engineers Dave recently became more and more fascinated by Machine Learning and really pondered on exploring this new and exciting field. Last week he decided to start a small project involving text by using the most common natural language processing and machine learning techniques to see where this would take him. 

Like you can imagine, as a total newbie in this field - he had to do a lot of reading and watching tutorials. :)

##The Resources##
For a couple of days, Dave had read tons of tutorials and watched numerous videos on the topic until he stumbled on a YouTube lesson from Alice Zhao on [Natural Language Processing in Python](https://bit.ly/3dfWdbI).

In contrast with all he had gone through, this recording was more focused on Data science workflow rather than on the coding part, libraries, etc. And suddenly it all made sense! Dave’s feedback after watching summarizes why you need to watch this video first: “It would have saved me hours reading and banging my head on the wall if I had found this on day one!”

##What is Data Science Workflow?##
Data science workflow refers to a process or iterative set of steps for solving cases and addressing complex data problems like:
* Text pre-processing (Document-Term Matrix)
* Exploratory Data Analysis (visualizations and stuff)
* Sentiment Analysis (TextBlob)
* Topic Modeling (Latent Dirichlet Allocation / nltk, gensim)
* Text Generation (Markov Chains)

In short, Alice’s lecture shows a very clear, practical, and funny way to begin and complete an NLP project from scratch - just watch it and don’t be afraid to try new things.

##Conclusion##
Dave began his journey without having a clue about where to start. Thanks to him sharing his story, you don’t have to! 

I would also like to share that all popular NodeJS Machine Learning technologies on NPM are supported on www.SashiDo.io. On top of that, only until **the 31st of May**, you can take advantage of our extended [45-day free trial](https://bit.ly/3aWXnYt) to begin your Machine Learning journey unrestricted and start building Smart APIs. 

Dave and the team will be happy to give you some hints on how to tackle any challenges you might face. ;)
JavaScript/Node.js Newsletter
Tags: javascript, node, newsletter, github
Published: 2020-05-04 05:58:38

---
title: JavaScript/Node.js Newsletter
published: true
description: JavaScript Newsletter that shares the latest industry news 📰, articles 📄, jobs 👷, tutorials 🎓, tools 🔧 and events 🎫.
tags: javascript, nodejs, newsletter, github
---

Hey Folks, 
I have created an [Open-Source JavaScript/Node.js Newsletter](https://github.com/the-newsletters/javascript), sharing latest industry news 📰, articles 📄, jobs 👷, tutorials 🎓, tools 🔧 and events 🎫.

You just have to **star** 🌟 the [repository](https://github.com/the-newsletters/javascript) and 🎉🎉🎉 you are subscribed.

[Link to the repository](https://github.com/the-newsletters/javascript)

Adding articles is also easier, just raise a PR adding your article to the issue .json file.
The 3G way: why invest in proactive people gives the best outcome
Tags: business, books, management, career
Published: 2020-05-04 05:45:26

_The 3G Way_ is a book by Francisco S. Homem de Mello, where the author gives us an overview of the way of management and culture of 3G Capital, a Brazilian-American multibillion-dollar investment firm. Trough these pages Fransisco describes what makes this company so successful. Let's take a look at this profitable approach.

3G capital has something that I'm definitely searching for in a company: Meritocracy. Instead of just rewarding people by their time in the company or general experience time, they choose to reward by their proactive and by how good work they are, no matter of time or hierarchy. Talented people are given credit just by their accomplishments.

And why is this concept so fundamental in a company? Simple, treat people in this way encourages proactiveness, competition and also makes the communication more open in general. You are sure that if you do a good job you'll definitely get something out of it.

Another way 3G capital uses to improve communication is informality. When you simplify the process of communication of let's say, a junior with a senior developer, you are letting this junior has more space to develop himself and most importantly, learn from experience with the hope that one day he also achieve a high position job.

Candor is another strong word in 3G capital's vocabulary. With the main goal of minimizing conflicts and make things simples, they invest in transparency where the information can be easily understood, without unnecessary complexity.

In short, the 3g way can be described as a method where you guide the worker to a more open space of thought, without complications and giving to him all the resources that he needs to be the best worker. If all of this work out you have a happy employee, proactive and able to handle different types of challenge. It's just the dream of all the workers I guess. Be recognized by doing his job, and doing it great.
How to run autocomplete(JEDI) inside virtualenv in vim
Tags: vim, python, virtualenv, autocomplete
Published: 2020-05-04 05:42:43

So, I basically switched to neovim and realized that autocomplete does not work when you're inside the virtualenv using the the vim editor
and as cumbersome as it is to find a solution online. I stumbled upon a workaround. 

```
# Make sure you have all the plugins installed
# open your ~/.config/.vimrc or ~/.config/nvim/init.vim with vim and type

:CocConfig

# you may see something like 
{
     "suggest.timeout": 5000,
     "python.pythonPath": "python"
# OR "python.pythonPath": "/usr/bin/python"
}

# the easiest workaround is to change "python.pythonPath": "python"
to "python.pythonPath": "python3"

{
    "suggest.timeout": 5000,
    "python.pythonPath": "python3"
}

# save this file and exit
# activate your virtualenv and check for yourself which python3 is your 
# vim currently using `:!which python3`

# This should definitely work till a permanent solution comes around.
```
JavaScript Secrets
Tags: webdev, javascript
Published: 2020-05-04 05:08:04

In this post I will share with you JavaScript tips you won’t find in most tutorials. Enjoy!

 
## What is JavaScript?
 

JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and so much more.

## Let's jump to the tips!

##* Shorten an array
You can set the length property to shorten an array.

![Shorten an array](https://dev-to-uploads.s3.amazonaws.com/i/34ywabblcnipp5bkjor7.png)

##* Short-circuits conditionals
If you have to execute a function only if condition is true, you can use short-circuit.

![Short circuit conditionals](https://dev-to-uploads.s3.amazonaws.com/i/o9weprvykowthv9v9po5.png)

##* Show specific console.table() columns
By default, `console.table()` lists all elements in each row. You can use the optional “columns” parameter to select a subset of columns to display:

![Show specific console.table() columns](https://dev-to-uploads.s3.amazonaws.com/i/a8yywh9eazw5ag6hs9lb.png)

##* Remove duplicate elements from the array:

![Remove duplicate elements from the array](https://dev-to-uploads.s3.amazonaws.com/i/megr1ihza9lmafs3zam9.png)

##* Convert a string to number:

![Convert a string to number](https://dev-to-uploads.s3.amazonaws.com/i/nshhbnksyqablxwiy8fl.png)

##* Convert a number to string:

![Convert a number to string](https://dev-to-uploads.s3.amazonaws.com/i/r51rmxu1ecxlf5t3qhqz.png)

You can find more HTML/CSS/JS Tips here: [github.com/MarkoDenic/awesome-html-css-js-tips](https://github.com/MarkoDenic/awesome-html-css-js-tips)

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

This article is a repost from my blog. Find the original post here: [JavaScript Tips](https://markodenic.com/javascript-tips/).

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)