teleren/devto huggingface dataset:
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2020-03-10 23:17:08

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

@ahferroin7 offered a great answer to **[What is the difference between parsing and serialization?](https://dev.to/coolshaurya/what-is-the-difference-between-parsing-and-serialization-543b)**:
{% devcomment m7cc %}

@dstarner shared their OSS-related accomplishments in **[What was your win this week?](https://dev.to/jess/what-was-your-win-this-week-5dj6)**:
{% devcomment mamh %}

@harri_etty offered their popular answer to **[Unpopular opinions](https://dev.to/belhassen07/unpopular-opinions-14ea)**:
{% devcomment mcbi %}

@alexkadis replied to one of the most fun prompts in a long time: **[Fellow Developers, What Should Our Last Name Be?](https://dev.to/roygreenfeld/fellow-developers-what-should-our-last-name-be-cle)**:
{% devcomment mali %}

@ryansmith shared their tips in response to **[What makes for readable code?](https://dev.to/ben/what-makes-for-readable-code-34o7)**:
{% devcomment m7p1 %}

See you next week for more great comments ✌
Desarrollo seguro en ingeniería del software. Aplicaciones seguras con Android, NodeJS, Python y C++
Tags: desarrolloseguro, node, python, c
Published: 2020-03-10 22:43:32

---
title: Desarrollo seguro en ingeniería del software. Aplicaciones seguras con Android, NodeJS, Python y C++
published: true
description: 
tags: desarrollo seguro,nodejs,python,c++
---

https://www.marcombo.com/desarrollo-seguro-en-ingenieria-del-software-aplicaciones-seguras-con-android-nodejs-python-y-c-9788426728005/

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

El desarrollo seguro de aplicaciones implica un cambio hacia un nuevo modelo de trabajo. Si quiere estar a la última sobre cómo mitigar errores comunes de programación y evitar posibles atacantes en sus aplicaciones, este es su libro.
El manual expone los procesos necesarios a seguir por todo desarrollador e ingeniero de software para disponer de buenas prácticas de seguridad desde las primeras fases del desarrollo. Gracias a los contenidos del libro:
o Conocerá el conjunto de tareas que minimizan, en la medida de lo posible, la exposición de la aplicación ante posibles ataques.
o Sabrá cómo mantener de manera eficiente los paquetes que se incorporan en las aplicaciones.
o Dominará las diferentes herramientas para analizar el código fuente desde un punto de vista estático y dinámico en aplicaciones basadas en Android, NodeJS, Python y C++, desde un enfoque teórico-práctico.
Además, a partir de los ejemplos prácticos que respaldan el libro, sacará el máximo provecho a las herramientas para analizar el código fuente de las aplicaciones.
Estar al día, está a su alcance. Consiga este libro, elija las herramientas y las metodologías adecuadas, y desarrolle aplicaciones de forma segura.
The return of the Personal Blog
Tags: life
Published: 2020-03-10 22:43:08

---
title: The return of the Personal Blog
published: true
description: I finally got my personal blog up and running since the beginning of the year
tags: life
---

So I did it. I got my [personal blog](https://craigbutcher.io) up and running since the beginning of the year. I wrote [Welcome Back.](https://craigbutcher.io/writing/welcome/) and then discussed about [Topics](https://craigbutcher.io/writing/topics/).

I did think about publishing a new article daily yet time is something precious that I would like to invest carefully. A friend nudged me about the idea of week notes which seems to be working. After reaching [Week Note Ten - Loo Rolls Nation](https://craigbutcher.io/notes/2020/weeknotes-10/), slowly adding styling and coming up with several crazy single page websites that I will publish soon.

I'm going to say this to remind myself again and again, it is the first time in years that I'm quietly excited to get back into web designing and development again :-)
Some Amazing Podcasts
Published: 2020-03-10 22:22:29

I have been listening to podcasts for years now. I think a friend introduced it to me in 2013 on iTunes. In the beginning, what got me hooked was [Snap Judgment](https://www.wnycstudios.org/podcasts/snapjudgment) and [Latino USA](https://www.latinousa.org/). Another great show was the first season of [Serial](https://serialpodcast.org/). They made me a daily podcast listener. I probably listen to shows for hours every day :smile:

Through the years I have discovered several amazing technical podcasts. Hopefully, you will find a new one below. 

## Ruby Rogues

![Ruby Rogues Cover](https://is3-ssl.mzstatic.com/image/thumb/Podcasts113/v4/98/bc/99/98bc99d7-b885-85ad-c150-3b0ad3e0b53b/mza_8013017041675752157.jpg/600x600bb.jpg)

[Devchat.tv](https://devchat.tv/ruby-rogues/) has lots of great stuff but [Ruby Rogues](https://devchat.tv/ruby-rogues/) is one of those gems (pun intended) that was really filled with lots of knowledge bombs and humor. I was not using Ruby professionally but stilled listened to the show. You can learn lots of things about Ruby but there is plenty that is related to general programming, being a human and enjoying life. Check out episode [#131 on How to learn](https://devchat.tv/ruby-rogues/131-rr-how-to-learn/).

## This Developer's Life

![This Dev life](https://www.threatstack.com/wp-content/uploads/2019/06/ThisDevelopersLife-min-1.png)

Unfortunately, the show does not have that many episodes but the ones I have listened to are fantastic. You even have some interesting music in there. I have lost count of how many times I replayed some of the episodes :smile: Checkout out the episode on [Audacity](http://thisdeveloperslife.com/post/1-0-7-audacity).

## CRE: Technik, Kultur, Gesellschaft

![CRE cover](https://spotlight.radiopublic.com/images/thumbnail?url=https%3A%2F%2Fcre.fm%2Ffiles%2F2018%2F12%2FCRE-logo-cover-2400px-web.jpg)

This show is in German but the quality and content are top-notch. It's worth learning German just so you can listen to it :wink: Also the host Tim Pritlove is excellent at asking questions and giving his guests the time to speak. Check out  episode [#209 Das Linux System](https://cre.fm/cre209-das-linux-system).

---

Thanks for reading.
Day 92 : Tonight
Tags: hiphop, code, coding, lifelongdev
Published: 2020-03-10 21:58:30

***not sure what happened but I have to rewrite this post***
_liner notes_:
- Professional : First day of the internal hackathon. Made some good progress. It's a project that I've been wanting to make since launching https://otech.events . I will be working on a dashboard that meetup organizers can log into and stream their events without me having to be there. Building this using the company's products. Really learning alot of the things we offer. Got a lot done. I was able to pull in different sources into one place. Now, I just need to broadcast it to a destination like YouTube, Twitch, etc. I'm watching a tutorial/webinar where some coworkers are building something and broadcasting.

- Personal : Going to keep working on my hackathon project. I have been wanting and promising to get this done, but never really had the time to sit down and focus. Pretty cool that my job is giving us the chance to work on things like this.

![Clouds above Žalý, Czechia](https://dev-to-uploads.s3.amazonaws.com/i/qs4hyrp6tjwlaec75hj0.png)

So yeah... going to keep working on this project. Want to get something broadcasted tonight.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube mG8TjCX-ems %}
Firefox's New Multi-Line Console Editor is Awesome
Tags: javascript, coding, webdev
Published: 2020-03-10 21:44:23

Firefox may no longer be the go-to browser for most developers.

However, those of us who were present in the *First Browser War* in the 90's remember Firefox —originally named *Phoenix*, born from the ashes of Netscape— as a strong contender for the Heavyweight Championship.

*(spoiler alert: Firefox lost)*

I still use Firefox (simultaneously with Chrome) since it has a special place in my heart, plus many nifty features that keep me coming back.

**In particular, I am in love with their new multi-line editor:**

![Firefox's Multi-line Editor](https://dev-to-uploads.s3.amazonaws.com/i/v3k7t0q4lyrypg8cabqh.png)

To toggle it, find a tiny button hidden on the upper right corner of the console:

<figure style='border: 1px solid lightgray'>![Shortcut for multi-line console](https://dev-to-uploads.s3.amazonaws.com/i/fgagarp2opdciugek54c.png)</figure>
<figcaption>Ctrl+B (Cmd+B) will also work... if you still have any room in your brain to memorize one more shortcut</figcaption>

It was introduced last December and as a heavy console user (read: someone who is lazy to run node locally more often than not), it is a feature that caught my attention right away.

**Here it is in action:**

![Multi-line Editor in Action](https://dev-to-uploads.s3.amazonaws.com/i/86pncnzyzrtqxzaqppqj.gif)
﻿﻿<figcaption>I am not ashamed to say that I need to review how to use Array.reduce() every two weeks.</figcaption>

Shortcuts are your allies here, `Ctrl+Enter` (`Cmd+Enter`) runs the code snippet and `Ctrl+Shift+K` (`Cmd+K`) clears the console.

### So what does it do that Chrome doesn't?

I mostly use the console to make sure that I test Stack Overflow answers properly (**pro-tip:** posting wrong answers on Stack Overflow will send your reputation down south very quickly).

If you use Chrome's console and need to edit a function or a snippet multiple times, you will need to juggle between `Enter` and `Shift+Enter`, something I don't find particularly pleasant.

You can also do multi-line snippets on Chrome [creating a new snippet](https://stackoverflow.com/a/43013026/8316908), or through third-party extensions, but so far I prefer Firefox's UI.

I have been using the console to run Leetcode exercises quickly, since their editor takes a bit of time to compile, and Firefox's multi-line editor is perfect for that.

In the end, Chrome satisfies my browsing and developer needs, but I am happy to see the latest trend in innovation and privacy from Mozilla.

Do you still use Firefox? Are there any features that keep you from forever uninstalling it? Let me know in the comments: 👇

---

##### 👋👋 [Follow me on Twitter](https://twitter.com/yuanhaochiang) if you enjoyed this post! I've been hiding under a rock for the last 10 years and I *just* joined Twitter. I would be happy to connect :)
How to create a memory leak in Angular
Tags: angular, rxjs, performance, javascript
Published: 2020-03-11 06:14:02

---
title: How to create a memory leak in Angular
published: true
date: 2020-03-10 21:41:38 UTC
tags: angular,rxjs,performance,javascript
canonical_url: https://medium.com/angular-in-depth/how-to-create-a-memory-leak-in-angular-4c583ad78b8b
---

#### explore the most common cause of memory leaks in Angular apps — learn how to fix them and to avoid them in the future

![](https://cdn-images-1.medium.com/max/1024/1*ay7Cpc8Puc63zfuzilEpGw.png)

Performance is crucial to the success of a web application. As a developer, it’s essential to know how memory leaks are created and how to deal with them.

This knowledge is especially important once your application reaches a certain size. If you aren’t careful about memory leaks, then you may end up in a “memory-leak taskforce”. (Yes, I have also been part of one 😉).

Memory leaks can have multiple sources. However, we believe that in Angular, there’s a pattern to the most common cause of memory leaks. And, there’s also a way to avoid them. [Find out more](https://medium.com/angular-in-depth/how-to-create-a-memory-leak-in-angular-4c583ad78b8b)
Blah blah blah cloud, blah blah blah cloud.
Tags: enterprise, architecture, servicebus
Published: 2020-03-10 21:41:10

##Requirements: 
* All user-relations are to be centralized for GDPR reasons.
* Be able to create a ticket with an on-time provisioned user in remote system.
* User must be able to be on-time provisioned at login time.
* User experience during login process cannot deteriorate.

##Login process
We use Auth0 currently in our infrastructure to authenticate and authorize users. Now Auth0 allows something called rules to execute in the login process before passing on the JWT back to the calling application. There are some limitations to this. Per rule there is a limit on amount of ms of execution time before the rule is discarded. There is also a limit on the total amount of seconds before the entire rulechain is discarded. 

So adding more into the rule chain to be executed synchronously/awaited async calls, will increase the total login time for a user. 

The process itself is without any meaningful or informative graphics or copy telling them what is happening. Just a short loader and a bunch of redirects and stalled pages.

##Improvement
So here we can improve things. Not only can we scale down the rule-chain into bare essentials and offload everything else into a queue/service-bus/event-hub/etc (Azure Service Bus) and we could do websocket/long-running polls (SignalR) to get status updates on the login process, it wouldn't matter how much we add into it, but the user gets to know that we're doing something. Even if we're not explicitly telling them exactly what, they get something pretty to look at before we return them to the calling application.

So now we can ensure any number of remote systems being able to get auto-created users if they are not already created.

##The rest of the owl...
The same system then, that is listening to the queue, also has API endpoints exposed to manually fire off requests with payloads saying things like "take this user's JWT, create the user in system X in country Y" and the abstraction in that auto-provisioning API will handle it.

Not particularly ground breaking since these kinds of loaders are quite abound, but considering the backend systems we have to deal with, it's a nice upgrade.


##Summary
The first part is solved where we can maintain the already established centralized user-store.

The second and third parts are solved by being able to initiate remote system synchronization/on-time-provisioning through it's integration layer either through a queue or direct API calls.

And the fourth part is solved by that SignalR enabled spinner-app that awaits user to be fully finished with their login process by listening/watching that signoff of the user in the event-stream.
Learning querySelector in JavaScript
Tags: beginners, javascript, newbie
Published: 2020-03-10 21:34:30

One tool that every web developer using JavaScript needs to master is the querySelector.

querySelector takes an argument of CSS-compatible selectors and returns the first element that matches them.

If your html document doesn't have a lot of content then your argument could be incredibly simple. For example, if we had the code below

```
<body>
  <div>
    Check out the fruit of my labors!
  </div>
 
  <div>
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </div>
</body>
```

We could return the list containing apple with `document.querySelector('li')`. Note that this will only select the first list item. To select them all we would instead use the .querySelectorAll function.

However, what if we had an enormous document. We would need to be much more specific in how we select certain bits of information. For example, we could pass the following string

```
document.querySelector('div.fruits ul li p ul li ')
```

This would search our document for a div with a className of fruits. It would then look for the first unordered list that is a child of the div. Then it would find a list in the unordered list, then a paragraph in that list, then an unordered list in the paragraph, and finally a list inside of the unordered list.

As we continue to grow as developers it is crucial to have a solid understanding of the basics of selecting portions of your documents. Once mastered, querySelector will allow you to create interaction on any specific section of you webpages and applications!
Tip: Set your "experience level" for a more tailored feed.
Tags: meta
Published: 2020-03-10 21:33:54

If you go to [/settings/ux](/settings/ux), you'll see a few nobs for adjusting your DEV experience, such as fonts (I'm sans-serif all the way!)

One of the settings is "experience level", a self-assigned number to help your feed deliver the most relevant content.

If you're a newbie, set it to 1 or 2, if you're more experienced go 4 or 5.

It's not an exact science, but it will help gently nudge your feed a little bit towards your appropriate level as a developer along with the tags you follow. It's 100% private, so choose the most honest answer.

We have seen improvements to feed relevance and will continue to try to tailor it.

## **[👉 /settings/ux](/settings/ux)**

**To be clear: this is for your _consumption_ preferences. It will not imply the level you write _for_. A more experienced developer might write stuff for newbies, and a newbie might write highly-researched content that is best suited for experienced developers.**

Happy coding!
Rewarding Github contributions
Tags: github, community, opensource, discuss
Published: 2020-03-10 21:00:43

So I'll probably be cross posting on Twitter or something but here goes...

How do you reward people that take the time to contribute?

I recently had someone fix a bug in [httpref](https://github.com/dnnrly/httpref). No prompting, just a PR out of the blue that nailed the problem. I was shocked, and surprised, and so so glad that someone had taken the time.

Apart from a cursory 'thanks' when I hit merge and an impromptu shout out on Twitter I couldn't really do anything.

Is this something that anyone has been able to do? Just show someone how much you appreciate what they've done?

Discuss...
The way better than 'string'.truncate(3) in Rails, If it's responsive website.
Tags: rails, css
Published: 2020-03-10 20:53:55

## Usual Way
We could choose this way. It is fine if it's not for a responsive website.

```ruby
<%= @album.name.truncate(16) %>
```


## Problem Situation
I have a responsive website. I should truncate the string at the client side but not the server-side.


## Solution
There is a way to truncate string in CSS.

```css
.truncate-title {
  width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

```erb
  <ul class="navbar-nav mr-auto truncate-title">　
    <li class="nav-item">
      <span class="navbar-text">
        <%= yield(:header_title) if content_for?(:header_title)%>
      </span>
    </li>
  </ul>
```

## Image
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0w8mqulssw1xpstd2zni.png)
MESG Ecosystem Hackathon
Tags: hackathon, blockchain, opensource, microservices
Published: 2020-03-10 20:46:27

The MESG Foundation is throwing an online hackathon, and are looking for awesome services and processes, and also tools like wallets, explorers process builders or debuggers to interact with the MESG blockchain built using Tendermint.

## Details
The MESG Ecosystem Hackathon runs from **March 1st to April 26th, 2020**, online at Devpost. Developers of all skill levels are more than welcome to join.

**$9,000 in prizes** will be given away to those who build tools, services and/or processes that show exceptional quality, originality, creativity, impact and usefulness.

See the full details and rules [on the MESG blog](https://blog.mesg.com/announcing-the-mesg-ecosystem-online-hackathon/).
Using the Active Storage Gem to Upload Photos 

Tags: rails, ruby, gem
Published: 2020-03-10 20:35:56

While working on a meal-tracker app, I discovered that allowing users to upload a photo was a fundamental, and not so difficult, feature to implement in Rails. 

In this post, I will cover: 

1. adding the Active Storage gem to your gem file 
2. creating a macro for attaching that photo to a class
3. using a form to allow the user to upload a photo 

### Active Storage Gem 

Rails comes with an active storage gem that you can read about [here](https://edgeguides.rubyonrails.org/active_storage_overview.html). If you are adding it manually, simply add the gem to your gem file and run bundle install. You may be prompted on where you want to store that data. Choose the option that works for you. 

### The has_one_attached Macro 

The next step is to set up that association on the model. I knew I wanted the posts to have pictures attached to them. The has_one_attached allows macro allows the pic to be associated with the Post class. Keep in mind that a post is created with a pic in this case, allowing with many other attributes. 

![a has_one_attached macro added to the Post model](https://dev-to-uploads.s3.amazonaws.com/i/czzkc7mrhr56w62zuboo.png)


Want to allow more than one image? Use the has_many_attached macro instead. 

### Form and Post 

Finally, it’s time to write the form that will allow our user to upload a pic. I created a _form.html.erb in my views/posts folder to do this and added a file_field to a form_for. 

![f.file_field added to a form_for](https://dev-to-uploads.s3.amazonaws.com/i/2jddj7s66n6umn3bac51.png)


When I click on the Choose File button, I’m prompted to upload a photo from my computer. Now, when I create a post, the picture loads alongside the post!

![The file_field in action](https://dev-to-uploads.s3.amazonaws.com/i/1jarzm0xbm2g941svh85.png)

However, what if the user chooses not to upload a pic? You can take care of that logic by using a simple if statement. First, the .attached? method will check to see if an attachment was made. If it evaluates to true, it will display the image. If there’s no image to display, it will display the next attribute, a summary in this case. 

![if statement to prevent errors](https://dev-to-uploads.s3.amazonaws.com/i/p5s9xg0wr2vgpdnfy9ie.png)

Uploading photographs with Ruby on Rails is surprisingly simple process but offers a lot of customization. Don’t be afraid to use it in your next project!