teleren/devto huggingface dataset:
Nuxt.js - Dynamic layouts by current route.
Tags: nuxt, vue, middleware, layouts
Published: 2020-04-14 15:52:36

---
title: Nuxt.js - Dynamic layouts by current route.
published: true
description: This is my example of how I managed my layouts by dynamic paths.
tags: NuxtJS, VueJS, middleware, layouts
---

# UPDATE 07/2020
> I've updated the snippets below since in specific edge-cases when refreshing the page the middleware didn't work.

Given [Nuxt documentation](https://nuxtjs.org/api/pages-layout) it seems like that it is not so easy for us to have different layouts **by dynamic routes.**

So I surfed the web and I've found a [similar issue](https://github.com/nuxt/nuxt.js/issues/265) and, by the end of the day, this is my solution.

This is my structure:
```
pages/
   _page.vue
   index.vue
```
The solution, already mentioned in the issue, is to create a middleware under middleware folder like this one:
```javascript
/** 
 * @description myMiddleware.js
 * @see https://glitch.com/edit/#!/nuxt-dynamic-layouts?path=middleware/mobile.js:5:1
 */
export default context => {
  const { route: { params } } = context

  switch (params.page) {
    case 'tmp1':
    case 'tmp2':
        return 'tmpLayout'
  
      default:
        return 'default'
  }
}
```

And inside _page.vue simply use this line:
```javascript
  import myMiddleware from '@/middleware/myMiddleware'
  ...
  layout: myMiddleware,
```

So whenever you navigate through *mysite.com/tmp1* or *mysite.com/tmp2* our **tmpLayout** will always used.

# UPDATE 07/2020
> I've updated the snippets above since in specific edge-cases when refreshing the page the middleware didn't work.
E meu TCC?
Published: 2020-04-14 15:51:27

Concluí meu curso de Sistemas de Informação no finalzinho de 2008 e início de 2009, isso já faz um bom tempo e significam 2 coisas, a primeira é que eu já estou velho e a segunda é que tenho uma boa experiência, nada mal uma boa e uma má notícia.

Ainda sobre a minha experiência sobre pesquisar sobre meu nome no Google me deparei com o seguinte artigo escrito pelo jornal da Universidade em que trata a respeito do meu projeto de TCC, deixo aqui linkado para quem quiser dar uma olhada.

<http://www.jornalbeiradorio.ufpa.br/novo/index.php/2008/17-edicao-61/213-campus-de-maraba-cria-sistema-de-monitoramento-de-casas-alagadas>

RESUMO:
Moro numa cidade chamada Marabá no interior do Pará, minha cidade é banhada por 2 rios e na intercessão deles fica o centro da cidade, rotineiramente no ciclo de altas e baixas dos rios uma boa parte da cidade é inundada e portanto muitas pessoas ficam desabrigadas e necessitam de amparo social por parte da prefeitura.

O objetivo do trabalho foi criar um SIG (Sistema de Informação Geográfica) em que fosse possível realizar um cadastro geográfico das residências, e na medida em que o rio fosse subindo conseguirmos identificar exatamente quais residências e quais pessoas precisavam de assistência.

Concluímos o trabalho o sistema em sí ficou excelente, mas infelizmente o poder público interessado no trabalho não se mostrou interessado, coisas da vida.

Abraço.
3 Important Principles of Programming
Tags: programming
Published: 2020-04-14 15:40:02

“Programming is a way to “instruct the computer to perform various tasks”

Simply programming is way of creating universe, where you are the creator of that universe and you do what you can.
Being a Programmer we need to understand the three basic principles for better development and growth. So What are They ….?

KISS Technique
DRY Technique
YAGNI

What That means .. ?

Kiss Technique

haha.., Sound crazy.. But not what is mean.. Kiss mean Keep It Simple Stupid. Most systems work best in the simple way rather than made complicated. i.e. simplicity should be a key goal in design, and unnecessary complexity should be avoided.
eg: breaking complex problems into smaller chunks !

Dry Technique

Dry stand for Don’t Repeat Yourself. The DRY principle is stated as “Every piece of knowledge must have a single, unambiguous, authoritative representation within a system”. i.e. Why to write same block of function repeatedly when can make a single function and call it back.

Yagni Technique

Yagni stand for You Aren’t Gonna Need It. Sometime we add extra pieces of codes thinking for the future. Wrong we don’t need to do this. The major principle of yangi is: “Do the Simplest Thing That Could Possibly Work”. With yagni we can save times and simple to understand.

Finally these are some interesting principle of programming.
React.JS Meetup Thursday 23rd
Published: 2020-04-14 15:39:48

We're hosting a live meetup on YouTube on Thursday 23rd April!! Join us at 6pm GMT+1 to hear from three great presenters with a live Q&A! #reactjs #reacthooks #componentlibraries #reactstatic - https://www.meetup.com/meetup-group-timetoreact/events/270039719/
Javascript: Promise Class methods (all, allSettled, race)
Tags: javascript, programming, codenewbie, webdev
Published: 2020-04-14 15:33:44

Hi everyone! It's just another week with all the days feeling similar as such. With time passing by observing and learning lots of new languages and technologies. Along with that strengthening, the core is much more important. Unless you make your base strong you won't be able to build higher. Let's make our Javascript base stronger with another core concept **Promise**.

## Promise

A [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) is an object that represents an eventual execution of an asynchronous function and its resulting value. A promise is an asynchronous method returning values like synchronous methods.

The promise is in one of the following states.
-  Pending: initial state
-  Rejected: operation failed
-  Fulfilled: operation completed successfully

Like most of the other javascript objects Promise can be chained. Promise provides **Promise.then()**, **Promise.catch()** and **Promise.finally()** methods for handling exception condition.

As we are now aware of the Promise now let's look at some of the Promise methods.

### Promise.all([promise1, promise2,...])

This method accepts an array of promises and waits until all of the passed promises is resolved or until the first promise is rejected. It returns an array of responses or reasons for rejection.

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

If all the promises are fulfilled then, the array of results of all fulfilled promises are returned.
If at least one promise fails then, the reason for rejection of the first promise is returned.

### Promise.allSettled([promise1, promise2,...])

This method accepts an array of promises and waits until all of the passed promises are settled no matter whether they are resolved or rejected. 

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

It returns an array of responses from all resolved promise or reasons for rejection along with Status.

For resolved promise object containing status as "fulfilled" along with the values are returned.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1f5yltavstp3uxsnvis2.PNG)

