teleren/devto huggingface dataset:
Meet the hexdevs project
Tags: podcast, hexdevs, remote, tech
Published: 2019-08-12 21:04:49

---
title: Meet the hexdevs project
published: true
description: 
tags: podcast, hexdevs, remote, tech
---

Hello everyone,

I'm really happy to get back to dev.to to share this project with you: [hexdevs](https://www.hexdevs.com/). Our goal is to share cool remote and visa-sponsored jobs for software developers, share tech news and tips for becoming a better professional.

We also have a podcast where we interview smart developers and share their stories to inspire you.

That said, I'm really happy to share our first Podcast episode with [Stella Miranda](https://soundcloud.com/hexdevs/02-stella-miranda-from-unbounce). She is from Colombia and we talked about her career, her community work, how she got her job at Unbounce in Vancouver and more!

Don't forget to [subscribe to our newsletter](https://www.hexdevs.com/podcast) and share with your friends :)
It's Been One Year ! 🎉 🎂 🏆
Tags: birthday, badge, oneyearclub
Published: 2019-08-12 21:02:02

---
title: It's Been One Year ! 🎉 🎂 🏆
published: true
description: It's Been One Year ! 🎉 🎂 🏆
tags: birthday, badge, oneyearclub
cover_image: https://thepracticaldev.s3.amazonaws.com/i/h0rg02gre2eoq7jlnj2w.png
---

Hi all!

It's been one year since I joined the dev.to community.

During this year:
- ✍️ I wrote 21 posts
- 👍 I followed 60 people
- 😍 I got 1877 posts reactions
- 🤩 I got 4367 followers
- 👁 I got 56625 posts views
- 🏆 I got 5 different badges

But most of all, I found a very welcoming community.

So, thanks to all of you for being so open-minded. I'm sure @ben and the staff (@thepracticaldev) will do everything to keep this good spirit.

