teleren/devto huggingface dataset:
Auto Suggestion Search Bar With Icon In Angular Material
Tags: angular, webdev, html, css
Published: 2020-10-21 13:09:11

In this element, we used angular martial input filed with an autocomplete suggestion options panel. So here we made Auto Suggestion Search Bar With Icon In Angular Material with the help of SCSS/CSS and Material components.

In this search box, we modify martial angular class and components background and text colors. Also, we used CSS display flex properties with alignment items and columns for making this element center. This is a fully responsive element for mobile and tablet views.

Make it yours now by using it, downloading it and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/auto-suggestion-search-bar-with-icon-in-angular-material/)
First Hacktoberfest Participation
Tags: hacktoberfest
Published: 2020-10-21 13:05:40

## What I Learned From Hacktoberfest

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->

It was my first time participating in a Hacktoberfest. I learned a lot and is was a fun experience. For example I Learned how to work with forks, I never did this before.
Code Smell 02 - Constants and Magic Numbers
Tags: beginners, codenewbie, 100daysofcode, codequality
Published: 2020-10-21 12:53:07

*A method makes calculations with lots of numbers without describing their semantics.*

> TL;DR: Avoid Magic numbers without explanation.  We don't know their source and we are very afraid of changing then.

# Problems

- [Coupling](https://dev.to/mcsee/coupling-the-one-and-only-software-design-problem-2pd7)
- Low testability
- Low readability

# Solutions
1) Rename the constant with a semantic and name (meaningful and intention revealing).

2) Replace constants with parameters, so you can mock them from outside.

3) The constant definition is often a different object than the constant (ab)user.

# Examples
- Algorithms Hyper Parameters

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/dec9856bf69a06c367d2e683b179577a)
```php
<?

function energy($mass) {

    return $mass * (300000 ^ 2);
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/2e4c88a516078500ce833dbfbd3d9b0e)
```php
<?