For rejected promise object containing status as "rejected" along with the reasons for rejection are returned.

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

allSettled() function do not need a catch() function for handling the rejected Promise. Since the allSettled() function waits for settlement of Promises and not the resolution or rejection of Promise.

### Promise.race([promise1, promise2,...])

This method accepts an array of promises as input and returns the response from the first promise settled.

If the first promise to be settled is resolved then it returns data else it returns reason for rejection.

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

That's all for promise methods.

Happy Coding!
Great Youtube channels to learn programming
Tags: beginners, codenewbie, productivity
Published: 2020-04-14 15:15:37

During this lockdown due to the COVID-19 , online learning is a great way to develop your skills and learn new things, especially when it comes to coding .
So, here are a few Youtube channels that will help you in learning programming

https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iwc55efyxc275ys45q0a.png)

https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lmyzt1bkeub1oyvct3mc.png)

https://www.youtube.com/user/schafer5
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nsj2364d0extzrpocodt.png)

https://www.youtube.com/user/derekbanas
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pmx0dk6pe2ww7p4h0edr.png)

https://www.youtube.com/user/edurekaIN
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o7o8lmajgru1rid7e1mi.png)

https://www.youtube.com/user/gotreehouse
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/71e39jegl5kbb0ihk9h0.png)

https://www.youtube.com/user/learncodeacademy
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nckuo4voh56lixjxuaqd.png)

https://www.youtube.com/user/TechGuyWeb
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z2qeyv8s34139vplpcyl.png)
I Built a Site for the Best Coding Fonts
Tags: showdev, design, productivity, vscode
Published: 2020-04-14 15:11:26

I'm always looking for a coding font that looks great with my favorite editor theme and language. Searching for coding fonts has been a pain since there is no way to see how a font will look until you download and install the font, then change your editor to use it.