![](https://media.giphy.com/media/SRO0ZwmImic0/giphy.gif)
[VIDEO]Fixing anti-patterns in RxJS code
Tags: rxjs, angular, webdev, beginners
Published: 2019-08-12 19:54:45

---
title: [VIDEO]Fixing anti-patterns in RxJS code
published: true
description: Fixing #RxJS Anti-Patterns video from my “Hands-on RxJS” video course!
tags: rxjs,angular,webdev,beginner
cover_image: https://thepracticaldev.s3.amazonaws.com/i/r9azdgsx5bp4b991p3pr.jpg
---

Another free video from my ["Hands-on RxJS"](https://www.udemy.com/hands-on-rxjs-for-web-development/) video course on Udemy!

Find out possible anti-patterns in your reactive code and the ways how to fix it.

{% youtube -C2Y4_SW8K4 %}

You can watch more free videos [here](https://www.youtube.com/playlist?list=PLTgRMOcmRb3OyEoPUOz4SltaYakWGC3M2).

You can learn more and buy the full video course [here](https://bit.ly/2AzDgQC).

Kindly leave your feedback in comments!
Create full-stack boilerplate using reenode.
Tags: javascript, react, webpack, boilerplate
Published: 2019-08-12 18:21:29

## Problems with creating fullstack boilerplate:

Creating a starter kit for full-stack applications need a lot of effort and sometimes it becomes a headache. A small mistake in the initialization of the starter project can break your whole code and then you see a huge pile of console errors.

When I was learning to create full-stack applications then every time I code application from sketch and repeat that huge pile of code again and again that becomes a headache for me sometimes and if I did something wrong in setup of the application, my whole application got breaks.

Making mistake can be one reason but the main reason is that its very time consuming like every time you need to install packages, configure webpack, babel, eslint, prettier, etc and sometimes that makes me sick. Then I created some boilerplate like [simple-react-boilerplate](https://github.com/praveen-me/simple-react-boilerplate), [MERN-boilerplate](https://github.com/praveen-me/MERN-boilerplate), [react-redux-ssr](https://github.com/praveen-me/react-redux-ssr) and when I need to create a project I simply clone that repository and start working.
But still, the problem is that there are different repositories for every purpose i.e sometimes I don't need node but sometimes I do.

So, that's why I create `reenode`, a CLI for generating boilerplates with all the necessary minimal configuration to code a full-stack applications.

## What is actually `reenode` is ?

`reenode` is a simple CLI that generates starter code for full-stack applications without all pain that you'll have when you write that from scratch. `reenode` also have custom options for creating different boilerplates. The best part is that it's time-saving and your starter code will be ready in just a couple of minutes.

## How to use it?

For that first you need to install it globally by just typing: <br/>
`npm install -g reenode` or `yarn add global reenode`.

That's so simple. 😃

**reenode** provides `create` command to create a project. For that you just need to run:

```bash
reenode create project-name
```

After that terminal prompt will ask some questions:
![](https://praveen-me.github.io/reenode-b24111efa3e9d9a9791a2165834c4e0b.gif)

That's all you need to do. 🚀 <br/>
You can get help typing `reenode --help` and version of CLI by `reenode --version`.

Checkout the whole documentation of reenode from here: <br/>
NPM Link: https://www.npmjs.com/package/reenode <br/>
Github Link: https://github.com/praveen-me/reenode

**REQUEST**: If you feel issue using it then please comment down here or you can add issue at **reenode's** GitHub repo.

---

Follow me on [Twitter](https://twitter.com/am_pra_veen) and [Github](https://github.com/praveen-me).
A gnarly SVG visibility bug
Tags: svg, html, css, debugging
Published: 2019-08-12 19:46:48

_Or: gaining a deeper understanding of how SVGs are rendered by remembering their HTML roots._

I like SVGs. They're tiny compared to images & allow greater flexibility when rendering. But with this flexibility comes more room for weird issues. Here's what was blocking a task I was working on for way too long:

{% codesandbox chrome-svg-bug-hppef %}

When a SVG is shared between a component that's visible on the page and another that isn't and the hidden one is _higher_ in the DOM tree, the visible one won't render properly. So when using CSS `display` rules for multiple components, ordering in the DOM is paramount.

![Interesting](https://i.giphy.com/media/c4Nc0v0g15g9G/giphy.gif)

Side-note: interestingly, some of the colors will bleed through as you may notice the tiny green border, but ignore that because it just made debugging this take longer.

## How I caught it

![Invisible svg](https://thepracticaldev.s3.amazonaws.com/i/kbgdckznc2ynu8pw7439.png)

By getting all of the SVGs on the page via `document.getElementsByTagName('svg')`, I was able to see that there were instances that weren't visible by hovering my mouse over them. From there, I tried stubbing the non-visible components wrapping them to return `null`, and the issue was resolved. ✨

## Prevention

I reported this as a Chromium bug, but turns out this is the same as a bug report that was filed in [2013](https://bugs.chromium.org/p/chromium/issues/detail?id=258029). (Safari surprisingly doesn't have this issue though.) 😴 So instead of pushing for a fix, here are some workarounds:

#### Specifically in code

Instead of using CSS and `@media` queries to hide certain elements on the page, use viewport size detection to prevent those components from being rendered at all. The bug only exists when the first SVG is hidden, so if they're both visible it magically works!

#### More generally

1. Use [svg-inject](https://github.com/iconfu/svg-inject) combined with the `makeIdsUnique` param when rendering SVGs.

2. If using React or other virtual DOM library, create a wrapper component using something like `react-svg` where `beforeInjection` can call the above `SVGInject` function to modify `id`s and make them unique.

---

![Deflate](https://i.giphy.com/media/NM8ZZLPsPk1nq/giphy.gif)

And that's (finally) that. I'm glad I finally got to the bottom of this. And hopefully this prevents someone else from going down the SVG rabbit hole.
'60 Days Of Flutter: Building a Messenger from Scratch' - Part 1 : Creating the App
Tags: flutter, android, mobile
Published: 2019-08-12 18:48:12


https://medium.com/@adityadroid/60-days-of-flutter-creating-the-app-ea0407b472ae?sk=b4e0b578855d80124c51bcd2c0114b8d
Balloon landscape, Dropdown nav, Cookie notice | Module Monday 51
Tags: showdev, webdev, javascript, githunt
Published: 2019-08-12 18:37:25

---
title: Balloon landscape, Dropdown nav, Cookie notice | Module Monday 51
published: true
description: Module Monday 51
tags: showdev, webdev, javascript, githunt
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:ffffff,c_lpad,h_350,w_800/v1565398909/balloons_zhtri9.gif
canonical_url: https://guide.anymod.com/module-monday/51.html
---

## Everything below is open source 
It's free to use on any website, web app, or anywhere else. There are hundreds more like these built & shared by developers on [AnyMod](https://anymod.com).

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

## Balloon landscape
Customizable sky-scape divider. Responsive, too!
<a class="btn btn-sm" href="https://anymod.com/mod/landscape-balloons-svg-aldbkr?preview=true">View mod</a>
<a href="https://anymod.com/mod/landscape-balloons-svg-aldbkr?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1565398909/balloons_zhtri9.gif"/>
</a>

## Navbar with dropdowns
Simple and elegant nav with dropdowns and optional search.
<a class="btn btn-sm" href="https://anymod.com/mod/navbar-mladdn?preview=true">View mod</a>

<a href="https://anymod.com/mod/navbar-mladdn?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1565398908/navbar_qxv54x.gif"/>
</a>

## Cookie notice
If you need one, no sense in wasting time building it from scratch.
<a class="btn btn-sm" href="https://anymod.com/mod/top-cookie-notice-dknamn?preview=true">View mod</a>
<a href="https://anymod.com/mod/top-cookie-notice-dknamn?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1565398908/cookie_qcptsf.gif"/>
</a>

## Simple social footer
Link out to your different web presences, plus a copywrite message.
<a class="btn btn-sm" href="https://anymod.com/mod/footer-ormllr?preview=true">View mod</a>
<a href="https://anymod.com/mod/footer-ormllr?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1565398908/footer_slyced.gif"/>
</a>

## Featured posts
Highlight content on your site with a main post and smaller posts on the side.
<a class="btn btn-sm" href="https://anymod.com/mod/featured-post-with-list-of-posts-dkdnma?preview=true">View mod</a>
<a href="https://anymod.com/mod/featured-post-with-list-of-posts-dkdnma?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1565398908/posts_musbm6.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 ✌️
React Native Modal Example
Tags: reactnative, android, ios, javascript
Published: 2019-08-12 18:28:41

---
title: React Native Modal Example
published: true
description: React Native Modal Example
tags: #reactnative #android #ios #js
---

Source : <a href="https://www.skptricks.com/2019/08/react-native-modal-example.html">React Native Modal Example </a>

This tutorial explains how to use the modal component in React Native application. The Modal component is a simple way to present content above an enclosing view. Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator. In this example we are going to update the initial state with help of toggleModal function. This function helps to hide and show the model component in react native view component.

<img src="https://1.bp.blogspot.com/-6fCsfJAItdE/XUZWqHZn7FI/AAAAAAAADJo/pNwWMBVhRlUZr8hIopWTlJ6sl_I66xnqgCLcBGAs/s400/react-native-modal-example.jpg" />

<a href="https://www.skptricks.com/2019/08/react-native-modal-example.html"> Click here to read more... </a>
Maildroid 
Tags: android, library, beginners, kotlin
Published: 2019-08-12 18:04:03

## How to send email in Android

Sending email in android is not really an easy task, but with using Maildroid library it takes seconds 

**Library**
https://github.com/nedimf/maildroid/

Libary got great attraction on [r/androiddev](https://www.reddit.com/r/androiddev/comments/cotfeb/maildroid_new_email_library/) so here it is how it works :hearts:



## Start
***
Add this to your root.gradle file  

```gradle
allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}
```
Add dependency
```gradle

dependencies {
	        implementation 'com.github.nedimf:maildroid:0.0.1'
          }
```
### Adding Maildroid to your app

```kotlin
  MaildroidX.Builder()
            .smtp("") //Add your smtp provider
            .smtpUsername("") 
            .smtpPassword("")
            .smtpAuthentication() //true
            .port("")
            .type(MaildroidX.HTML) //Type of email
            .to("")
            .from("")
            .subject("")
            .body("")
            .onCompleteCallback(object : MaildroidX.onCompleteCallback{
                override fun onSuccess() {
                    //Place for your code when email is sent successfully!
                }
                override fun onFail() {
                   //Place for your code when email is not sent!
                }
            },3000)
            .mail()
```
#### Testing 
Create account on [mailtrap](https://mailtrap.io/ to test your emails. T
Add username and password in those constructor field.
Project Twiist - Dev log #1 (Prologue)
Tags: html, css, javascript, webdev
Published: 2019-08-12 17:54:46

<strong>TL;DR</strong>
Progress has started on my first ever web project: an online video platform that hosts user-generated content going under the name "Project Twiist".

<strong>THE BEGINNINGS</strong>
I am new to programming.. well, sort of. Ever since I was 11 years old, I had a huge interest in open world video games, specifically the Grand Theft Auto series. The way that the devs were able to create a giant world, completely explorable (within bounds) and filled with things to do, amazed me. The problem? Well there's always some problem, and for me, it was that I was 11, and Grand Theft Auto 5 (the newest addition to the GTA series) was rated M+ (18+). That meant that my parents wouldn't let me play it. I understood where they were coming from, but I repeatedly reassured them that I was not playing for the things getting the 'M' rating, I was simply going to play so I could explore the accomplishment of GTA, as well as yielding the many vehicles throughout the game.

Still: no. My parents, responsibly and kindly, told me to find something else to do. So, I did. I download Unity3d and started playing around. Now, I'm an optimist, as well as a diligent and persistent kid. So when I launched unity.exe for the first time, I thought to myself "how hard could it be?", and boy was I surprised.

Obviously I didn't sit down, 11 year old me, and start coding a GTA V replica, but I sure tried... for a while. I kept running into problems, but slowly I was piecing together a game. Now, here is where I need to be specific: I was *piecing* together a game. You have to remember that I was not necessarily interested in 'coding' a game, but more so playing GTA V (or any version of it that I attempt to create), therefore I was allowing myself to take many many shortcuts. The discovery of the Unity Asset Store is what really sped things up. 

With the assets, I quickly starting piecing a real prototype together, there was an animated character, working weapons, a minimap, a world (not modeled by me!), drivable vehicles, and even multiplayer. I was proud of my creation, but what really was "my" creation. 

Although by the time I bought GTA V (15) I had a working prototype of my GTA, I was too interested in the real game to care anymore. BUT, what I did care about, was how much fun 'building' a game really was and how much I enjoyed the process. 

THAT is what gave me the urge to code something, make something that I could be truly proud of. That's where I got the idea to create Twiist, an online video platform that hosts user-generated content. A big undertaking? Yes. Was I up to it? Double yes.
How Slack Harms Projects
Published: 2019-08-12 17:26:35

Presently, real-time communication tools such as Slack are very popular in business environments. However, use of these tools creates a culture that harms projects. It negatively impacts planning accuracy, implementation quality, product refinements, and design quality. I will tell you about the many issues created by real-time messaging in workplaces, and how to remedy your work culture.

[Read More](https://www.silasreinagel.com/blog/2019/08/12/how-slack-harms-projects/)
CSS Cheat Sheets!
Tags: css
Published: 2019-08-12 17:03:40

We all know that Peter Griffin Family Guy gif of him unable to work some blinds. This gif is always associated with the frustrations of CSS. Something changes, then something breaks. Why do people have these issues? How can you improve your CSS skills? What are the key concepts that you need to understand to write clean, maintainable styles?

This week on the [Ladybug Podcast](https://ladybug.dev/episode/css-part-1/), we talked all about the nuances of CSS -- what it is, how it works, and how to get better at it.

And, we made you all some cheat sheets to remember it all!

Shoutout to Emma for making these!

{% user emmawedekind %}

# The Box Model
![The content is in the center.
This is surrounded by padding.
Then comes the border.
And finally margin!](https://thepracticaldev.s3.amazonaws.com/i/7m22fyx5u1089gifw847.png)

# Combinators

![Descendant selector: You can use a space to denote a descendant selector. This matches all elements which are descendants of a specified element.
Child selector: Use a greater than symbol (>) to select all elements that are immediate children of a specified element.
Adjacent sibling selector: Use a plus sign (+) to select all elements that are adjacent siblings of a specified element. They must have the same parent and immediately follow this element.
General sibling selector: Use a tilde (~) to select all elements that are siblings of an element.](https://thepracticaldev.s3.amazonaws.com/i/uhwrjnnpknx666un1dls.png)

# Positioning

![Static: the default positioning of HTML elements.
Fixed: Element is positioned relative to the viewport and stays in the same place even if the page is scrolled. It’s also removed from the document flow. So elements in the DOM pretend like it’s not even there!
Relative: Element is positioned relative to its normal position.
Absolute: Element is positioned relative to the nearest relatively positioned ancestor. If no ancestor with position of relative is found, the element positions against the document body.](https://thepracticaldev.s3.amazonaws.com/i/sqk623lupmwttxlzzg1w.png)

# Display

![Block: Starts on a new line and spans the entire width.
Examples: h1 - h6 and p elements
Inline: Displays inline with other elements. Any height and width properties, as well as margin-top and margin-bottom have no effect.
Examples: a and span elements
Inline-Block: The element is an inline element, but can be formatted with width, height and top and bottom margin.
Example: a tag with width/height properties](https://thepracticaldev.s3.amazonaws.com/i/prqa8kpzifl30ek4q7nm.png)

You can listen to the full episode wherever you listen to podcasts!

{% spotify spotify:episode:6aicydskKs4zFKXTGQITN3 %}

Also, check out our second CSS episode, where we dove even deeper into discussing layouts, animations, and best practices! 

{% spotify spotify:episode:6tLgCcSMRoomOpDju5jxDE %}

We have more cheat sheets for that episode too!

{% link https://dev.to/ladybug/css-cheat-sheets-3ee0 %}
When I hated Typescript
Tags: typescript, react, javascript, redux
Published: 2019-08-12 17:00:21

I kept telling myself before that there's no need for me to learn Typescript and convinced by some of the articles I read that it will just slowdown my development progress. When I read it's documentation and after I finished reading 2-3 pages of it, I said to myself that there's no way I will try this thing into my project since it looked really complicated to me. Months passed by, and there's not even a day that I couldn't encounter any article saying how good it is and it's the best thing that happens to Javascript. I gave it a try...once again... But this time I invested so much time learning it and even bought a course online to really grasp Typescript. 

I started developing personal projects with it from React to React Native. The first days of trying it were so hard that my development progress really slowed down but it makes me realize how good it is. Before, without Typescript, I could easily get lost from my own code but with Typescript, it makes my code self-documenting. I don't need to look back into my other components after calling it to check it's parameters since Typescript will just notify me if I missed a required parameter. It certainly makes me structure my code way better. 

## VSCode Intellisense 

This is just the other big advantage if you use Typescript. Seeing these suggestions while you code makes you realize that you are missing a lot of things if you don't use Typescript with your javascript code.

![Intelligent Code](https://thepracticaldev.s3.amazonaws.com/i/g53egqabdq5fyau9ww4p.png)

### My React Project with Typescript

[WP React Typescript](https://github.com/loq24/wp-react-typescript/) is a simple admin functionality using Wordpress' REST API. I developed this to help other ReactJS developers in building an admin section of their project. I think the most complicated part of this project is integrating Typescript with React Redux. I added some instructions on how this was achieved in the README file. I hope this will help someone someday.

This is my first post in Dev.to and my first online post as well. Your feedback will be highly appreciated :)
Quake-style Sliding Console
Tags: quake, console, terminal, cmder
Published: 2019-08-12 16:29:04

---
title: Quake-style Sliding Console
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/v2spb3zqj6u4k9370k40.png
description: Make your cmder console a bit more awesome
tags: quake,console,terminal,cmder
---
Bored with your plain, old cmder console? This tutorial will show you how to add some retro Quake-style flavor to it!

![After](https://thepracticaldev.s3.amazonaws.com/i/1xxrts7ltk5oiyvv7hvo.gif)

## Prerequisites
A cmder installation with default settings.
* https://cmder.net/

## Background image
Let's start by adding the Quake console background image. Download the image from [here](https://vignette.wikia.nocookie.net/quake/images/f/f5/Conback.png/revision/latest?cb=20150212215701). Open up the settings dialog and go to `General->Background`. Check Background image and set the path to the image you just downloaded with Placement *Stretch*.
## Font
The next step is to download the Quake font in order to add some more visual flavor. You can get it from [here](http://www.thealmightyguru.com/GameFonts/Fonts/Font-Quake1.zip). Install the font and go to `General->Fonts` and set Main console font to *Quake1*.
## Slide down
Now we will add the slide down behavior from Quake and similar games. Go to `General->Quake style` and check Quake-style slide down and Always on top. Set Frame width to 0 to hide the borders around the console window.


Go to `Keys & Macro` and select Minimize/Restore (Quake-style hotkey also). Click the Choose hotkey field and press the tilde key (or whichever one your prefer). Make sure nothing is selected in the dropdown menus after Choose hotkey (such as Ctrl or Shift).
## Finishing touches
Go to `Features->Status bar` and uncheck Show status bar. Go to `General->Tab bar` and check Don't show. The settings button will be hidden now, but you can access settings through Win+Alt+P. 

Don't forget to save your new settings!

## Credits
* https://quake.fandom.com
* http://www.thealmightyguru.com