teleren/devto huggingface dataset:
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2019-06-17 18:05:09

Every Monday 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. ❤️


#1. Box-Shadow 🤯

Jacque teaches us the power of the `box-shadow` property. In this post, we get a tutorial on how to create a pixel art Pusheen.

{% link https://dev.to/jnschrag/creating-pixel-art-with-css-3451 %}

#2. Beautiful Distro

For anyone interested in using Linux as their primary OS for development -- from machine configuration to developer tools.

{% link https://dev.to/deepu105/my-beautiful-linux-development-environment-2afc %}

#3. No More Media Queries

Advanced responsiveness with CSS Grid. 

{% link https://dev.to/perborgen/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-29h %}

#4. The Long Haul

A reflection on 'truly great' experiences and the sequence of events that gets you there.

{% link https://dev.to/stephsmithio/how-to-be-great-just-be-good-repeatably-bk5 %}

#5. Not Just For Serious People

Great advice for anyone looking to contribute to open source: from finding a problem to creating the actual PR.

{% link https://dev.to/healeycodes/your-first-open-source-pull-request-a-walkthrough-1omf %}

#6. Get Meta

A quick introduction to metaprogramming. 

{% link https://dev.to/mak12776/write-codes-that-writes-codes-568 %}

#7. The Product

If you're working at a startup, Vaibhav believes you need to fire yourself as a software engineer and re-hire yourself as a product engineer.

{% link https://dev.to/veebuv/never-work-as-a-software-engineer-in-a-startup-4a4p %}


_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 Monday!_
TV while coding? Distraction or Motivation?
Tags: discuss, webdev
Published: 2019-06-17 17:35:25

---
title: TV while coding? Distraction or Motivation?
published: true
description: 
tags: discuss, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2gmwodrhmitdxov4ux2v.png
---

When I'm coding I like complete silence but not all work is the same.
When I'm doing something I've done a hundred times I can safely have Star Trek playing in the background.

Also, not all show the same, I can safely put Star Trek in the background because I've watched it hundreds of times.

A distraction-free is harder to come by these days. I have to tolerate elmo sing-a-long in the background.


### Vote and Comment

Tell me your preference with your reaction:

# 💖 TV motivates me while coding
# 🦄 TV distracts me while coding
How does your app communicate with the world?
Tags: discuss
Published: 2019-06-17 17:13:07

---
title: How does your app communicate with the world?
published: true
description: Does your app need to communicate outside itself? How does it do that?
tags: discuss
---

A lot of times the apps we work on need to communicate outside of themselves. How does your app speak with your users or the world? Is email your preferred method? SMS? WhatsApp? Does it make a difference *what* you are communicating or *where* you are communicating?

Where I live in Israel almost all communication from apps is done via SMS. Email communication comes in a distant second, while WhatsApp is used for just about all personal communication.

What about you? What do you build with? What do you prefer?
How to write "four letter word" in regex?
Tags: regex
Published: 2019-06-17 16:52:04

Hi, I am writing a blog post and thinking of adding some humor (dunno if it will fly), but basically referencing the typical "taking the s**t our of x" and replacing the four letter word with regex.

Would this be clear, but also accurate (and bonus, even a little bit funny)?

`Taking the /s[a-z]t{4}/ Out of CLAs`

I wasn't sure whether I should use {d} or use the \b for boundary beginning and end.

Should it be more explicit and have it match where the first character is `s` and last is `t`?

Open to other suggestions!
Welcome to the Big Thread Club, Florin Pop. You are the latest winner of the Big Thread Badge. 🎉
Tags: meta, bigthreadbadge
Published: 2019-06-17 16:38:48

Florin joins @philnash and @lauragift21 in the club as the third winner of this badge.

{% user florinpop17 %}

The Big Thread Badge is awarded to the person who creates a discussion thread on the site that sparks the most collective comment love (e.g. score as determined by total ❤️ reactions and adjacent ranking factors).

This was Florin's thread:

{% link https://dev.to/florinpop17/how-old-were-you-when-you-wrote-your-first-line-of-code-57il %}

Details about this contest can be found in this post:

{% link https://dev.to/devteam/we-ll-be-adding-more-design-and-moderation-clarity-to-tags-like-help-discuss-etc-we-re-also-introducing-a-new-badge-483a %}

Entry is simple: Start a thread that is bound to spark a lot of comments. Ask the community to tell a certain kind of story and get lots of comments! Even if these threads aren't always answering _the deep questions_, they are often great for seeing what the broader community thinks of a topic and are usually a lot of fun!

DEV employees are not eligible for the Big Thread Badge. 🙂

## **One more thing...**

Starting **Thursday** we will be awarding a weekly badge for the top post in individual tags. We will be starting with popular language/framework tags. Many of the [top tags](https://dev.to/tags) will be badge eligible, but I'm not 100% sure which will be included and which will be left out.

Like all badges, you can only get them once, so this will encourage winners to broaden into writing/teaching on different tags if they've already won. We think this badge will be a lot of fun. It will help decorate your profile with some of the specific technologies.

Importantly, a **Thursday** rewarding schedule will help diversify the incentives for when to post to win a badge. Currently we award **Top 7** and **Big Thread** badged on Monday, incentivizing folks to post earlier in the week for the best chance at qualifying.

Happy coding!
Flip links, Bold form, Hero unit | Module Monday
Tags: showdev, opensource, webdev, javascript
Published: 2019-06-17 16:26:24

---
title: Flip links, Bold form, Hero unit | Module Monday
published: true
description: Module Monday 43
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:ffffff,c_lpad,h_350,w_800/v1560565953/flip-links_yepuga.gif
canonical_url: https://guide.anymod.com/module-monday/43.html
---

## Open-source web modules for your next project
Everything below is open source and free to use on any website, web app, or anywhere else. There are hundreds more like these on [Anymod](https://anymod.com).

Click a mod to see it along with its source code.

## Dark flip links
Flips each card on hover to create an engaging set of links.
<a class="btn btn-sm" href="https://anymod.com/mod/flip-links-mlaaab">View mod</a>
<a href="https://anymod.com/mod/flip-links-mlaaab">
  <img src="https://res.cloudinary.com/component/image/upload/v1560565953/flip-links_yepuga.gif"/>
</a>

## Bold contact form
A vibrant block to make your contact form stand out.
<a class="btn btn-sm" href="https://anymod.com/mod/bold-contact-form-alrran">View mod</a>
<a href="https://anymod.com/mod/bold-contact-form-alrran">
  <img src="https://res.cloudinary.com/component/image/upload/v1560565953/form_frjn08.png"/>
</a>

## Hero unit
Classically good-looking hero unit to leave a great first impression.
<a class="btn btn-sm" href="https://anymod.com/mod/hero-unit-introspect-raoomk">View mod</a>
<a href="https://anymod.com/mod/hero-unit-introspect-raoomk">
  <img src="https://res.cloudinary.com/component/image/upload/v1560565953/hero_mq77em.png"/>
</a>

## Icon link section
Simple, stylish, and informative.
<a class="btn btn-sm" href="https://anymod.com/mod/icon-links-introspect-orddak">View mod</a>
<a href="https://anymod.com/mod/icon-links-introspect-orddak">
  <img src="https://res.cloudinary.com/component/image/upload/v1560565953/icon-links_flk4sx.png"/>
</a>

## Learn more block
Create some intrigue and let visitors know what's what.
<a class="btn btn-sm" href="https://anymod.com/mod/learn-more-section-dkddrm">View mod</a>
<a href="https://anymod.com/mod/learn-more-section-dkddrm">
  <img src="https://res.cloudinary.com/component/image/upload/v1560565953/learn-more_lr0j7w.png"/>
</a>

<hr>

I post new mods from the community [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
Do you use CSS ::before and ::after pseudo elements?
Tags: css, webdev, discuss
Published: 2019-06-17 15:19:25

I LOVE pseudo elements in CSS. I use `::before` and `::after` probably more than I should. In fact, I love them so much, that I'm creating a video course for them.

It got me wondering, how many developers are using them in production.

## Question

Do you currently use `::before` and `::after`? If so, what sorts of design patterns do you use them for?

If not, why don't you?

Oh and if you've never used one, I've got [a great primer over here](https://bryanlrobinson.com/blog/2018/04/30/how-to-css-after-elements-for-background-overlays/).
Yank hard wrapped text, or how to paste your vim markdown into dev.to
Tags: vim, markdown
Published: 2019-06-17 14:51:57


This was not supposed to be my first post here. But I was writing that one and ran into a problem.

I write markdown in vim, and I hard wrap lines at 80 characters. 

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


In my local preview everything was looking fine, but when pasting my post into the dev.to editor, I got greeted by a bunch of broken lines: 

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

After some googling, I found out that there is an open issue with markdown linebreaks.

{% github https://github.com/thepracticaldev/dev.to/issues/575 %}

What to do? I could switch to soft linebreaks, but navigation gets cumbersome. Maybe I could try to use the dev.to API to post and preprocess the markdown before... sounds like more work than I'd like to do. What's a ~~lazy~~ good enough approach? 

Have vim do it! 

Can I edit the text with my usual setup but copy it as if it didn't have linebreaks? You can guess that was a yes. Here's the little monster I came up with

```vimscript

:map ,r :let oldtw=&textwidth <cr> \|:set textwidth=10000 <cr> \| ggVGgqgvy \| :let &textwidth=oldtw <cr> \| :set textwidth? <cr> \| gvgq

```

Let's break it down (omitting `\|` which is a command separator and `<cr>` which just means press enter after typing the command):

- [`:map ,r`](#-raw-map-r-endraw-)
- [`:let oldtw=&textwidth`](#-raw-let-oldtwamptextwidth-endraw-)
- [`:set textwidth=10000`](#-raw-set-textwidth10000-endraw-)
- [`ggvGgqgvy`](#-raw-ggvggqgvy-endraw-)
- [`:let &textwidth=oldtw`](#-raw-let-amptextwidtholdtw-endraw-)
- [`:set textwidth?`](#-raw-set-textwidth-endraw-)
- [`gvgq`](#-raw-gvgq-endraw-)

#### `:map ,r` 

on pressing the ,r shortcut...

#### `:let oldtw=&textwidth` 

store whatever your current `textwidth` is (in my case 80)

#### `:set textwidth=10000` 

set `textwidth` to some ridiculously large value so that you get no line breaks on long paragraphs

#### `ggvGgqgvy` 

hah 

- `gg`: go to the top of the file, 
- `v`: enable visual mode,
- `G`: go to the bottom of the file (since you're in visual mode this will select everything)
- `gq`: reformat the paragraph (since `textwidth` is now 10000 all your paragraphs will be without newlines)

#### `:let &textwidth=oldtw` 

Restore the `textwidth` property to this old values (warning! this is not enough!, see [options as values in vimscript](http://learnvimscriptthehardway.stevelosh.com/chapters/19.html#options-as-variables))

#### `:set textwidth?` 

Value is now fully restored

#### `gvgq`

- `gv`: start visual mode with the last selection (so whole document)
- `gq`: reformat the paragraph again with your old `textwidth`

And that's it! Your post will be on your clipboard with uninterrupted paragraphs, and your editor will still display your nicely wrapped text.

Admittedly it has a few corner cases and yes, I should turn it into a function but solving problems with this uber pragmatic approach is a lot of fun. And fast. And I wanted to get something posted already!
Embedly now adds support for DECS Code Snippets.
Tags: blockstack, dapp, developertools, codesnippets
Published: 2019-06-17 14:22:34

---
title: Embedly now adds support for DECS Code Snippets.
published: true
description: You can now share your DECS code snippets directly within any blog or webpage. All of the major blogging platforms provide seamless support for Embedly-provider content, including WordPress, Blogger, Tumblr and Medium.
tags: BlockStack, DApp, Developer tools, Code snippets
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0ij01w4p56e4iovq8r7f.png
---

Embedly offers a suite of tools, APIs, and libraries to help you embed content from media providers into your websites and apps. Richer content means a more engaging experience for people who visit your site or use your app. Starting today, Embedly has just added [support](https://embed.ly/provider/decs) for embedding DECS code snippets everywhere.

![](https://cdn-images-1.medium.com/max/1600/1*SuEn2KxJ5Xp9z5ZF-hCKWA.png)

You can now share your DECS code snippets directly within any blog or webpage. All of the major blogging platforms provide seamless support for
Embedly-provider content, including WordPress, Blogger, Tumblr, Medium and many[others](https://embed.ly/customers).

To add the rich code snippet to the blog post copy and paste the DECS snippet URL into the Medium story editor. Medium’s seamless support for Embedly content transforms this link into the embedded rich snippet you see below :-)


![](https://cdn-images-1.medium.com/max/1600/1*x98roTNqqrx_3ZNnhSIcCQ.gif)


**Beautiful and functional code embeds**<br> Now it’s easier than ever before to share beautiful code snippets, everywhere with the copy to clipboard and download options. Here is an example of DECS rich code embed— Minimal Google Analytics Snippet.

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

<span class="figcaption_hack">DECS code snippet (embed) — with one click copy to clipboard and downloadfeatures</span>
*****

**Why share static images of code when you can share rich, beautiful and
dynamically updatable code snippets in just a few clicks?**

Give it a try here — [https://app.decs.xyz](https://app.decs.xyz/)
Chrome extension — [Install now](https://chrome.google.com/webstore/detail/decs-code-snippets-manage/mkclebnkdjjpamialfgieminnkdepbcl) to enable one-click capture across the web.

Follow us on [Medium](https://medium.com/@decs) or on [Twitter](https://twitter.com/decs_dapp) for more news, tips and unique code snippets from the developers’ community.
Is JavaScript the "CO2" of the web?
Tags: javascript, webdev, webperf, podcast
Published: 2019-06-17 14:21:04

---
title: Is JavaScript the "CO2" of the web?
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/z8tgeleiwhexalcqnrgz.png
description: KBall, Divya, and Nick get together with Chris Ferdinandi to talk about vanilla JavaScript, best resources for learning, and our favorite vanilla JavaScript tips, tricks and APIs.
tags: javascript, webdev, webperf, podcast
---

["The vanilla JavaScript guy"](https://twitter.com/ChrisFerdinandi) joined [JS Party](https://changelog.com/jsparty) last week and a fun metaphor was discussed:

**Is web development stuck in the Hummer days? If so, is vanilla JS a bicycle? A Lime scooter? How far can this metaphor stretch?**

You will 💯 want to listen to this and let us know your thoughts on the matter. The CO2 metaphor starts around the 20-minute mark ([jump there](https://changelog.com/jsparty/80#t=20:00)) 💚💚💚

{% podcast https://dev.to/jsparty/javascript-is-the-co2-of-the-web %}
Bump nuspec file version with powershell
Tags: powershell, development
Published: 2020-11-12 04:17:53

---
title: Bump nuspec file version with powershell
published: true
date: 2019-06-17 14:00:00 UTC
tags:
- powershell
- development
canonical_url: https://www.sheldonhull.com/blog/bump-nuspec-file-version-with-powershell/
---

## Bump Nuspec Version

Bumping the version of the nuspec file requires a little tweaking and I got some help from the slack powershell community to ensure I handled the xml parsing correctly. This was the result. If you are running a chocolatey package build or equivalent nuspec build via an agent and want a way to ensure the latest build updates the build version incrementally this should help.

This snippet should help give you a way to bump a nuspec file version programmatically.

{% gist https://gist.github.com/sheldonhull/f0c2bd47e18e5d074c5e2b9943f79dfc %}

I modified the logic to support `-WhatIf` since I'm a fan of being able to run stuff like this without actually breaking things first.
Use CSS animation for game in js (just for fun)
Tags: javascript, css
Published: 2019-06-17 13:49:31

{% codepen https://codepen.io/tetragius/pen/KjMKyp %}


When an element moves with the help of CSS animation, we can read its real coordinates in the JS code and use it in calculations. Thus css is engaged in animation, and JS - collision calculation.

Animation for block
```css
@keyframes animation-a { 
    0% { 
       left: 400px;
    }
    50% { 
       left: 200px;
    }
    100% { 
       left: 400px;
    }
}
```

Blocks array

```javascript
const blocks = [  // left, bottom, width, animation-name, duration
    [240, 240, 700, null],
    [0, 180, 200, null],
    [400, 140, 100, 'animation-a', 5],
    [400, 90, 250, null],
    [250, 40, 150, 'animation-b', 3],
    [0, 0, 250, null],
    [400, 0, 670, null],
    [0, -40, 700, null],
];
```

Prepare blocks for scene

```javascript
function prepareBlocks() {
    for (let b in blocks) {
        let _block = blocks[b];
        let block = document.createElement('div');
        block.classList.add('block');
        block.style.left = `${_block[0]}px`;
        block.style.bottom = `${_block[1]}px`;
        block.style.width = `${_block[2]}px`;
        block.style.animationName = _block[3] || '';
        block.style.animationDuration = `${_block[4]}s` || '';
        scene.insertBefore(block, player);
        blocks[b] = block;
    }
}

````
IEO Development Company
Tags: ieo, bitdeal
Published: 2019-06-17 13:18:04

---
title: IEO Development Company
published: true
description: Know about the services of Bitdeal- Leading IEO Development Company.
tags: IEO,bitdeal
---

##What is IEO ?

An Initial Exchange Offerings is a fundraising technique like ICO, but the difference between an ICO and IEO is that IEO relies on the exchange for the whole fundraising process. In IEO, the tokens after the legalization process get listed directly into a top-rated exchange.

Listing tokens in exchanges don't require separate marketing of tokens as the exchanges already have a notable amount of traders. The exchanges take up the response for whole IEO process and even fundraising takes place in the exchange sites.

##IEO AND ICO Difference

The main difference between ICO and IEO is that in IEO already existing exchanges manages the entire process and in ICO the organization which creates the token does it.

##Benefits of IEO

###Centralized - Boost Trust 

One of the key benefits of IEO is that here the crowdsale is conducted on an exchange which becomes like a middle man and counterparty that monitors every project processes. Exchanges basically screen the IEO projects process to maintain their good reputations. This reuse of centralization can be seen as a counter to the basic idea that created Bitcoin and open blockchains in the first place, which was to be a completely P2P network.

###Marketing Strategy - Makes IEOs more Easier 

The main advantage of IEO over ICO is that exchanges will have an existing community of audience which IEO can make use of. The exchange’s existing resources for marketing make it easier for a new project to get discovered by a larger investor and thus launch its token offering with great success. 

###Legal Protection - Increases Security 

Token creators need not have to worry about fundraising security as the exchange will manage the whole IEO process through smart contracts.
Exchanges will have a well-organized legal structure which makes them regulatory and provides protections for new start-ups who normally processes IEO in it. Some Well-developed exchanges offer legal advice and access to a full legal team to help new startups travel through the hazards in the blockchain industry.

##Bitdeal - IEO Development Company

Bitdeal - Leading Intital Exchange Development Company furnishes the entire services related to IEO.
Bitdeal have a separate team of experts who provides 24X7 consulting service.Contact them anytime anywhere to know more IEO services.
Source : [**Bitdeal**](https://www.bitdeal.net/what-is-initial-exchange-offerings)
The Building an Indie Business Podcast- Comparing Podcasting and Writing
Tags: podcast, writing, startup
Published: 2019-06-17 12:59:53

---
title: The Building an Indie Business Podcast- Comparing Podcasting and Writing
published: true
description: 
tags: podcast, writing, startup
---

https://overcast.fm/+RG5hqF4Oo

[Episode Page](https://baib-podcast.com)
[Revenue Research](https://revenueresearch.co/)
Let's Talk About MicroFrontends
Tags: javascript, discuss, microfrontend
Published: 2019-06-17 12:59:03

It seems to be all the buzz on JavaScript Twitter: 

https://twitter.com/rickhanlonii/status/1139323696953352192

Some people have been talking about full-stack microservices, where you have separate parts of the frontend held together by a stitching layer. For example, one team could work on one component in React, another in Angular, each with their own separate build pipeline. 

Despite it being all the buzz today, The idea has been around for at least a year, as seen by this dev.to post: 

https://dev.to/onerzafer/understanding-micro-frontends-1ied

So, what do you think? I thought dev.to would spawn some more nuanced and interesting discussion over the Twitterverse.
Crypto package review of Qvault
Tags: discuss, security, privacy, opensource
Published: 2019-06-17 12:42:11

We just made a bunch of updates to Qvault, a new opensource password manager. If anyone has a second to review our crypto package that would be awesome!

Website: https://qvault.io

Github: https://github.com/q-vault/qvault

Crypto package: https://github.com/Q-Vault/qvault/blob/master/src/lib/QVaultCrypto/QVaultCrypto.js
First post
Tags: first, post, noob
Published: 2019-06-17 12:00:42

# Post is Result of a markdown tutorial

## Ordered List
1. Use double asterisk to **bold** text
2. Use Underscore to _italicize_ text
3. Can use single asterisk to *italicise* text as well

## UnOrdered Text
* Grapes
* Bananas
* Apples
* Pears
- Oranges

## Checking Quotes
Humorously yours is a great web series about the life of a stand up comic in India. 
It has been created by TVF, who have a knack of writing funny scripts.

The main man is Vipul Goyal(standup comic in real life) and his good friend Bhushi. Bhushi is like the Harami friend everyone has. Doesn't care a damn about what you are upto, but is a constant presence to give you company for a drink.
Here is one super quote from him.
>I live my life for 3 W's. 
Weed, Wine And Wagina.

This is how Bhushi looks(demonstrating how to add inline images)
![Bhushi](https://s3.scoopwhoop.com/anj/10_Times_When_TVFs_Humorously_Yours_Made_Me_More_Than_Just_Laugh/95ba0444-acf8-4218-85d7-27eab3af0107.jpg)

## Checking Email id links
<DoNotSendMeEmail@myEmail.Address>

## Checking links
I am following the tutorial at <https://www.youtube.com/watch?v=HndN6P9ke6U>

## Checking Link on a text
[Here](https://www.youtube.com/watch?v=HndN6P9ke6U) is the link for this tutorial