teleren/devto huggingface dataset:
Top Six Youtube Videos, You must watch
Tags: tutorial, tips, youtube, mustwatch
Published: 2021-08-26 03:46:21

# Hey, Developers

Today morning, I was surfing the internet and was trying to get some ideas to write an article today.  Then, I found some of the videos which were worth sharing. And I thought of sharing about those videos in an article, so, here it is.

Let's see what are those videos, that you must watch as a developer and blogger.

## 1. NUMBER ONE Trait of a Senior Developer - Do you have it?
{% youtube XZ4bs6qQ5rs %}

In this video, James has explained how you can get a tag of "Senior Developer" and he has shared the things, that you'll need to be a senior developer and many other cool stuffs that you will need in your programming career.

From, his video the second video came here on the list.

## 2. FiveThings Junior Developers Need to Know

{% youtube PGF9HZQbiHc %}

In this video, Burke and Aimee sit down to talk about 5 things that Jr. Developers should know about. 

## 3. Hackathon! What? Why? Top tips

{% youtube Evx32fX9rXY %}

In this video, Eddie Jaoude has explained many things about Hackathons like why you need to join Hackathons, what are Hackathons and he has given some tips that you will require in every hackathon ever to get more from it.

## 4. Text Editor VS IDE - know the difference (PLEASE! 🙏🏻)

{% youtube k_lgOAN_wm8 %}

In 4th number, I have listed a video by Ania Kubow, where she has gone through:
- Pros of Text Editors
- Cons of Text Editors
- Pros of IDEs
- Cons of IDEs
And also explained why, IDE and Text Editors can't be compared.


## 5. How to make money while blogging | Competition!

{% youtube T568JobBjwM %}

This video was uploaded by Adrian Twarog, where he had told how technical writers or bloggers can make money by blogging. 

## 6. How to use APIs

{% youtube dfaj4vI8QxE %}

Another video on the list by Ania Kubow, where see has gone through:
- What is an API?
- Using a RestFul API - explaining GET, POST, PUT, and DELETE
- Making Requests
- Status Codes
- Working with Authorization
- REST vs SOAP vs RPC

This is a list of 6 videos, that you must watch on Youtube.
Customize MultiSelect Dropdown Items Using Templates
Tags: webdev, vue, javascript
Published: 2021-08-26 03:26:37

