teleren/devto huggingface dataset:
TIL - How to create a Logo & use it as Favicon!
Tags: react, logo, favicon, beginners
Published: 2020-09-26 20:59:26

##Create Logo
Try [Canva](https://www.canva.com) 
or [get help with creating one](https://www.tailorbrands.com/logo-maker)

##Use it in Navbar
![Logo AQ](https://dev-to-uploads.s3.amazonaws.com/i/0q0ljbdowsrekhe2dhim.png)

##Use it as Favicon
A Favicon is a small logo for the website, tab, URL, bookmark. 
Create Favicon on [Faviconer](http://faviconer.com/)

##React 
just replace `favicon.ico` in the `public` folder

##html

 add the line(s) below to`<head>` section

```html
!-- default favicon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

<!-- wideley used favicon -->
<link rel="icon" href="/favicon.png" sizes="32x32" type="image/png">
 
<!-- for apple mobile devices -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="152x152">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="120x120">
 
<!-- google tv favicon -->
<link rel="icon" href="/favicon-googletv.png" sizes="96x96" type="image/png">
``` 
different types
```html
<link rel="icon" type="image/gif" href="https://example.com/image.gif">

<link rel="icon" type="image/png" href="https://example.com/image.png">

<link rel="icon" type="image/svg+xml" href="https://example.com/image.svg">

```
Country list in laravel 8 and Laravel 7
Tags: countrylist, laravel, php, webdev
Published: 2020-09-26 20:49:37

Hello guys, today I am going to show you how to get the list of all the countries in your laravel 8 app, it is also applicable to laravel 7 downwards. 
Sometimes, you might need to create a form where the user is required to add his/her country or you just need to use the list of all the countries, you don’t need to ask your user to type his/her country or searching online for the list of all the countries, all you need is call a class and it will give you an array of all the countries in the world.

Click on my [profile](https://dev.to/kingsconsult) to follow me to get more updates.

This is simple using a package called **Monarobase/country-list**, without saying much, let’s dive in
### **Step 1: add the package to our app**
> composer require monarobase/country-list

![install monarobase](https://res.cloudinary.com/kingsconsult/image/upload/v1601150421/laravel%208%20countries/1_ai3n3o.png)
### **Step 2: add the ServiceProvider to the providers**
Go to **config/app.php** and locate the array for **Providers**, add the class below
> Monarobase\CountryList\CountryListServiceProvider::class,

also add the code below to the **aliases**
> 'Countries' => Monarobase\CountryList\CountryListFacade::class,

### **Step 3:  call the class in our controller**
At the top of the controller that you are going to use, call the class after the namespace.
> use Monarobase\CountryList\CountryListFacade;

![use Monarobase class in controller](https://res.cloudinary.com/kingsconsult/image/upload/v1601150420/laravel%208%20countries/3_vacwgs.png)
### **Step 4:  declare a variable**
Go to the method that you want to use, declare a variable with the class. You will also send it to the view using compact();
![declare and send the variable to view](https://res.cloudinary.com/kingsconsult/image/upload/v1601150420/laravel%208%20countries/2_voujac.png)
### **Step 5:  use the variable in your view**


```
<div class="col-xs-12 col-sm-12 col-md-12">
    <div class="form-group">
        <strong>Country:</strong>
        <select name="country" id="country" class="form-control mb-1">
            <option value="">Select Country</option>
            @foreach ($countries as $country)
                <option value="{{ $country }}">{{ $country }}</option>
            @endforeach
        </select>
    </div>
</div>
```
This is our result
![a form with country list](https://res.cloudinary.com/kingsconsult/image/upload/v1601152459/laravel%208%20countries/4_sqxzdn.png)
as usual, You can follow me, leave a comment below, suggestion, reaction, or email me. 
Click on [my profile](https://dev.to/kingsconsult), to see my other post and contacts
How do all of you handle user sign up flows?
Tags: discuss
Published: 2020-09-26 20:38:08

I've seen:

⚫ Sign up form (email and password) ➡ Verification email ➡ User logs in

⚫ Sign up with email ➡ Verification email to account setup page (details and password) ➡ User is logged in

What benefits do you see in your method?
Security Headers
Tags: security, dotnet
Published: 2020-09-26 20:37:45

---
description: Check the security headers of your site
---
Have you wondered what info you are leaking via your response headers?, do you want some kind of guide about what headers to set or remove altogether?

Head on over to https://securityheaders.com/ This is a site created by security expert [Scott Helme](https://scotthelme.co.uk) that rates a URL based on what response headers it can see.

I am pleased to say www.funkysi1701.com is now getting an A.![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/07rwumi94fz141hwessu.PNG)

So how do you add/remove headers in dotnet core?

In my configure method in Startup.cs I have the following code block.

```csharp
app.Use(
    next =>
    {
        return async context =>
        {
            context.Response.OnStarting(
                () =>
                {
                    context.Response.Headers.Add("Permissions-Policy", "microphone=()");     
                    context.Response.Headers.Remove("Server");
                    context.Response.Headers.Remove("X-Powered-By");
                    context.Response.Headers.Remove("X-AspNet-Version");
                    return Task.CompletedTask;
                });

             await next(context);
         };
     });
```
I have only included a few of the headers I am adding as the excellent https://securityheaders.com/ can tell you which headers you should add and what options you might want.
Vuex 101 Snippet
Tags: vue, vuex, javascript, frontend
Published: 2020-09-26 20:18:54

# Vuex 101

Vuex is a state management library for Vue.js.
It has five main concepts:
1. State - App level state container
2. Getter - Used to access state data in the component
3. Action - perform computations on state and fetch data from remote API
4. Mutation - Commonly called by Action to change State's data
5. Module - containerized for of the above 4. For example: Todos Module, Auth Module...

## Code Snippets
 - create a folder named store inside src.

File `/src/main.js`

```JavaScript
import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
	store,
	render: h => h(App)
}).$mount('#app');
```

File `/src/store/index.js`
```JavaScript
import Vuex from 'vuex';
import Vue from 'vue';
import todos from './module/todos';

// Load Vuex
Vue.use(Vuex);

// Create store

export default new Vuex({
	modules: {
		todos
	}
});
```

File `/src/store/modules/todos.js`

```JavaScript
import axios from 'axios'; 
// we use axios to fetch data from remote API

const state = {
	todos: []
};

const getters = {
	allTodos: (state) => state.todos;
};

const actions = {
	async fetchTodos({commit}) {
		const reponse = await axios.get('jsonplaceholder.typicode.com/todos');

		commit('setTodos', reponse.data);
	}
};

const mutations = {
	setTodos: (state, todos) => (state.todos = todos);
};


export default {
	state,
	getters,
	actions,
	muations
};
```

File `/src/components/todos.vue`

```Vue
<template>
	<div>
		<h3> Todos </h3>
		<div class="todos">
			<div v-for="todo in allTodos" :key="todo.id">
				{{ todo.title  }}
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
	name: 'Todos',
	methods: {
		...mapActions(['fetchTodos'])
	},
	computed: {
		...mapGetters(['allTodos'])
	},
	created() {
		this.fetchTodos()
	}
}
</script>

<style>
</style>
```
Remote debugging WebXR on HoloLens
Tags: webxr, hololens, vorlon
Published: 2020-09-26 19:35:48

I recently started a new job as a Mixed Reality developer building applications for the Microsoft HoloLens. We build our applications using Unity3D. But, of course, I had to try and run WebXR on the device as well. Microsoft Edge comes with the HoloLens and supports WebVR. And switching to 'VR' removes the browser chrome and your 3D model becomes a hologram in the real world. After that, it gets different from running a WebXR app on other devices very quickly. One of the difficulties I ran into was debugging.

## Debugging

When running a web application on the Oculus Quest, for example, you can use Edge on your desktop de remotely debug. Just browse to [edge://inspect](edge://inspect) and without too much hassle you should be able to debug with the same tools you would debug any other website. The HoloLens runs the 'old' UWP version of Edge and can't be debugged with the new Chromium Edge. I've tried a couple of different approaches, but none worked. 

## Vorlon.JS
This is where [Vorlon.JS](http://vorlonjs.com/) comes in. This nifty little tool can replace the web debug tools and creates a connection to debug your website remotely. Just install the npm package globally on your machine (`npm i vorlon -g`). When you run this it spins up a small web server locally, by default on port 1337. You'll have to add a script that is served from this page to your HTML page and you are pretty much good to go. Except that I run my WebXR application using SSL, with a custom certificate (I have a DNS entry that points a local IP) and mixing secure and unsecured connections doesn't work in this case. 

To get this to work you have to find where Vorlon is installed on your Windows machine. In my case it's `%AppData%\npm\node_modules\vorlon\Server`. You'll have to edit the `config.json` file there. Basically it comes down to changing `"useSSL": true`. 
When you want to run SSL on LocalHost this is enough. In my case, I wanted to use my own certificate. To get this to work I copied the `.crt` and the `.key` files to the `/cert` folder. I also updated the config to use these. Don't forget to update the script tag in your .html file to use the domain name if that's different now. I added `<script src="https://{YOUR-IP}:1337/vorlon.js"></script>` to my HTML file. 

After this, you just open the Vorlon URL (`https://{YOUR-IP}:1337`) on your desktop and the WebXR app on the HoloLens. Anything that is written to the console will show up on the desktop. But you can explore a lot more on the remote location from your desktop machine. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0whrxizx5kg0qr53swbu.png)
What is SEO?
Tags: career, beginners
Published: 2020-09-26 19:34:44

<p>SEO is just a huge issue, but being a newcomer, I would advise understanding three fundamentals, so there isn't to worry it over.</p>
<h2>Three Types of SEO Strategy</h2>
<p><strong>Keyword Research</strong>- Why it's important? If you have a suitable keyword, you won't be in a position to rank as a result of high competition. How? As a beginner, your website's domain authority is nearly nothing. Of course, when you picked a top aggressive keyword to assume you're targeting to get the"Lyrics" keyword afterward, you definitely can't be at your contest, as well as your article or blog won't ever rank in google. However, if you picked lower competitive keywords such as"Lyrics in Tamil" or even"Lyrics of particular-song-name at Hindi," you may have an opportunity to rank. It means you wish to demonstrate your article on google whenever someone hunts that specific term.</p>
<p><strong>On-Page SEO</strong>- Why it's important? Therefore to produce these tips and algorithms, know that you've written this post; you should be maximizing your article. How? It's various measures, but I'd share a couple. Inch. Range from the ideal quantity of keyword density on your paper means that your targeting keyword needs to be written on special occasions; it depends on your report's amount. But remember, do not emphasize the keyword on your essay; it'll make Google genuinely believe your article is junk. 2. Are the keywords within the name? Your name must retain the keyword that you're targeting; additionally, it consists of the keyword in Headings and sitemap. 3. Write an in-depth, informative article as well as. Also, your essay length should be higher than your competitive report. 4. Attempt to add tables, images, and graphs to make your essay more detail by detail. Additionally, don't forget to maximize image sizes before contributing to this report.</p>
<p><strong>Off-Page SEO</strong> means making your article post longer authoritative and making google believe it has more significance. How? By providing backlinks and societal shares into your writing. What's a backlink? Backlink means yet another internet site advocating your site for the users to go to. Like, even for those who own a publication internet site and internet site like Indiabix is supporting your website on their page, this means you've got a high opportunity to rank as an authoritative internet site is linking to your site. Also, do not backlink your internet site on sites web sites like adult or porn articles. One high authoritative backlink would be over one million backlinks from smaller internet sites.</p>
<p>Hence, I would recommend you to Concentrate On Quality over Quantity.</p>
<p>Here is the Basic Principles of SEO Being a beginner.</p>
<p>My next blog is <a title="Local SEO" href="https://www.aadiblog.co.in/local-seo-for-beginners/" target="_blank"><strong>what is local seo</strong></a>? If anyone want to know&nbsp;it,&nbsp;visit my blog&nbsp;web page.</p>
Leetcode - 3SUM (with JavaScript)
Tags: javascript, algorithms, leetcode
Published: 2020-09-26 19:34:26

Today I am going to show how to solve the 3 Sum algorithm problem.

Here is the problem:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a8h3r4bkrq6bbcufq0b0.png)

In my previous blog, I talked about the solution to the 2Sum algorithm. For this problem. we could’ve used a hash table to store every number, similar to the solution in the 2Sum algorithm. Then we could’ve done double “for” loops and checked if the current number’s complement already exists in the table. But that wouldn’t be the most efficient way to solve this problem.

Instead, I am going to solve this problem by using two pointers that will give us O(n^2) time complexity. In this approach, the first thing we need to do is to sort the given array in ascending order.

After sorting the array, we are going to iterate through it and set our two pointers. A left pointer will be set to a number that comes immediately after the current number and a right pointer will be set to the number at the end of the array. Then we are going to find our current sum which is the sum of our current number, a left number, and a right number. 

Now we check if our current sum is equal to our target sum, which in this case is 0. 

If it is equal, we just add those three numbers to our final array (triplets).

If the current sum is less than 0, we move the left pointer to the right by one to increase the sum. Because we earlier sorted the given array in ascending order, we know that each number is greater than the number to its left. 

If the current sum is greater than 0, because we know that each number is smaller than the number to its right, we can move the right pointer to the left by one to decrease the sum. 

```javascript
var threeSum = function(array) {
     array.sort((a,b) => a - b);
	const triplets = [];
    
	for(let i=0; i < array.length - 2; i++){
        if(array[i] != array[i-1]){ // making sure our solution set does not contain duplicate triplets
            let left = i + 1;
		  let right = array.length - 1;
		
            while (left < right){
                const currentSum = array[i] + array[left] + array[right];
                if (currentSum === 0){
                    triplets.push([array[i], array[left], array[right]]);
                    while(array[left] == array[left + 1]) left ++
                    while(array[right] == array[right - 1]) right -- // making sure our solution set does not contain duplicate triplets
                    left ++;
                    right --;
                } else if(currentSum < 0) {
                    left ++
                } else if(currentSum > 0){
                    right --
                }
            }
        }
	}
	return triplets
};
```
Four Micro-Frontend Architecture Types You Can Implement With Blazor
Tags: blazor, csharp, microfrontend, dotnet
Published: 2020-09-26 19:31:05

---
title: Four Micro-Frontend Architecture Types You Can Implement With Blazor
published: true
description: In this article, we will describe how you can implement micro-frontend architectures using Blazor, an open-source framework for creating web applications using C# and Blazor WebAssembly (Wasm). Much like micro-services architectures do for services, micro-frontend architectures break up web applications into small, functional, and scalable components. Micro-frontend approaches can help you avoid creating spaghetti code, improve code structures, and avoid coupling between components. They can also help teams work on front-end code more efficiently. There are four primary ways you can implement micro-frontend architectures with Blazor, and let’s take a closer look at each.
tags: blazor, csharp, microfrontend, dotnet
//cover_image: https://direct_url_to_image.jpg
---

In this article, we will describe how you can implement micro-frontend architectures using Blazor, an open-source framework for creating web applications using C# and Blazor WebAssembly (Wasm). Much like micro-services architectures do for services, micro-frontend architectures break up web applications into small, functional, and scalable components. Micro-frontend approaches can help you avoid creating spaghetti code, improve code structures, and avoid coupling between components. They can also help teams work on front-end code more efficiently. There are four primary ways you can implement micro-frontend architectures with Blazor, and let’s take a closer look at each.

##Method 1: Use micro-apps with a shared session and parameters

For large and complex applications, micro-apps is an excellent approach to micro-frontends. With micro-apps, you have multiple apps with a shared session and parameters, or even styles. Sharing both the session and account or general information across different sites or applications makes the user feel comfortable and safe because they won’t need to start any new sessions or give more information to every app they need to use. 

A good example of this concept is the Google productivity suite, GSuite. Working through a user’s Google account, GSuite makes different apps available to the user (YouTube, GMail, Google Photos, Calendar, Meet, and so on). GSuite provides a consistent user experience across all the apps by using the same styling throughout. To do this with Blazor, every app is a Blazor project and they have shared session information between them (see illustration below).

![Micro-apps](https://gorillalogic.com/wp-content/uploads/2020/09/image2-1.png)
Example of a micro-app micro-frontend approach


Example of a micro-app micro-frontend approach, in which every app is a Blazor project and they have shared session information.

Continue reading here:
https://gorillalogic.com/blog/four-micro-frontend-architecture-types-you-can-implement-with-blazor/
Back to the office or work from home (or both?)
Tags: discuss, work, lifestyle
Published: 2020-09-26 19:14:43

---
title: Back to the office or work from home (or both?)
published: true
description: What would the world of remote work look like in a post-covid-19 world?
tags: #discuss #work #lifestyle
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0nch4l7jgs4yc7uk775s.jpg
---

Hey friends!

This post is a quick one, is about a thought I have going around my mind recently. With several of the lockdown measures being lifted in several countries, there will be the option of going back to work at the offices for some people. But are we going to be doing that?

There has been a rising trend of remote work over the years for most of the companies in our industry that has only become stronger with the current situation.

In that scenario, how do you see the future of work being like for the next year and afterward?

There has been quite some talk about what work would look like in the future since some decades ago.

For instance, the well known and many times quoted talk of Arthur C. Clarke about the future thanks to the internet.
{% youtube wC3E2qTCIY8 %}

Or this interview with the great Robert Noyce talking about the future of technology for work.
{% youtube VG2jwWtjyXU %}

But certainly, among all this, no one ever expected a global pandemic to accelerate this trend. Still, some existing work customs will have to change and adapt to the "new normal".

That's why I'm taking this chance to open up the discussion to see what would be an 'ideal' option. There are some cases where things will differ and depending on job roles, an ideal scenario for some would be a subpar option for others.

In that case, if given the opportunity, would you choose to work permanently from home, going back to offices (assuming they're well equipped and provide enough commodity) or do a mix of the two?

I'm curious to know in your experience, what are some of the benefits and pitfalls of these options and what would be your preferred choice.

Another point worth mentioning is about the internet connection, which I think is the single point of failure for that dreamy, flexible work plan. 

Assuming that we won't be working directly from an office but rather be location independent, what would be the bare minimum requirements for making it work? and in case something _more_ unexpected happens, what alternatives can you think about?

That's it for now. I'll keep pondering about the subject and look forward to reading your opinions about the topic also to make a more educated guess about the same myself.

---

<span>Photo by <a href="https://unsplash.com/@burntime">Alex Kulikov</a> on <a href="https://unsplash.com/s/photos/remote-work">Unsplash</a></span>
Whiskey Wednesday - Episode #9 - a11y
Tags: podcast
Published: 2020-09-26 18:55:06

---
title: Whiskey Wednesday - Episode #9 - a11y
published: true
description: 
tags: podcast
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/298wnozwth32rhhrfxh1.jpg
---

## Whiskey Wednesday - 2020 September 23rd

#### Episode #9 - a11y

Accessibility is an important part of every website and every developer should try implementing at least the most important accessibility features.

We will talk about what accessibility actually is, why it is important, and how to implement it.

📺 [Watch it on Youtube](https://www.youtube.com/watch?v=Utf1cznHYcI)

{% spotify spotify:episode:5ru6HIgUyTCH9hypKepeGJ %}