function energy($mass) {

    return $mass * (LIGHT_SPEED_KILOMETERS_OVER_SECONDS ^ 2);
}
```

# Detection

Many linters can detect number literal in attributes and methods.

# Tags
- Hard coded
- Constants

# More info
- [Refactoring Guru](https://refactoring.guru/es/replace-magic-number-with-symbolic-constant)
- [How to Decouple a Legacy System](https://dev.to/mcsee/how-to-decouple-a-legacy-system-30ke)

# Credits

Photo by <a href="https://unsplash.com/@krisroller">Kristopher Roller</a> on <a href="https://unsplash.com/s/photos/magic">Unsplash</a>

* * *

> In a purely functional program, the value of a [constant] never changes, and yet, it changes all the time! A paradox!

_Joel Spolsky_

{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}

*Last update: 2021/05/31*
Role-based access control in Angular & Node
Tags: angular, node, webdev, tutorial
Published: 2020-10-21 12:34:44

---
title: Role-based access control in Angular & Node
published: true
description: 
tags: #angular #node #webdev #tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/rss70z7a927qxj8rl648.png
---

Role-based access control in Angular & Node
---

Design, implement and secure a full-stack role-based access control system in 60 minutes 👉 [Register for free](https://app.websecurity-academy.com/role-based-auth/)

What you'll learn:

**The case of role-based application**
Learn the essential design decisions and domain modeling for multi-user account system from the full-stack perspective

**Managing permissions**
We'll discuss different vectors of authorization for the described class of systems and provide a starting point for further design decisions

**Designing a secure REST API**
Learn proved recipes for designing REST API for user login, signup, and application's restricted areas that require proper authorization

**UserAuth object**
Discover a convenient  mechanism to transport user's information and roles

**Conditional components visibility**
How do we adapt a Single Page Application for a given role of a currently logged user? Learn about useful techniques and tricks.

BONUS: **Failed logins throttling**
How to secure an application from brute force or dictionary attacks? Let's design and implement a login throttler!

⚡ [Register for free](https://app.websecurity-academy.com/role-based-auth/) ⚡
Good practices: First write the test then fix the bug
Tags: goodpractices, tdd, testing
Published: 2020-10-21 12:34:44

---
title: Good practices: First write the test then fix the bug
published: true
date: 2020-10-21 12:32:55 UTC
tags: goodpractices,tdd,testing
canonical_url: https://le0nidas.gr/2020/10/21/good-practices-first-write-the-test-then-fix-the-bug/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/90f32jbj4i6pz8o7ixu3.png
---

You get a report about a bug. You open the app, follow the steps to reproduce it and, as mentioned in the report, your app is misbehaving. What’s next?

You can either dig immediately in the code and fix the bug or you can re-reproduce the bug, only this time in a test. The second. **Always** go with the second option.

Here is why:

1. **From now on you will have a regression test**.  
Meaning that if a change in the code breaks what you fixed you’ll get notified from the test suite and not your users
2. **It keeps you focused / You know when you finished.**  
This is a benefit you get from TDD in general. When the test passes the bug is fixed and you can move to your next task. Also, since you have to make the test pass, anything else that popped up during your research for the bug can wait (I usually write it down to a notepad I keep next my keyboard).
3. **You get a better understanding of the code.**  
By trying to write the test you get a better knowledge of how things are connected and communicate. Especially if you are new to a project this will boost your understanding significantly. 
4. **You discover more corner cases.**  
There are times that by writing this one test and seeing what inputs a class/function can have, you wonder how will the app behave under certain values. Finish the task at hand and then add a test for each case you want to explore. You might end up solving more bugs!
Halfway between tutorial hell and imposter syndrome!
Tags: codenewbie, beginners
Published: 2020-10-21 12:32:25

I have found myself learning to code for about a year now. I spent the obligatory few months going through some freecodecamp courses and then moved onto some more specific ones like Laracasts etc but quickly found myself wanting to work on a project that had meaning or relevance to me.

Not only that, but I found it a struggle to relate some of the functions, components and other things I was learning to real world situation.

So I decided to break away from the tutorials recently and I am building an app to help my son's learn spelling alongside their schoolwork. Then I ran into my next problem!

Starting a new project without the use of a tutorial and the overwhelming sense of "what do I do?", "I haven't learnt anything?", "What's a function?", "Is array even a word?!". It is daunting, you have to push past it and quickly realise it is ok to not know everything! 

So far since starting this app, I have set up a new Vue CLI project, started using NPM, integrated 0auth to allow users to login as I might want to share it with others in their classes, I have set up a new MySQL database with all the words, example phrases and definitions. I have googled what I needed, to find specific instructions and I am learning so much more than I have with tutorials.

The tutorials were great to understand terminology and basic stuff. however I found that just the trial and error basis of creating an app from scratch which will benefit me (or my kids) has been such a valuable experience.

But my advice, not that I am uniquely qualified in anyway to provide it, is to believe in yourself and give it a go. It's ok to research and Google, if you are waiting until you know everything to branch out on your own or go for that 1st job application, you might be waiting a while!
How to handle dead code and debugging
Published: 2020-10-21 12:29:42

Here’s the situation I found myself in:

- Co-worker finds a bug in a plug-in I made for work.
- In the process of debugging, I found dead and flimsy code.
- I found what was causing the bug
- There is a small overlap between the bug and the dead code.

I would have to refactor at least part of the dead code to fix the bug.

But, assuming the bug is not super-critical, what order would you do this in?

Would you remove/refactor code to get a clean canvas, make sure everything still works, and then fix the bug?

Or fix the bug, then clean out the “bad” code?

Or a third option I didn’t think of, I’m interested to hear 😊
How to develop technology that supports human flourishing
Tags: showdev, startup, ux, development
Published: 2020-10-21 12:27:57

Hello everyone! I’m a designer working in the tech industry who recently finished an MBA in psychology. My graduation work was the creation of a science-based design guide for technology that supports human flourishing. I’m calling it Human Flourishing Design Guide (HFDG).

[You can download it here] (https://www.flourishing.cc/)

I'm sharing it here in order to connect with and get feedback from other technologists, project managers, product leads, creators, or anyone else interested in creating humane technology.

Looking forward to receiving your feedback! 🙏
Nullish Coalescing Operator
Tags: react, beginners
Published: 2020-10-21 12:19:48

**`??` is part of ES 2021. Unless you have [Babel] integrated into your project, it will probably not work! Alternatively, just use your 'browser dev tools' (e.g. updated Chrome/FF/Edge).**

![Using `??` in Chrome Dev Tools](https://dev-to-uploads.s3.amazonaws.com/i/ewy0szcir5x5jcxtlnl0.gif)

---

## Short-Circuiting of Logical Operator OR - `||`

To appreciate the _nullish coalescing operator_ - `??`, you should understand:

{% link https://dev.to/codefinity/logical-operators-5ai4 %}

Specifically, the `||` short-circuit where if the left-hand side operand is 'truthy,' or can be _implicitly coerced_ to be `true`, the right-hand side is not evaluated.

For example, `3 || 4`, `4` will not be _evaluated_ because, *`3`, being a 'non-zero' _number_ will be _implicitly coerced_ to `true`.*

Similarly, in `"mark" || "anonymous"`; `"mark"`, being a non-empty _string_ will be treated as `true` and there is no need to consider `"anonymous"`.

Summarily, if the _left-hand side operand evaluates_ to `true` -  namely if it's *not* one of these...

- `0`
- `""`
- `null`
- `undefined`
- `false`

...then the _right-hand side operand_ will not be looked at.  

```javascript
const name = 'Mark Galloway';

