teleren/devto huggingface dataset:
Some Emmet Magic Frontend Devs should know
Tags: html, productivity, emmet, markup
Published: 2020-07-20 13:13:00

I would like to share some examples of useful Emmet commands that heavily speed up my markup creation - and maybe yours too.

If you haven't heard of Emmet before, see this [awesome introduction to Emmet](https://dev.to/lalawuhan/emmet-love-4be5) by [Thabi](https://dev.to/thabisegoe). Emmet is integrated in most code editors by default, so maybe you're using it right now without knowing it's Emmet under the hood 😅. In VS Code e.g. you just have to type the Emmet abbreviation and hit <kbd>TAB</kbd> to create the markup.


## Document creation

```emmet
doc
```

![Screencast Emmet command doctype](https://dev-to-uploads.s3.amazonaws.com/i/r4pziy8yn8epkfmktyu3.gif)

No need to write the whole doctype yourself. Each HTML file can be kickstarted by simply typing `doc` and hit <kbd>TAB</kbd>.


## Table creation

```emmet
table>#row$*3>[colspan=2]
```

![Screencast Emmet command table](https://dev-to-uploads.s3.amazonaws.com/i/ft9xsgitq10w6nn03zq9.gif)

Emmet inserts implicit tag names here (such as `tr` and `td`) and you can simply multiply elements and apply the current iteration number to e.g. the elements id with the `$` sign.


## Form creation

```emmet
form:post>(select>opt[value=$]{#$$}*4)+btn:s
```

![Screencast Emmet command form](https://dev-to-uploads.s3.amazonaws.com/i/q674167o7mc9tmepodfg.gif)

There are also a lot of aliases, that massively reduces the number of characters you have to type, e.g. `btn:s` instead of `button[type=submit]`. Also you can force leading Zeros with multiple `$` signs.


## Generic content

```emmet
ul.generic>lorem6.item*5
```

![Screencast Emmet command generic content](https://dev-to-uploads.s3.amazonaws.com/i/v2ozlo92sqfjivi0ytrl.gif)

In case you just create HTML layout demos, the `lorem` abbreviation comes in very handy, followed by the number of words the sentence should consist of.


## Bonus: Abbreviation Wrap in VS Code

If you're changing existing markup rather than creating it from scratch (which is probably almost always the case), you can make use of VS Code's command *Emmet: Wrap with Abbreviation*. Here you can select some content and wrap it with the desired tags by using Emmet Syntax:

![Screencast Abbreviation Wrap in VS Code](https://dev-to-uploads.s3.amazonaws.com/i/66l307elpgr2swrbehd7.gif)

Plus: Setting a keyboard shortcut for this feature saves a lot of time! On my Windows machine, I configured <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>E</kbd>

![Screenshot of VS Code Shortcuts Setting for Emmets Abbreviation Wrap](https://dev-to-uploads.s3.amazonaws.com/i/vggdjizoybkjaiwe3hjx.png)

## Wrap it up

We've seen, that there are a lot of abbreviations that speed up the process of creating markup. This is especially useful, when you're creating a lot of markup by hand.

Check the [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/) if you want to learn more. Happy coding!

---

*Published: 20th July 2020*
Laravel IP Whitelisting
Tags: laravel, package, security, ipblocking
Published: 2020-07-20 13:09:49

######Simple Laravel Package to increase the security of the website by permitting access for users having whitelisted *IP Addresses*.

######In this package, you can add *IP Addresses* into whitelist which you want to allow access to your site. All other users coming from IPs that are not in the whitelist will automatically be blocked and won't access the site.

#####*Check out the package: [Laravel IP Whitelisting](https://github.com/patelparixit07/ipwhitelisting)*
Becoming a Self-Taught Programmer: Cory Althoff Interview
Tags: python, django
Published: 2020-07-20 13:09:09

Cory Althoff is the author of “The Self-Taught Programmer” book and the founder of the Coding List, who has worked as a software engineer at eBay, as well as several startups in Silicon Valley. The Self-Taught Programmer is a book with a full curriculum to become a self-taught coder in Python, using a non-traditional approach: learn code first and theory second. It is a guide that takes you from writing your first Python program, to passing your first technical interview.

More and more people are becoming self-taught programmers nowadays, and, thinking that this trend will only continue, we decided to discuss with Cory the hardest things for new developers. He told us if it is reasonable for a new developer to learn and practice both frontend and backend development, and what kind of projects new [Python](https://evrone.com/python) developers can expect at the beginning of their careers.

[Learn more beginner tips for learning programming in the interview](https://evrone.com/cory-althoff-interview)
set vs unordered_set..
Tags: cpp
Published: 2020-07-20 13:04:45

when we compare the time complexity of set(O(log n) and unordered_set(O(1)),set seems to be slower as compared to unordered_set. 
But in real life set is said to be more efficient to use as unordered_set (initially)uses  hash function hash(n)=n which will  lead to large no of collision and make the program inefficient.
on the other hand set uses self-balancing BST for the orderness of the elememts and its worst case complexity is O(log n).


note:- in case you can't afford (log n ) time complexity you can write your own efficient hash function.
The Building an Indie Business- The Benefits of Podcasting (Part 2)
Tags: podcast
Published: 2020-07-20 12:59:15

<p><a href="https://podcasts.google.com/feed/aHR0cHM6Ly9hbmNob3IuZm0vcy85YjAyYzM4L3BvZGNhc3QvcnNz/episode/ZjkwMmU5MjQtOTUyMC00MjliLWI0NjctZGQ4MWU1ZWU5ZTIy?ved=0CAQQ8qgGahcKEwjQteyA8dvqAhUAAAAAHQAAAAAQAg">Listen here</a></p>
<p>In this episode, I discuss the benefits of podcasting.</p>
<p><strong>Show Notes:</strong></p>
<p><a href="https://blog.openpodcast.xyz/podcast-book/">Buy the book I wrote</p>
<p><a href="https://gum.co/xczrxd">Get a free list of the tools I use to make the podcast</a></p>
<p><a href="https://forum.openpodcast.xyz">Open Podcast Forum</a></p>
<p><a href="https://blog.openpodcast.xyz">Open Podcast Blog</a></p>
<p><a href="https://Openpodcast.xyz">Open Podcast Website</a></p>
<p><a href="https://baib-podcast.com/podcasting-benefits.html">BAIB Episode Page</a></p>
<p><a href="https://blog.openpodcast.xyz/benefits-of-podcasting">benefits blog post</a></p>
<p><a href="http://eepurl.com/gj04vH">BAIB Email List</a></p>
<p><a rel="payment" href="https://www.buymeacoffee.com/BMK7xEkoG">Support this podcast</a></p>
[Revenue Research](https://revenueresearch.co/)
<p>Published on July 20, 2020</p>
Awesome github readme templates collection
Tags: showdev, watercooler, opensource
Published: 2020-07-20 12:53:34

---
title: Awesome github readme templates collection
published: true
description: 
tags: #showdev, #watercooler, #opensource
//cover_image: https://direct_url_to_image.jpg
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f162s2fyiks5jfi9jck2.png)

Finally i have reached 100 :star: for [awesome README templates](https://github.com/elangosundar/awesome-README-templates) and created a website for collections of all templates are available in [https://awesome-github-readme-profile.netlify.app](https://awesome-github-readme-profile.netlify.app).

Repo Url: https://github.com/elangosundar/awesome-README-templates
Website Url : https://awesome-github-readme-profile.netlify.app/
Twitter: https://twitter.com/elango_sundar

If you love this website, Please share your views, suggestions to improve it.
Developer Fake
Published: 2020-07-20 12:50:08

Como meu primeiro tema de postagem para o meu blog, eu decidi mostrar um caminho para resolver o famoso enigma:
"Contratamos com experiência" - como ter experiência sem ser contratado?

Esse caminho eu vou mostrar em 10 dicas. No fim você terá toda a experiência pedida sem nunca ter sido contratado. Claro que isso é uma condição específica da área da Tecnologia da Informação. Outras profissões precisam adquirir experiências em campo.

Na próxima semana teremos a primeira dica: Domínio.
Free AWS-Kubernetes-Terraform Complete Course
Tags: kubernetes, aws, terraform, techtter
Published: 2020-07-20 12:38:24

✅FREE AWS Kubernetes Terraform Course ✅
▶️Subscribe To Channel with below link and get AWS-Kubernetes-Terraform Complete Course for FREE.
https://www.youtube.com/c/Techtter?sub_confirmation=1

📚 Course Content
📌 What is Terraform?
📌How To Connect AWS Cloud with Terraform?
📌How To Install EC2 instance on AWS with Terraform?
📌How To Install Kubernetes(EKS) with Terraform?
📌How to deploy Application on Kubernetes EKS cluster?
📌How to install metrics server on K8s?
📌How to install Cluster Autoscaler (CA) on Kubernetes EKS?
📌How to install HPA(Horizontal Pod Autoscaler) on K8s?
📌How to Autoscale the application pods and nodes based on system resources like cpu usage and max user requests?
https://www.youtube.com/playlist?list=PL-OjXpIFhMre4UkoFDDq7YjMtyw3a7W8X
I fucking love coding
Tags: womenintech, watercooler, go
Published: 2020-07-20 12:30:57

Hey guys. This article isn't meant to be helpful, or motivational, or really have a point at all. I'm just feeling a whole lotta love for code right now and I want to let it out.

I took the weekend to focus on two pet projects. Neither of these projects are going to make me any money or advance my career in any way. They're just fun. 

But you know what's fucking awesome? I was able to just have an idea, and bring it to LIFE (well, almost).

I've wanted to code a particular app since I was a beginner - a Tinder for Spotify, which would help people discover new music in a fun way. So this weekend I thought I'd give it a shot, and I literally got the whole thing working already. It's wild. When I was a beginner and had this idea, I had no idea how I would have achieved it. And now I can. In LESS THAN TWO DAYS. It's just so fucking cool. 

Another project I started working on was a new gif library (because I hate Facebook and Facebook bought Giphy). I decided to make the backend with Go, because I had never used Go before and thought it would be a fun project to help me learn. And it was just awesome. Go is awesome. Learning a new coding language is the best thing ever - it reminded me of being a beginner and having that feeling when you finally get your code working, but without all the other shit that comes with being a beginner. 

Coding has brought me so much joy and opportunity. And so much of that comes from the dumb pet project ideas I have and am able to bring to completion. It's just absolutely mindblowingly cool to have an idea and see it pan out right in front of your eyes. Like, I'm building shit. From the bottom up. By myself. My OWN IDEA. It's MY THING!

Man. It's so cool.

Anyway, yeah. Keep coding. Keep creating. Keep having dumb ideas and making them real. It is genuinely the best feeling ever. 

(PS people seem to love Tinder for Spotify so I will be releasing it on App Store & Google Play in about a month.)
Generating a table of contents with anchors for markdown - Vim plugin
Tags: vim, markdown, plugin
Published: 2020-07-20 12:30:39

I use vim as my editor and markdown to write the articles for my site. I think that the articles are easier to navigate when they have a table of contents.

Adding a table of contents was easy. Many plugins accomplish this. But I couldn't find a plugin that also added the anchors. And adding the anchors was a very tedious process. So I modified the [vim-markdown-toc](https://github.com/mzlogin/vim-markdown-toc) plugin to add the anchors.

If you are looking to do the same, I  wrote a short post on how to do it with my modified version of the plugin. You can read about it here:

[https://rderik.com/notes/generate-table-of-contents-with-anchors-for-markdown-file-vim-plugin/](https://rderik.com/notes/generate-table-of-contents-with-anchors-for-markdown-file-vim-plugin/)

I hope you find it useful.
Explain GPT-3 Like I'm Five
Tags: ai, machinelearning, explainlikeimfive, news
Published: 2020-07-20 12:23:59

GPT-3 was recently released and has been trending in different circles.

{% wikipedia https://en.wikipedia.org/wiki/OpenAI#GPT-3 %}

Can anyone offer their most straightforward explanation for some of the concepts involved?
Recreating `new` keyword in Javascript from scratch
Tags: javascript, tutorial, webdev, beginners
Published: 2020-07-20 12:21:13

> The best way to understand anything is to re-write it from scratch on your own

We are gonna do just that. So go grab yourself a 🍺, drop a huge ❤️ and chelax as we dive right into it.

Here's what we already do

```javascript

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.describe = function () {
  console.log(`I am ${this.name} , ${this.age} years of age ! `);
}

const client = new Person('Vladimir', 32);
client.describe();

```

That outputs , `I am Vladimir, 32 years if age !`

Our goal is to change the line that has the new keyword to a more custom one like: 

```javascript
const client = spawn(Person, 'Vladimir', 32);
```

where `spawn` is our own function that we create which should substitute **new** 


```javascript

function spawn(constructor, ...args) {
  const obj = {};
  Object.setPrototypeOf(obj, constructor.prototype);
  return constructor.call(obj, ...args) || obj;
}

```

## How spawn works

Since new returns an object, we first create a fresh object each time for a call of spawn and set its prototype.

Now we call the constructor by setting its `this` argument to the fresh object . After this call all the properties in the constructor function will be assigned (for eg: name, age)

Then we check to see if the constructor returns anything and we respect that , so we return whatever it returns (In most cases  constructor doesn't return anything and we return the object) 

Thanks for reading
Don't forget to ❤️ it :)
And follow me for more cool stuff
How to caculate emoji length?
Tags: javascript, tricks
Published: 2020-07-20 12:20:16

---
title: How to caculate emoji length?
published: true
description: The way i found to get emoji length
tags: Javascript, Tricks
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/17dv57h61f19kqq39d2c.jpg)

In Javascript we just call `length` on String object will return the **length** you want to get.

But when you get **emoji** length from **javascript** become more trouble let show you what i found.

```javascript
"ihavecoke".length // 9

"😁".length // 2
```

As you can see, when you call `length` on `'ihavecoke'`  you got length **9** it's ture and make sense.

The line number 3 you just got length **2**. what ? a emoji char just **2** length of string?

The `"👨‍👨‍👧‍👦".length`  more strange that return **11** why ? emoji char not return **2** always?



So how to caculate emoji length to **1** length?  you can use [lodash](https://lodash.com/docs/4.17.15#toArray) method `toArray` it's simple and useful

```javascript
_.toArray("😁").length // 1

_.toArray("👨‍👨‍👧‍👦").length // 1

_.toArray("ihavecoke 🤩").length // 11
```



So we got the **1** length emoji lols 



Hope it can help you :)
Whas up! guys in this Blog I am going to tell you more about git  and github
Published: 2020-07-20 12:19:43

* Note if you haven't seen my blog on how to link a flutter project to github (https://dev.to/neev123dev/whoza-guys-i-am-back-again-with-an-another-blog-so-today-i-am-going-to-tell-you-how-to-link-you-flutter-project-to-github-4g3o) you will not understand what i am going to tell in this blog.

### Before getting started I would like to inform you that in this blog we will know how to create a pull request and  create a issue in somebody's or someone's repository. Please use the following repository to perform the following tasks

* repository: https://github.com/neev123dev/bug-free-octo-potato

## Getting started 

* Open your prefered browser and open the following url

      https://github.com/neev123dev/bug-free-octo-potato

* over there you will se an option fork

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

* then you will land on a page that would look something like this

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

* after that click on this option

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

* then make your changes like 

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

* after doing that scroll down and you will se an opion commit click on that option.

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

* then go to pull request 

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

* after doing this much click on new pull request

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9qn4uat7tddhciybyzil.jpg)

* you will land to this page 

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

* then click on create pull request

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

* after doing this give your pull request a title and a comment like

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

* then click on create pull request

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

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

## * Note if the user accepts your pull request then your changed files while appear on the user's repository. This is just a brief example if you want to change real code then you will have to clone it if you have any doubts of how to clone it then let me know in the comment.

# Issues 

open this url on your browser: https://github.com/neev123dev/bug-free-octo-potato

* go to issues 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4kbumlpzbh2jicii88ht.jpg)

* click on new issue 

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

* write the title and body of the issue and submit it 

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

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

https://github.com/neev123dev
https://dev.to/neev123dev
GSoC 20: Week 7
Tags: python, opensource, gsoc
Published: 2020-07-20 12:08:45

Hello everyone!
I am Niraj and I will be sharing my code contribution of the seventh week of the GSoC. If you haven't read my previous [InputEngine](https://dev.to/nirajkamdar/gsoc-20-week-5-175k) post you should read it first.

## Background
I have added a feature for specifying product wise remarks in my previous InputEngine PR but what if user want to specify remarks for particular CVE? What if user want to customize severity level of CVEs since the severity is usually application dependent anyhow? What if user wants to add comments for specific CVE or product?

Currently, we only accepts vendor, product, version and remarks fields as valid input to InputEngine. So, if we want to give user fine-grained control of specifying triage data for a CVE, We need to add support for new fields: 1) cve_number 2) comments and 3) severity.

## What did I do this week?
I have added support for above new fields in InputEngine. Now, if user specifies remarks, severity and/or comments for a specific CVE then these fields are only going to reflect for this particular CVE. For example if CSV file contains following data then comments states what will be reflected in the output:

|vendor       |product      |version|remarks|cve_number                           |severity      |comments|
|-------------|-------------|-------|-------|-------------------------------------|--------------|--------|
|libjpeg-turbo|libjpeg-turbo|2.0.1  |3      |CVE-2018-19664                       |CRITICAL      |severity will be CRITICAL in output|
|libjpeg-turbo|libjpeg-turbo|2.0.1  |2      |                                     |HIGH          |default severity will be HIGH for the product|
|haxx         |curl         |7.59.0 |1      |                                     |              |severity will be fetched from NVD database|

I have also added support for wheel and egg archive format. I have modernize error handling in OutputEngine and Extractor. I have also fixed a bug which was causing progress bar to be displayed in the quite mode. I have also triaged several bugs specified by a user into proper issues.

## What am I doing this week?
I am going to work on configuration file support for our tool. I have experimented with different configuration file format and I think YAML and TOML are the best one. I am waiting for my mentor to choose the one that would be perfect for our tool.
Creating a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript [PART 3]
Tags: html, css, javascript, webdev
Published: 2020-07-20 12:02:35

The first and second parts of the portfolio tutorial were a success. If you haven't seen them yet, jump into [my YouTube Channel] (https://www.youtube.com/channel/UCe8uN9zoKksCb1hfw61myRw?sub_confirmation=10) to watch.

Here is also a link to the live portfolio: https://chaoocharles.netlify.app/

If you have been waiting for a part 3, I got you covered. It's now live 🚀 on my YouTube channel. I will also pin the video below. We will cover the projects section, the contact section, the footer, we will make it mobile responsive and finally host it on netlify for free.

(Recommend: watch till the end).

`Subscribe to my channel`

Enjoy and stay awesome always 💙

{% youtube H4kyPKQcG18 %}
Daily Developer Jokes - Monday, Jul 20, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-07-20 12:00:26

---
title: "Daily Developer Jokes - Monday, Jul 20, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20Jul%2020%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125964dfaa7.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What is React's favorite movie genre?

___A:___ Suspense
 -->