## Enter Dev Fonts
[devfonts.gafi.dev](https://devfonts.gafi.dev/) is a list of the best coding fonts I could find around, along with an interactive preview where you can change the preview theme, code language, or the code sample for the preview.

![Dev Fonts screenshot](https://dev-to-uploads.s3.amazonaws.com/i/vdy2yb34po2pia9sginj.png)

My current favorite font is Cascadia Code. What is yours?

The source code for the site is on [github](https://github.com/Gaafar/dev-fonts)

PRs for missing fonts are welcome, check the [notes here](https://github.com/Gaafar/dev-fonts/blob/master/README.md#missing-a-font)
Webcomponent 🔥 based PLAYER for the PODCAST Community 😎
Tags: webdev, javascript, opensource, showdev
Published: 2020-04-14 15:07:10

Hi Guys! 🤓

I've created a Webcomponent based Podcast player using Vanilla JS.
I've made it open source for the community.

Also the implementation is dead simple, just like other web components.

So here is how it looks:

## UI
![Shar-Pod-Audio-Player](https://dev-to-uploads.s3.amazonaws.com/i/054oja9x9t1k6skrf32o.png)

### [LIVE DEMO](https://sharadcodes.github.io/Shar-Pod-AudioPlayer/example/)

## How to use ????

Just paste the following script in the head or just before the end of the body tag

```html
<script src="https://sharadcodes.github.io/Shar-Pod-AudioPlayer/src/SharPodAudioPlayer.js" async></script>
```

Now inside the body paste this

```html
  <!-- add the tag with all attributes -->
    <shar-audio
      audio-title="Your podcast title"
      audio-subtitle="Your podcast subtitle"
      artwork="https://example.com/your_square_thumbnail.png"
      src="https://example.com/your_mp3_file_url.mp3"
    ></shar-audio>
```

That's it 🤩 .... And you are good to go  !!!!!!

---

## ALL LINKS ARE HERE:
Repo: https://github.com/sharadcodes/Shar-Pod-AudioPlayer
Live Demo: https://sharadcodes.github.io/Shar-Pod-AudioPlayer/example/ 🤩
Add Binary, solving Facebook interview question
Tags: javascript, interview, algorithms, career
Published: 2020-04-14 14:59:19

Question: Given two binary strings, return their sum (also a binary string).

The input strings are both non-empty and contains only characters 1 or 0.

Example : 
```javascript
Input: a = "11", b = "1"
Output: "100"
```

My initial thought was to convert the given string into their respective equivalent decimal forms, add them convert the resultant decimal sum to binary but it seemed too simple since javascript already has an inbuilt function to convert binary to integer and vice-versa. So there's a high probability of interviewer asking to achieve the same without using the inbuilt functions. 

I know it sucks but it's what it is : /

<h3>Bit Manipulation</h3>

Following are rules for adding bits:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ikdhuuwoigcynw539iz.png)

So as we can see, we really care about the outcome of sum of two bits

<h4>Outcomes</h4>
1 > Addition of two bit's results in three possible binary outcomes

```javascript
1 + 1 = 2
0 + 0 = 0
1 + 0 = 1
0 + 1 = 1
```

2 > This gives us an opportunity to do something with it: 

```javascript  
When we're adding to bits, let's maintain two containers 
sum = 0
carry = 0

0 + 0 = 0 => 0 bit representation so sum = 0 carry = 0
1 + 0 = 1 => 1 bit representation so sum = 1 carry = 0
0 + 1 = 1 => 1 bit representation so sum = 1 carry = 0
1 + 1 = 2 => 10 bit representation so sum = 0 carry = 1

```

Now our next aim is to convert 2 to 10 or make sum = 0 and carry = 1. We cam achieve this by following :
 
```javascript 
let sum = 2;
carry = sum / 2   ie 2/2 = 1
sum = sum % 2   ie 2%2 = 0
```

Now that we have all our bit's and pieces, let's put it all together

```javascript
var addBinary = function(a, b) {
    a = a.split("").reverse().join("");                  //split and reverse the strings to make out lives a bit easier
    b = b.split("").reverse().join("");
    len = a.length > b.length ? a.length : b.length;    // find larger of two lengths
    result = [];                                        // store results 
    for(let i = 0; i < len; i += 1){
        num1 = Number(a[i] || 0);                       // check if the index exisits
        num2 = Number(b[i]) || 0;
        curr = Number(result[i]||0) + num1 + num2       // add them
        if(curr >= 2){                                  // check if sum > 2
            result[i] = curr%2;                         // perform operations
            result.push(1)
        }
        else{
            result[i] = curr
        }
    }
    return result.reverse().join("")                   //reverse and join for final result
};
``` 

github: https://github.com/AKHILP96/Data-Structures-and-Algorithms/blob/master/problems/addBinary.js
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2020-04-14 14:47:10

---
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.

@greghausheer offered a concise-but-accurate complaint in **[Hit me with a good rant](https://dev.to/ben/hit-me-with-a-good-rant-2bab)**:
{% devcomment nfb2 %}

@robole added on to a famous quote in the **[The difference between code and magic 🧙‍♀️🧙‍♂️](https://dev.to/ben/the-difference-between-code-and-magic-1oaf)**:
{% devcomment ng8n %}

@brunooliveira shared their popular un-popular opinion in **[Tell us what your top unpopular tech opinion is 😈](https://dev.to/jess/tell-us-what-your-top-unpopular-tech-opinion-is-n6i)**:
{% devcomment nf1m %}

@andrewrothman offered an appreciative comment in response to **[How to be a better react Developer.](https://dev.to/siradji/how-to-be-a-better-react-developer-3je9)**:
{% devcomment nk6j %}

@steveblue shared their approach for maintaining the passion for coding in **[Longtime devs: Have you rekindled your love of coding after losing the spark at any point in your career?](https://dev.to/ben/longtime-devs-have-you-rekindled-your-love-of-coding-after-losing-the-spark-at-any-point-in-your-career-4jn0)**:
{% devcomment nhm6 %}

See you next week for more great comments ✌
The Front End Podcast - Episode #5
Tags: frontend, career, podcast
Published: 2020-04-14 14:41:06

Here with another episode fresh out the podcast kitchen is episode 5 of [The Front End](https://thefrontendpodcast.site). We've got a popular Yorkshire marketeer called Bethan Vincent on the show. 

Bethan's talking about a range of topics including her winding career path from medieval history to marketing director, women in tech, the hiring process, and her very own podcast, [The Brave](https://www.bethanvincent.com/the-brave-podcast).

Listen to episode 5 today on the following channels:

- Apple Podcasts > https://podcasts.apple.com/gb/podcast/the-front-end/id1499349107
- Pocket casts > https://pca.st/osul2zsa
- Spotify > https://open.spotify.com/show/4GuAxptrtY8Es5iHwp09dT
- Anchor > https://anchor.fm/the-front-end

## About episode 5

Bethan Vincent is a Yorkshire-based writer, podcaster, marketing director and tech enthusiast. She runs a podcast called The Brave and sat down with me to discuss her winding career path, her experiences as a woman in tech, hiring processes and how they can be improved, and how to encourage more women into tech.

## Listening direct

Want to listen directly from here?

{% spotify spotify:episode:1u3wwt4lVug3NxjpLXVdNS%}

## Want to be a guest or sponsor the show?

I'm definitely looking for guests to talk about a range of different development topics from careers to origin stories, learning and professional growth, frameworks and more.

Similarly, we're looking for sponsors to fill promotional slots within the show. 

You can find out more here:

- [Being a guest](https://thefrontendpodcast.site/guests)
- [Sponsorship information](https://thefrontendpodcast.site/sponsorship)

Thanks for listening!
Some good Websites for Coding Challenges 
Tags: challenge, codenewbie, programming, code
Published: 2020-04-14 14:40:24

This post is about some good websites where the programmers can find out challenging and hons in their programming language.
Some of the popular websites for coding challenges are follows
https://www.hackerrank.com/
https://www.codechef.com/
https://codingcompetitions.withgoogle.com/codejam
https://projecteuler.net/
https://www.coderbyte.com/
https://leetcode.com/
https://www.topcoder.com/
https://www.codewars.com/
https://www.codingame.com/
https://www.spoj.com/
https://www.codeproject.com/
Social Media Social Distancing
Tags: fun, image
Published: 2020-05-01 10:24:36

---
title: Social Media Social Distancing
published: true
date: 2020-04-14 14:38:09 UTC
tags: fun,image
canonical_url: https://dougsillars.com/2020/04/14/social-media-social-distancing/
---

Today marks week 4 of government imposted self-isolation in Croatia (and many have been isolating even longer).  In order to go out, many people are sewing their own face masks.  I found a great pattern to make some for my family, and we have an old sewing machine here at our house, but I could … [Continue reading Social Media Social Distancing](https://dougsillars.com/2020/04/14/social-media-social-distancing/)
React Image component resilient to flaky connections
Tags: react, javascript
Published: 2020-04-14 14:30:46

I would like to explain here how I include images in my React projects.

It's very common to use the `img` tag directly everywhere like this `<img src="my-image.png" />` but as this is not a React component we can't apply some layer on it then I prefer to have an Image component in my apps.

In this Image component one case that I usually handle is when the image fails to load, this can happen when the user internet connection is flaky or even if the image is not available anymore, maybe the owner of the image just deleted it. 

By default, the browser will display a broken image icon or something bad for the user and we don't want that. So we can use the `onError` property of `img` to trigger a state change then we can provide a different image URL that we can trust. Check the Image component code.

{% gist https://gist.github.com/filipenevola/55245bbef4aaf8d15c283e892482479b file=Image.js %}

Then when the user's connection fails the browser will not show a broken image icon if we provide a better fallback when using this Image component, for instance, in a PersonImage component that displays the user profile picture in our app.

{% gist https://gist.github.com/filipenevola/55245bbef4aaf8d15c283e892482479b file=PersonImage.js %}

I believe you are thinking: how the browser is going to load the fallback image anyway if the connection is failing? Well, we can add in our HTML head section a preload link to load our fallback image in advance:

{% gist https://gist.github.com/filipenevola/55245bbef4aaf8d15c283e892482479b file=head.html %}

That is it, simple and straightforward. Are you doing something like this in our React apps? Did you know about `onError` property already? Leave a comment :wink:
Angular.js – Fundamentals and Implementations with MVC Frameworks
Tags: angular, agile, java, python
Published: 2020-04-14 14:26:53

Angular JS is becoming the preferred Java Script Framework for building high performance web applications, especially building JavaScript Single Page Applications. The features and the continuous updates happening in AngularJS world is helping developers spend more time delivering features to the users rather than developing the framework architecture.

The built-in features like Services, Dependency Injection, Directives etc. making AngularJS more comfortable for the developer community building a Rich Internet web application especially SPA. In addition, AngularJS lays the path of further web application development offering native DOM templates, web components and 2 way data binding.

The community support for AngularJS is also growing massively. If you look at the trends in master commits in GITHub, Issue closures, forks etc. comparing to other frameworks like Backbone and Ember, AngularJS shows a clear upward trend. It is also backed by Google, developing some important products on top of it.

AngularJS thus lead the pack of other JS frameworks both in terms of features and community support offering tools to the web developers to develop applications that will result in improved productivity, increased testability, increased maintainability, improved performance and debugging.

At OptiSol, AngularJS is the preferred JS framework, developing web applications across different technology platforms- .NET, JAVA, PHP and RoR. Stay tuned in for further updates on How Angular JS works with various other MVC web frameworks like Ruby on Rails, ASP.NET MVC, Yii, CAKEPHP and Spring IoC.
Five interesting facts about HTML
Published: 2020-04-14 14:22:16

Hi guys i hope you peoples are being safe...

Actually this i'm gonna tell you interesting facts in HTML.

The first and foremost one is we can't believe html was started by using create the websheet at 1993.

After the years it was slidly differed to changes at 1997 they released html upgrade version.

Eventhough the creator didn't believe html will be use anywhere.

HTML success is based on one thing that is what SIMPLICITY.

Among this points i want to share one thing some developers are using inline elements inside of block level elements that's not a correct way.