// Since 'name' is a 'truthy' string, let's use that one!
const msg = `Hello, ${name || "anon"}`
```

## Fine, But What About `??`

It's quite simple really...it's all exactly the same as 👆🏽 _but_ *only `null` and `undefined` are considered `falsey`*

### Examples

As per [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator):

```javascript
const foo = undefined ?? 'default string'; // 'foo' will be 'default string'

const buzz = null ?? 'Not null!'; // 'buzz' will be 'not null!'

const baz = 0 ?? 42; // 'baz' will be '0'

const bar = false ?? 42; // 'bar' will be 'false'
```

🤷🏽‍♂️ - I don't really have much else to say on this one 👁️‍🗨️. If you understand _short circuiting of `||`_ then just trim the 'truthy' - 'falsey' rules down to *only* be: `null` or `undefined`.
Wednesday Links - Edition 2020-10-21
Tags: java, spring, microservices
Published: 2020-10-21 12:12:45

Powering Spring’s WebClient with Java 11’s HttpClient (3 min read) 🔌
https://candrews.integralblue.com/2020/10/java-httpclient-for-spring-web-client-boot-starter/

Proposed schedule for JDK 16 (1 min read) 🗓️
https://mail.openjdk.java.net/pipermail/jdk-dev/2020-October/004862.html

Relaxed assignment conversions for sealed types (3 min read) 🧘
https://mail.openjdk.java.net/pipermail/amber-spec-experts/2020-October/002582.html

Java Concurrency Stress (3 min read) 😡
https://github.com/openjdk/jcstress

Docker for Mac 2.4.2.0 breaks TestContainers (20 sec read) 🧨
https://twitter.com/whichrich/status/1318161270726643714

The Tyranny of Metrics (5 min read) 🤴
https://nemethgergely.com/blog/the-tyranny-of-metrics

An experiment with Little's Law (2 min read) 🧪
http://www.java-allandsundry.com/2020/10/littles-law-in-action-experiment.html

Nanoservices: The Power of Composition (4 min read) 🧩
https://www.http4k.org/blog/nanoservices/

How to put machine learning models into production (13 min read) 🧠
https://stackoverflow.blog/2020/10/12/how-to-put-machine-learning-models-into-production

Gradle 6.7 Released (8 min read) 🎉
https://docs.gradle.org/6.7/release-notes.html

Git 2.29 Released (10 min read) 🎉
https://github.blog/2020-10-19-git-2-29-released/

Spring Boot 2.4.0-M4 available now (1 min read) 🎉
https://spring.io/blog/2020/10/15/spring-boot-2-4-0-m4-available-now

Spring Authorization Server 0.0.2 available now (1 min read) 🎉
https://spring.io/blog/2020/10/15/spring-authorization-server-0-0-2-available-now
An outsider's view on the state and future of testing
Tags: testing, techtalks, leadership
Published: 2020-10-21 12:05:10

*This talk is not from myself; I'm sharing it on behalf of my colleague Yorck.*

---
##About the talk
[Yorck](https://www.linkedin.com/in/yorck-burneleit/) talks about the core insights from the scientific study published in the book Accelerate on how to build and scale high-performing technology organisations. In his opinion, the results of this study form a new 'north star' towards which organisations will need to align. After a general introduction into the study, he tries to reflect what it could mean for the discipline of software testing.

###[[pro:]TEST!](https://www.meetup.com/protest_cz)
The talk was presented at and recorded from [pro:]TEST! a meetup in Czech Republic around testing.

---

{% youtube ahXBWVXw5Qo %}

---

Feel free to leave comments on youtube or here.
Career Path 1:1 call Advice with an expert
Tags: career
Published: 2020-10-21 12:09:13

If you are trying to decide which path to take on your tech career and would like someone with experience in this industry to help you figure out which way to go, I encourage you to schedule a *free 1:1 call* with this volunteer from GetAdvice:

https://getadvice.github.io/juan.manuel.irigaray.juancho.jxoir.html

Juan Manuel (juancho) is offering a free one-to-one call through GetAdvice to anyone that needs helps with this subject.

*Disclaimer: I'm the guy behind GetAdvice (volunteers are needed!!). This is a way to promote getadvice.github.io and get more volunteers and users into the site too.*
Stunning Animated Background-only HTML & CSS
Tags: css, html, webdev, codenewbie
Published: 2020-10-21 12:07:15

Animation in CSS is used to animate to CSS properties like background-color, height, width, color, etc. Before, many developers used javascript or jquery to create animation when they make a website. But nowadays, css3 opens the door to develop awesome animation without the help of javascript. We can this project as an example because no javascript or jquery was used for this magnificent project.<a href="https://www.codingflicks.com/2020/10/animated-background-html-css.html">Download the code</a>
Daily Developer Jokes - Wednesday, Oct 21, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-10-21 12:00:09

---
title: "Daily Developer Jokes - Wednesday, Oct 21, 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=Wednesday%2C%20Oct%2021%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/5e1259169f6cb.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:___ A SQL developer walked into a NoSQL bar.

___A:___ They left because they couldn't find a table.
 -->
Would you like to know how to make a Gambling app?
Tags: gamblingapp, mobileappdevelopment, mobileapps, ux
Published: 2020-10-21 11:58:36

![athlete-1840437_1920](https://dev-to-uploads.s3.amazonaws.com/i/96peq4chod4w133bmahg.jpg)

The gambling industry is considered to be a very prospective and competitive field. That’s why the question about How to make a gambling app is very popular nowadays. So let’s focus on it!

Step by step the gambling app features are being developed. At the beginning its functional capabilities were quite poor and the apps offered a tiny amount of actions to conduct in it. Eventually they became more saturated with options due to technology science and will to make it better. Currently you won’t recognize a former gambling app, because from now on it’s a strong tool, which is not limited only with placing a bet option. 

What you should know before working on sports gambling apps? What goes around comes around. This statement perfectly fits our case. Before connecting with your audience through an app, such an ambitious field will definitely take efforts, time and funds. Players became more demanding and this raised the bar. That’s why building a gambling app requires a highly-professional approach of a talented team of developers.

Making your approach incremental matters as well. Start with minimum viable product (MVP). It will let you evaluate the job done and to gather users’ reviews for further updates. This deal doesn’t need a big team of specialists. And after you ensure that the created template was gladly met, you can get in more decisive actions and involve more developers and means to complete an application. 

What about gambling app price? It depends on the following points:

* The country where the app is meant to set up;
* Platform type;
* The number of sports and games involved;
* Adaptive design. 

When you decide to create a sports gambling app, be aware it’s a challenging sphere. More information in [this article](https://dinarys.com/blog/how-to-make-a-gambling-app) may help you to step on the right way.
Aha! I discovered Conway's law
Tags: discuss, conway, management, teamlead
Published: 2020-10-21 11:47:55

---
title: Aha! I discovered Conway's law
published: true
description: Conway's law, let's share experiences
tags: discussion, Conway, management, teamlead
//cover_image: https://direct_url_to_image.jpg
---

**Intro**

A friend of mine introduced me to the concept of Conway's law, and it triggered a classic aha! moment for me, so now I am looking for more opinions to challenge my psyched bias.

So let's share experiences. :)

If you do not know Conway's law, here is the gist of it grabbed from [Wikipedia](https://en.wikipedia.org/wiki/Conway%27s_law).

> Conway's law is an adage stating that organizations design systems that mirror their own communication structure.

---

**Story**

I've been learning to be a team/tech lead the past year and I have struggled with it since at my core I am a web application architect, I solve code problems, not organization problems.

I feel Conway's law is a really good new perspective for me.
Not to blame' everyone else, but as a tool to recognize when communication breaks down and how it reflects on the code/architecture.

Fx. some features got implemented really badly, how did that come about? What part of the decision making failed.

It's easy to blame developers for fx. not testing enough, but I find often bad code happens when developers are not working the same way, have decent specs, or when they are working too many domains at once.

I've been fretting about teaching my colleagues/juniors how to use the tools we have efficiently, but maybe what I should have been doing is limiting the domain that we work with to make sure we get good at one thing at a time.

This is definitely something I will try and apply in the future as well as looking at previous problems through this lens.

----

What are your thoughts on Conway's law?

* What are your experiences with Conway's law?
* How have you used it, or seen it applied?
* And do you have any advice on how to apply it from a team/tech lead perspective?

let's discuss it! :)

Keep your eye on the birdie!
Vargr
A Quick Look at the sort() Array Method in JavaScript
Tags: javascript, beginners, webdev
Published: 2020-10-21 11:34:02

```javascript
 (╯°□°)╯ .sort()