Learn how easily you can customize the Syncfusion Vue [MultiSelect Dropdown](https://www.syncfusion.com/vue-ui-components/vue-multiselect-dropdown) items using templates.

In this video, you will learn how to customize the Syncfusion Vue MultiSelect Dropdown items as well as the selected value. You will see how to add a header and footer for the MultiSelect Dropdown pop-up, and how to customize the MultiSelect Dropdown group title. 

Example: http://bit.ly/2UoE2KW 

Documentation: http://bit.ly/36URKrm

Download an example from GitHub: http://bit.ly/2OpIXHJ 

{% youtube biPKSEpTgwM %}
Can I Write A Clean Code?
Tags: cleancode, javascript, functions, webdev
Published: 2021-08-26 01:54:31

I have been having difficulties in writing clean code. But the series of posts in Medium helped a lot. So here are the links to the posts and my takeaways that are worth sharing from [part 1](https://faun.pub/writing-clean-code-9f3a4e8d06b7), [part 2](https://faun.pub/writing-clean-code-part-2-1e89dcf774df), [part 3](https://faun.pub/writing-clean-code-part-3-83ff269f9e58), & [part 4](https://faun.pub/writing-clean-code-part-4-bc436800a7f5) of the **Writing Clean Code** series by [Logeshvar L](https://medium.com/@logeshvarl).

1. Avoid redundant information. E.g: UserWithNameAndAge is more redundant and is very lengthy. Prefer User
2. Follow the casing conventions according to the language you’re using. Example: camelCase in Java/Javascript, snake_case in Python and so on.
3. Be consistent in naming your variables/methods. Example: Avoid using getAge(), fetchName(), retrieveMail(). Instead, be consistent and name them getAge(), getName(), and getMail().
4. Avoid slang, unclear abbreviations and disinformation (indicative of wrong data structure in the variable name, etc).
5. Avoid comments that say the obvious or those which are misleading.
6. Never comment out code, just remove.
7. Use comments only when you want to provide licensing information, warnings or there is a need to provide API documentation.
8. Use comments when code is difficult to grasp at a single sight and it would make it easier by providing some comments as explanations (e.g: regex).
9. Properly format the code by adding blank lines to separate unrelated concepts and grouping similar/ related concepts together.
10. Do not write an unreadably long line of code or name in a single line. Split them into multiple lines and use precise short names.
11. Write functions with a minimum number of parameters.
12. Keep your functions simple to read and understand without writing 100s of lines of code inside a single function. Instead, split into multiple short functions.
13. Consider splitting of functions, but be sensible.
14. Increase reusability and make code DRY (Don’t Repeat Yourself).
15. Try not to mix different levels of abstraction in the function.
16. Avoid unexpected side effects.
17. Check if your function makes unit testing easier.

These are the takeaways that you can pretty much read in the blog posts. After reading the posts. I hope we can all answer the question above that Yes! We can write clean code with practice and tips provided in the blog posts. 

I encourage you to read each post as he provides helpful examples and detailed steps/tips to implement writing clean code.

I'll surely get back to these posts as I write codes.

To God be the glory!
Platform engineering FTW
Tags: devops, platformengineering, softwaredelivery, teamtopologies
Published: 2021-08-27 20:00:21

---
title: Platform engineering FTW
published: true
date: 2021-08-26 00:00:00 UTC
tags: devops,platformengineering,softwaredelivery,teamtopologies
canonical_url: https://jhall.io/archive/2021/08/26/platform-engineering-ftw/
---

I [recently](https://jhall.io/archive/2021/08/24/devops-can-mean-anything/) I railed against the “DevOps team” title. But what should you use instead?

Well, of course it depends.

And there [different ways to do DevOps](https://jhall.io/archive/2021/03/18/two-models-of-devops/), but the [2021 State of DevOps Report](https://www2.circleci.com/2020-state-of-devops-report.html) points out that

> Four percent of survey respondents report they work on a “platform engineering” team, which seems to support the idea that this is an emerging trend in which teams move away from a focus on “DevOps” as a set of tools and practices (and title) towards a focus on the mission of their team in relation to other teams and the overall organization (reducing cognitive load, reducing friction and context required from Dev teams to adopt better/modern tools and practices).

These are all concepts addressed in detail in the book [Team Topologoes](https://amzn.to/3vgzx4C), which is also referenced by the report, and which I [reviewed in the past](https://jhall.io/archive/2021/05/24/book-recommendation-team-topologies/).

This “platform team” is my preferred approach to DevOps, as I believe it helps us overcome some of the common objections or pitfalls (sometimes imagined) of DevOps.

For example, with a platform-team, there’s no confusion over the question of [specialization](https://jhall.io/archive/2021/08/25/devops-doesnt-mean-you-cant-specialize/), as it’s clear who does dev work and who does ops work.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
UPLOADING IMAGES AND DOCUMENTS IN BLAZOR WEBASSEMBLY USING RADZEN
Published: 2021-08-26 00:21:40

In response to a question raised by a RADZEN Community member about which database datatypes are appropriate for storing BLOB objects, I do this tutorial which demonstrates how to insert and view images stored in SQL SERVER database using RADZEN BLAZOR Web Assembly

{% youtube sj2DOOD_Mpk %}
A Filosofia do Design de Software
Published: 2021-08-26 00:14:58

> _Nossa maior limitação na hora de escrever um código é a habilidade de entender o que estamos criando._
**- John Ousterhout**

Essa é uma das frases da introdução do livro [A Philosophy of Software Design](https://www.amazon.com.br/dp/B07N1XLQ7D/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1) que iniciei a leitura recentemente. A frase da inicio a argumentação sobre o que rege o desenvolvimento de software.

_`Essas notas serão livres, não se propõe a serem um resumo do livro.`_

Como o próprio nome já diz *soft*, de maleável, trás a ideia de que o software pode mudar e que é fácil de mudar. De fato nós podemos adicionar mais funcionalidades, isso é simples, porém, elas podem vir carregadas de dependências e de complicações, gerando complexidade.

É fato que a complexidade aumenta com o ciclo de vida de uma aplicação, quanto maior um sistema e quanto mais pessoas trabalham nele, maior a dificuldade em gerenciar a complexidade. No entanto, um design simples nos ajuda a entender e realizar esse gerenciamento, sem que isso se torne cansativo.

Para diminuir essa complexidade nós temos duas abordagens. A primeira é no design do código, criando algo simples e óbvio. A segunda abordagem foca na modularização do sistema, de uma forma em que as partes do sistema são encapsuladas e não há necessidade de lidar com toda a complexidade de uma vez. Geralmente esses módulos são desenhados para serem independentes um do outro.

A maioria dos projetos de software usam uma abordagem incremental, que vem do agile development. Essa abordagem foca em desenvolver pequenos tópicos da funcionalidade geral do sistema. Conforme ele é implementado, é avaliado a implementação e seus resultados. A partir disso é determinado se há necessidade de mudanças. Apenas após a aprovação é que a próxima etapa inicia. Um desenvolvimento incremental significa que o design do software nunca está concluído, que é um processo continuo, até o fim do ciclo de vida do sistema. 

#### Com isso, nós, desenvolvedores, temos algumas obrigações com o design do sistema que estamos mantendo:
- O design acontece de uma forma continua no ciclo de vida de um sistema, por isso devemos sempre estar pensando em problemas de design.
- Nós devemos sempre estar procurando por oportunidades de melhorar o design do sistema em que estamos trabalhando, e devemos sempre planejar gastar uma fração do nosso tempo nessas melhorias de design.
- Se nós devemos sempre estar pensando sobre problemas de design, e a redução de complexidade é a coisa mais importante no design de software, então podemos concluir que nós, devemos sempre estar pensando sobre complexidade.

Vale ressaltar também que: o design inicial de um sistema ou de um componente nem sempre é o melhor, a experiência inevitavelmente vai nos mostrar uma melhor forma de fazer as coisas.

#### Conclusão
A melhoria do design e o controle de complexidade de um software é um trabalho continuo. Vale pensar em como lidamos com isso no ciclo de vida das nossas aplicações!
Which HTML element tag can be used to store information about a website or its metadata?
Tags: html
Published: 2021-08-26 00:00:00

---
  title: Which HTML element tag can be used to store information about a website or its metadata?
  published: true
  tags: HTML5
  date: Thu Aug 26 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/html-element-tag-to-store-information-metadata-website
  cover_image: https://melvingeorge.me/_next/static/images/main-b7e1fc31d102042d2c9614bab0bab9e2.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/html-element-tag-to-store-information-metadata-website)
  
**The best HTML element to store information regarding a website that is not visible to the user, website metadata, or code that can be read by the system to execute and show the webpage is the `head` HTML element tag.**

For example, the `head` HTML elements tag is used to add `script`, `styles` and, `title` HTML element tags which are not used by the user directly but are needed by the system to execute and show the webpage to the user.

The `head` HTML element tag can be written like this,

```html
<!-- Usage of the 'head' HTML element tag -->

<!DOCTYPE html>
<html lang="en">
  <!-- 'head' HTML element tag  -->
  <head> </head>
  <body>
    Hello World
  </body>
</html>
```

Now inside this `head` HTML element tag, we can use the meta tags like `script`, `link`, `title`, etc. to supply information to the system for execution or store metadata for other purposes.

For an example, a simple `head` HTML element tag may look like this,

```html
<!DOCTYPE html>
<html lang="en">
  <!-- 
    'head' HTML element tag with some meta tags 
    used by the system for executing and showing the webpage  
  -->
  <head>
    <title>Hello World!</title>
    <link rel="stylesheet" href="main.css" />
    <script src="js/app.js"></script>
  </head>
  <body>
    Hello World
  </body>
</html>
```

See the above code live in [JSBin](https://jsbin.com/gisulizone/2/edit?html,output).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Persist data with like button React
Published: 2021-08-25 23:07:51

I created a like button that I could use in two different routes to persist data to a third route.

First I created the LikeBtn class and set its state of liked to false so I could change that status to change the color after it has been clicked. 

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

Next, I gave the button a handleClick function to change that state of liked from false to true. Then I used a GET request and the POST method to persist that data to my localhost server. 

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


Finally, I use render to change the style color and the onClick functionality and render and all other properties of the button.

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

Now, let's take a look at the full code. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0k7tea6052vyyv8uhyk.png)
How to handle categorical variables with large number of unique values
Tags: preprocessing
Published: 2021-08-25 22:59:35

How to handle categorical variables with large number of unique values.

I have a payment dataset with about 10000 observations which has DateTime fields, Expenses category fields, Payee name field, Amount fields. I want to identify anomalous payments in this dataset. 

In regards to expenses category and Payee name fields there are more than 100, and 400 unique values.
There for is it appropriate to create dummy variables for these categorical fields?
Instead should I create subsets of dataset based on unique categorical variables. (eg- Dataset for Travelling expenses)

Appreciate it if you can give some inputs.
My journey through Lambda labs
Published: 2021-08-25 22:55:51

## Human Rights First 

During my final month of coding bootcamp, a small team of fellow engineers and myself were tasked with iterating and developing the user-facing features and backend communication of a web app for a NPO called "Human Rights First". The Human Rights First Organization is an independent advocacy and action organization that challenges America to live up to its ideals. They believe American leadership is essential in the global struggle for human rights, so they press the U.S. government and private companies to respect human rights and the rule of law. When they fail, they step in to demand reform, accountability and justice. Around the world, they work where they can best harness American influence to secure core freedoms.

From the day our team was assigned the opportunity to work on such a meaningful project, we met with a stakeholder from the organization, she gave us some good insight and expressed excitement in what was expected to be delivered. Our team was expected to develop a web tool backed by data science that displays data on asylum cases, allows users to explore this data, and predict how a judge might rule on a specific case as well as what elements of a case seem to most impact a favorable and unfavorable ruling.

The project lasted 28 days for our team and good majority of the time spent involved meeting with other team members and planning. The first thing we did during our initial planning phase was brainstorm different user stories, for example, "As a user, I can clearly visualize asylum case data from a specific judge". Following this step we began to break down our user stories into tasks and assign the tasks to different teams. In the user story example mentioned earlier, we needed to created multiple tasks and ensure each group in our team was involved. We needed the data science team to scrape data on specific cases, the backend engineers were tasked with creating an API that the frontend can communicate with to access that data, and the frontend engineers were responsible for displaying the data received to the user.
Day 438 : We
Tags: hiphop, code, coding, lifelongdev
Published: 2021-08-25 22:00:37

_liner notes_:
- Professional : Had a good day. Looks like a bug in one of my demos I was working on got fixed. Going to look more into it tomorrow before a meeting so we can make sure everything is good. Also worked on refactoring some code for another demo I'm working on. Then I put the rough draft of a blog post I wrote into our CMS. Not bad.

- Personal : Watched an episode of Boruto. Added to a previous Codepen project the functionality of taking the stream from a screen share and putting it in a canvas element. From there, I made it possible to switch the feed going into the canvas element to be either from the screen share or the live stream camera. My plan is to use that screen share for things like the starting soon, taking a break, and event is over scenes that can be switched from the dashboard. Previously, I was updating the canvas for every scene. I think this may work out better, but we'll see.

![A forest in Oregon, United States with a river flowing through the middle of the trees](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0chkialue5ov711vadk.jpg)

There should be another episode of "What If" on Disney+. Going to check that out and after that, take what I got working in the Codepen and implement it into the broadcast dashboard of my side project. If I have time, I'll go through some tracks for this week's radio show .

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube WSqNwAU8pNQ %}
How to create multiple parameters dynamic routes in laravel?
Tags: laravel, webdev
Published: 2021-08-25 21:56:27

Sometimes, we needs to add multiple routes in our laravel application. Here we will create dynamic routes so we can use as many parameters.

First of all add the code given below in your routes file. we are using the laravel 5.5 so our routes file is web.php under routes directory.

```php
Route::get('{slug?}', 'UriController')->name('page_url')->where('slug','.+');
```

Now create a controller file UriController.php under your controllers directory and add the code given below.

```php
<?php

namespace App\Http\Controllers;

use App\User;
use App\Http\Controllers\Controller;
use Illuminate\Http\Response;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\View;
use Illuminate\Support\Facades\DB;

class UriController extends Controller
{
    /**
     * Show the page for the given slug.
     *
     * @param  string  $request uri
     * @return Response
     */
    public function __invoke(Request $request)
    {

        $request_path = $request->path();

        $request_path_array = explode('/', $request_path);

    }


}
```
###Code Explanation:
We add a parameter {slug?} in our route and added the where condition. So, we can add as many parameters dynamically. You can also add any regular expression in where condition. Now your url will look like this https://example.com/parameter1/parameter2 and so on.

We have used the name method in our routes to access routes through name in our blade templates or controllers like this

```php
route('page_url',['slug' => 'abc/123']);
```

Here we created a Single Action Controller UriController and we gets the uri in our __invoke method.

In our request method we have $request_path_array. So, we can loop through our dynamic parameters passed in url.

If you want do not want to apply particular uri to the route above then you can use the code given below which uses the all routes except the api in the routes.

```php
Route::get('{slug?}', 'UriController')->name('page_url')->where('slug','^(?!api).*$');
```

If you want add prefix to your routes then you can use the code given below. Now your url will look like this https://example.com/your-prefix/parameter1/parameter2 and so on.

```php
Route::prefix('your-prefix')->group(function () {

	Route::get('{slug?}', 'UriController')->name('page_url')->where('slug','.+');

});
```

Thanks:)
Please give your suggestions :)
JS Coding Question #1: Count all vowels [3 Solutions]
Tags: challenge, javascript, tutorial, career
Published: 2021-08-25 21:55:41

---
title: JS Coding Question #1: Count all vowels [3 Solutions]
published: true
description: Front end job interview question, count vowels in a sentence
tags: challenge, javascript, tutorial, career 
cover_image: https://images.unsplash.com/photo-1471238119891-2e56eca253b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80
series: Job Interview Preparation Materials
---

#### Interview Question #1:
Write a function that counts all vowels in a sentence❓🤔

> If you need practice, try to solve this on your own. I have included 3 potential solutions below. 

> Note: There are many other potential solutions to this problem.

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

Code: https://codepen.io/angelo_jin/pen/zYzYdmQ

#### Solution #1: String match method
- String.match method retrieves the result of matching a string against a regular expression.

```js 
function getVowelsCount(sentence) {
  return sentence.match(/[aeuio]/gi) ? sentence.match(/[aeuio]/gi).length : 0;
}
```

#### Solution #2: for-of And regex
- simple iteration checking every characters in a sentence using regex does the job.
```js
function getVowelsCount (sentence) {
	let vowelsCount = 0
	const vowels = ['a', 'e', 'i', 'o', 'u']

	for (let char of sentence) {
		if (/[aeiou]/gi.test(char.toLowerCase())) {
			vowelsCount++
		}
	}

	return vowelsCount
}
```

#### Solution #3: for-of AND Array includes
- this is a good alternative instead of using solution above. Basically, replace regex test and utilize array includes instead.
```js
function getVowelsCount (sentence) {
	let vowelsCount = 0
	const vowels = ['a', 'e', 'i', 'o', 'u']

	for (let char of sentence) {
		if (vowels.includes(char.toLowerCase())) {
			vowelsCount++
		}
	}

	return vowelsCount
}
```

Happy coding and good luck if you are interviewing!

If you want to support me - [Buy Me A Coffee](https://www.buymeacoffee.com/letscode77)

In case you like a video instead of bunch of code 👍😊
{% youtube zvaUUDQec18 %}
Gigasecond | #5 | Exercism.io | Learn JavaScript Through Test Driven Programming Challenges
Published: 2021-08-25 21:44:39

{% youtube y54bHdID2yg %}


Get started with the Exercism.io Programming challenge site https://exercism.io/my/tracks. Learn about Test Driven Development, JavaScript, Node/NPM, dates, and math powers.

Checkout this video on our player: https://play.codecast.io/j1OpkqVeLGYv...

Watch more of Brooklin Myers videos here :https://www.codecast.io/users/brooklin
Resistor Duo | #4 | Exercism.io | Learn JavaScript Through Test Driven Programming Challenges
Published: 2021-08-25 21:44:23

{% youtube bERnn1Q9y04 %}


Get started with the Exercism.io Programming challenge site https://exercism.io/my/tracks. Learn about Test Driven Development, JavaScript, Node/NPM, and Array destructuring.

Checkout this video on our player: https://play.codecast.io/vaPL6wA35MNe...

Watch more of Brooklin Myers videos here :https://www.codecast.io/users/brooklin