```

The Array method `sort()` is handy for ordering Arrays and Objects.

## Simple use

For simple use you can just call `sort()` on an array.

Let’s say we have an array of numbers that we want sorting from low too high.

```javascript
const nums = [5, 2, 1, 3, 4]

const numOrder = nums.sort()
// [1,2,3,4,5]
```

Or is you have an array of strings we want sorting alphabetically.

```javascript
const phonetics = ["zulu", "foxtrot", "charlie", "alpha"]
const orderPhonetics = phonetics.sort()
// [ 'alpha', 'charlie', 'foxtrot', 'zulu' ]
```

## Sorting Values from Objects

We have an _object_ of dogs:

```javascript
const dogs = [
  { name: "bob", age: 3 },
  { name: "winston", age: 10 },
  { name: "spike", age: 5 },
]
```

Let’s say we want to sort the dogs by youngest to oldest:

```javascript
const ageOrder = dogs.sort((a, b) => {
  if (a.name > b.name) {
     return 1;
  }

  if (a.name < b.name) {
    return -1;
  }
  return 0;
})

/* [ { name: 'bob', age: 3 },
     { name: 'spike', age: 5 },
     { name: 'winston', age: 10 } ]*/
```

We pass in two arguments to `sort()` and using a **ternerary operator** we _bubble sort_ the dogs by age. “Is a.age greater than b.age? If it is +1. If it is lower -1”.

Works the same when sorting alphabetically:

```javascript
const alphaOrder = dogs.sort((a,b) => {
  if (a.name > b.name) {
    return 1
  }
  if (a.name < b.name) {
    return -1
  }
  return 0
})
/* [ { name: 'bob', age: 3 },
     { name: 'spike', age: 5 },
     { name: 'winston', age: 10 } ] */
```
## Let's connect
[Twitter](https://twitter.com/davidbell_space)
Tim Sneath: "Flutter is to apps as Unity is to games"
Tags: flutter, interview, mobile, reactnative
Published: 2020-10-21 11:33:42

We talked with Tim Sneath, Google's product manager for Flutter and Dart, about how both the language and the framework have evolved over the last two years, how they're being used today, and where they're headed.

The Interview: https://evrone.com/tim-sneath-interview