teleren/devto huggingface dataset:
Wireframing - Web Design 101
Tags: wireframe, webdesign, webdev
Published: 2020-03-28 08:18:04

I am taking Dr. Angela Yu's The Complete 2020 Web Development Bootcamp on Udemy and it is awesome. I started not to long after finishing Colt Steele's Bootcamp course. I just want to solidify, as best as possible, the basics and then from there start doing some work.

Right now, I am on Web design 101 - Wireframing. Dr. Yu says "it's easy", "shouldn't take you long" but in reality it is far from "easy". Now, don't get me wrong, sketching what a site and/or app should or will look like is "easy", as I can draw stick figures just fine, but the process that goes into it isn't "123, testing, testing, test, test". 

She did mention about the process for developers is to look at what others have done and draw inspiration from those and then do wireframing, mock and probably prototype but even before looking at someone else's stuff, what is it that I actually want to convey? Or what would my client want to convey and how can I capture that? Questions like those come to mind even before I look for "inspiration". Now, are those questions relevant? Don't know. I just know that I can "oooh", "aaah" someone's website all I want but not having an idea of what I want and/or looking to convey does not help me in drawing inspiration.

It might just be me. But that is what I was thinking. By the way, if anyone is just starting in Dev and want to go to a Dev bootcamp, both Dr. Angela Yu and Colt Steele classes on Udemy are awesome. They may have some outdated examples but the info still stands. Also, freeCodeCamp.com is an invaluable resource as well. I have not yet done there course, but I have used their articles for help understanding something in JavaScript, NodeJS, etc. Medium is another resource I use a lot as well. Ooooh! Let's not forget Dev.to and Wikipedia. I love YouTube, but YouTube is not the only place for great info, continued learning and knowledge expansion.

Anyways, I was speaking on "wireframing", before I went on a little tangent. Well, if you read, or will be reading, what I write, you will see that often! 🤣😎 So, wireframing, itself is "easy". It's just drawing a diagram of where you want what on a browser for a particular site I am designing. However, coming to that is where, I think, is the issue and not as easy. Right now, I don't know what I want or what I want to convey and therefore "stuck"!!! So for now, I'll just look at the "inspirations" and wireframe something similar to what "speaks" to me and continue with the lesson.

Yeah! I know. I do believe in "recreating the wheel" as long as it propels me forward. Who knows, I may add something new or come up with a different perspective during the process! 😁
Why ForeignKey reference in Django model's __str__ method is a bad idea
Tags: python, django
Published: 2020-03-28 07:22:45

# Cutting database queries by not referencing Foreign Keys. Or fixing bad behavior.

_Photo by [israel palacio](https://unsplash.com/@othentikisra?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/@othentikisra?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_

So you have a model with foreign key:

```python
from django.db import models
from .models import Author

class Book(models.Model):
    name = models.CharField(...)
    author = models.ForeignKey(to=Author,...)
```

Now you want to see an `author` in your admin panel. Easy, right? Just add:

```python
def __str__(self):
    return f'{self.id} {self.author.name}'
```

What this will do is hit our database for an author name for every row present on a page. Imagine there are 100 rows. That's 100 more hits. This problem is known as the `n+1 query`.

The solution is quite simple. If that's a `ForeignKey`, you need to use `select_related` on your `queryset`. If that's a `ManyToMany` field or reverse `FK`, then you need a `prefetch_related` method. And, by the way, that's the difference between those two methods. It's a common interview question.

But in our case it's not a simple query. If you really want to fix that you would need to dig deeper into how Django admin works and provide custom `queryset` to the view.

When I encountered this problem the solution that has been accepted was just removing the reference to `ForeingKey` from the `__str__` method ¯\\\_(ツ)\_/¯

_A little ToDo for myself: find a way to solve this via select_related._

# UPDATE after half a year

For some time I didn't face this problem but not long ago I did. So, as I said, the solution to this is quite simple. All we need to do is to redefine `get_queryset` method on admin model. For example:

```python
@admin.register(models.Book)
class BookAdmin(admin.ModelAdmin):
    def get_queryset(self, request):
        qs = self.model._default_manager.select_related(
            'author',
        )
        # This stuff is marked as TODO in Django 3.1
        # so it might change in the future
        ordering = self.get_ordering(request)
        if ordering:
            qs = qs.order_by(*ordering)

        return qs
```

Now there will be just one query per record, containing `JOIN` clause, hitting our database.

Optimization FTW :smirk:
Welcome to a11ytips.dev
Tags: a11y, webdev
Published: 2020-03-28 06:41:27

---
title: Welcome to a11ytips.dev
published: true
description: Accessibility is the field that created a huge impact on me. I keep sharing a lot about accessibility but they were all over my social media platforms. So, I developed a dedicated website for all my accessibility resources.
tags: accessibility, web development
---

Hello All,

I keep writing and research accessibility on my different social media platforms - Linkedin, Twitter, Facebook, etc. and this always made me lost that where all my accessibility resources are?

So, I decided to build a dedicated website for accessibility only. I also wanted to try my hands on VueJS and GraphQL. I took this opportunity to explore the VueJS Gridsome and here is my dedicated website which is all about Accessibility : [a11ytips.dev](a11ytips.dev)

Happy Learning!!
What are Laravel Resource Controllers
Tags: laravel, php, tutorial, webdev
Published: 2020-03-28 06:27:10

Hi all, this is Adi again for a Laravel post. I recently found a lot of questions on StackOverflow asking what Laravel Resource controllers were. I wanted to explain this basic concept. Read on.

### Laravel Resource Controller
Resource controllers are just Laravel controllers with all the methods to create, read, update and delete a resource (or a Model). You can create a resource controller with this `artisan` command

`
php artisan make:controller PhotoController --resource
`

This command will create a `PhotoController.php` in your controller directory and will have automatically created 7 methods `index`, `show`, `create`, `store`, `edit`, `update`, `destroy`. All these methods will be empty, you will have to fill them with the logic for each action. By default, when you execute the command, Laravel will use the model name from the controller, eg. `Photo` model will be used for `PhotoController`, if you want to use a different model you could use 

`
php artisan make:controller PhotoController --resource --model=Photo
`

Now the new controller will you what you mention in the `--model` flag.

You could also create controllers for your API routes using the `--api` flag instead of `--resource` flag. This will create all the methods except the `create` and `edit` methods, as they are not required for an api call.

### Laravel Resource Route
Laravel also provides an easy way to make routes for Resource controllers using

```
Route::resource('photos', 'PhotoController');
//  GET    /photos            PhotoController@index
//  GET    /photos/create     PhotoController@create
//  POST   /photos            PhotoController@store
//  GET    /photos/{id}       PhotoController@show
//  GET    /photos/{id}/edit  PhotoController@edit
//  PUT    /photos/{id}       PhotoController@update
//  DELETE /photos/{id}       PhotoController@destory
```

This method will create all the 7 routes needed to access each action from the browser. You could customize this to create only certain routes you need or leave what you don't need like so.

```
Route::resource('photos', 'PhotoController')->only(['index', 'show']);

Route::resource('photos', 'PhotoController')->except(['create', 'store', 'update', 'destroy']);
```

### Conclusion
I hope your doubts about what Laravel Resources controller have been cleared and may want to try this in your next project. Hope this small piece helped you understand them a little better.

For more information, you could look up [the docs](https://laravel.com/docs/7.x/controllers#resource-controllers).

> That’s all for now, this has been Adi.  
> If you are looking for a Freelance Web Developer you can [contact me](https://simplestweb.in/contact-me?utm_campaign=laravel-resource-ctl)
React App for Covid-19 stats and figures in India.
Tags: react, bootstrap, covid19, india
Published: 2020-03-28 06:15:04

---
title: React App for Covid-19 stats and figures in India.
published: true
description: Covid-19 stats and figures for India
tags: react, bootstrap, covid-19, india
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/uldr5pr4xzeglt0bzhw1.png
---

This article is about showing a simple React app which i created to look up Covid-19 Stats in India. It has been deployed at https://covid-19-india.now.sh/ using Zeit Now. I have tried to make it responsive. The Graph has been made using ChartJS. Bootstrap is being used for UI things.

The github repo is located at :  https://github.com/ashishkumarsinghh/Covid-19-india

Requesting for your suggestions on improvements. Would love to have few more people who can contribute to it, in any way, be it issues or features or suggestions.

Looking forward to hear from you !
Ionic React & Imperative Toast Messages
Tags: ionic, react, javascript
Published: 2020-03-28 05:55:17

A toast notification is a long standing custom in mobile application used to notify the user of something happening within the system. Sometimes it even has buttons for interaction.

![Toast GIFc](https://www.hkinfosoft.com/wp-content/uploads/2019/05/toast.gif)

Here is how to use one (straight from the docs): 

```typescript
function ToastExample: FC = () => {
  const [showToast, setShowToast] = useState(false);
  return (
    <IonToast
      isOpen={showToast}
      onDidDismiss={() => setShowToast(false)}
      message="Your settings have been saved."
      duration={200}
    />
  )
}
```
Well, this is easy 😁I can do that. 

But I normally thinks of toasts more imperatively than this. It might be because of libraries like `react-toast` or `ant.design` who have these imperative toast messaging systems, or it could even be that Ionic's own Angular part of design has an imperative toast. 

Also, if I needed to a success toast and an error toast, I would need multiple `IonToast` components rendered or have states definining toast state.

In Angular Ionic, you would:

```typescript
const toast = this.toastController.create({
  message: '',
});
toast.present();
```

That's pretty cool 😎. What if we could do this?

We could utilise a [React Context](https://reactjs.org/docs/context.html) and a hook to achieve this functionality at with ease. I wrote out a custom package which does exactly that.

```typescript
import { ToastProvider, useToast } from "@agney/ir-toast";

// Wrap you App.tsx with ToastProvider
const App: FC = () => {
  <IonApp>
    <ToastProvider>
      // ...rest of your application 
    </ToastProvider>
  </IonApp>
}

// In your component 
const RegisterForm: FC () => {
  const Toast = useToast();
  // ...

  function validate() {
    const toast = Toast.warning('Passwords don\'t match');
  }

  function submit(data) {
    try {
      const response = await api.register(data);
      Toast.success('Registration Successful');
    } catch() {
      Toast.error('Request failed');
    }
  }
}
```

This allows you have to have error messages with a one liner:

```
Toast.error('Error message');
```

The `ToastProvider` also takes a `value` property that allows you to define defaults for all toasts created in it's children. 

The package also enables creating toast messages with the same Angular API as:

```typescript
function Component: FC = () => {
  const Toast = useToast();

  const handleClick = () => {
    const toast = Toast.create({ message: 'thing' });
    toast.present();
    // When you want to.
    toast.dismiss();
    ...
  }

  // ...
}
```

To install the package:

```bash
npm i @agney/ir-toast
```

Note that it has a dependency on both React and Ionic React.

{% github agneym/ir-toast %}
Initialise BehavorSubject correctly
Tags: todayilearned, rxjs, angular
Published: 2020-03-28 05:43:56

> For some reason a BehaviorSubject I was calling next on was not firing events. It only fired with the initial value.

This was my declaration.
```
private clients: BehaviorSubject<ClientSummary[]> = new BehaviorSubject(undefined);
public clients$: Observable<ClientSummary[]> = this.clients.asObservable();
```
And how it was being consumed.
```
this.clientService.clients$.subscribe(clients => {
  // do something with clients  
  console.log(clients);
});

```

When the page loaded, the observable fired with the following log.
```
undefined
```
However, when next was called on the `BehaviorSubject`, the observable did not fire again.
```
this.clients.next([/* some clients*/]);
```

**Can you see the problem?**

It's very subtle and took me a while to track down.

**Solution**

Update the initial value!
```
private clients: BehaviorSubject<ClientSummary[]> = new BehaviorSubject([]);
```

I don't know why the initial value is significant; but with this change the observable now updates each time next is called on the `BehaviorSubject`.

As for why I had undefined in there in the first place? 
Probably copy and paste! 🙄
What is your view on tech courses getting pirated(the ethical ones)?
Tags: tutorial, computerscience
Published: 2020-03-28 05:16:28

Some websites like freetutorials.us allow users to download pirated tech courses but they argue that they have certain ethics. They do not pirate content of new creators and they only pirate those courses that had already made so many earnings. What is your opinion on this?

Personally I have seen so many students benefit from these pirated courses .
Simple state management in Blazor using dependency injection. 
Tags: blazor, state
Published: 2020-03-28 05:05:19

When we create single-page-applications, there is no way around it. Sooner or later we are going to be facing the state. luckily Blazor gives us many ways to manage the state 

in this post, I will go through how to implement a user state using POCO class and dependency injection. 

Let's use the default counter component that comes with the default blazer template when you create a new project. 

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

Navigate to counter component page and click the counter button that increases the count and if you go back home page and visit the counter page again the state is gone and count reset to zero because the state has been reset while navigation pages. 

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

So how to preserve the state between page navigation in Blazor? so let's implement to preserve user state using dependency injection.

 
```C#
namespace CunterState.Data
{
    public class CounterState
    {
        public int CurrentCount { get; set; }
    }
}
```
The purpose of the above POCO class is to add in the project dependency injection service. Open startup.cs file add the inject the CounterState class there. 

```C#
 public void ConfigureServices(IServiceCollection services)
 {
     services.AddRazorPages();
     services.AddServerSideBlazor();
     services.AddSingleton<WeatherForecastService>();

     services.AddScoped<Data.CounterState>();
 }
```
I injected using the *AddScoped* injection method into the container. A very important point is to remember is when choosing the injection method. in Blaozr if you are sharing the state's entire user base AddScoped dependency injection method is a perfect choice for us. if you want to share the sate entire application AddSingleton is the best choice for you. 

```C#
@page "/counter"
@inject Data.CounterState state
<h1>Counter</h1>

<p>Current count: @state.CurrentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
   
    private void IncrementCount()
    {
        state.CurrentCount++;
    }
}
```
CounterState object has been injection using @inject attribute at the top of the page so that state data will be preserved throughout the user interaction. 

Now when you run the application and click the counter button, the value will be preserved. Try this by navigating to the home page then navigating back again to the counter page... Awesome!

Thanks for reading and give your feedback int the comment box below.
Any suggestions for the project idea?
Tags: beginners, help, javascript, react
Published: 2020-03-28 04:53:54

Hi, I started doing front end work two years ago. I have used Vue for about one year now, and also have learned a little bit about React. Now I'm about to be unemployed (Geez...😬), but that also means I will have more free time to improve my skills. 
I want to make a portfolio site, but I need to have some projects of my own first. I would love to improve React more. Any suggestion about what kind of project can I try?
Pushing an Existing Node App to Azure
Tags: azure, node, devops
Published: 2020-03-28 02:54:19

If you have code that is working on your local machine, and you want to deploy it to Azure, and you have a DevOps account configured, here is how. 
- If you were previously deploying somewhere else (like Heroku), delete the .git directory (there is probably a more elegant way to reset git, but delete works)
- Configure git in the directory
```
git init
git add .
git commit -m "initial commit"
```
- In Azure DevOps, create a new project
- Navigate to Repos. You will see an option to push an existing repository from command line. Grab that code
```
git remote add origin https://teamsi@dev.azure.com/teamsi/PilotDataEngine/_git/PilotDataEngine
git push -u origin --all
```
- in the [Azure Portal](https://portal.azure.com), you want to create a "Web App + PostgreSQL" instead of creating the web app and database separately, and having to stitch the networking and permissions and port configurations together. This is goofily hard to find, so try
  - [Create a resource](https://portal.azure.com/#create/hub)
  - Search for "Web App + PostgreSQL"
  - It may be directly linkable [here](https://portal.azure.com/#create/Microsoft.WebSitePGSQLDatabase)
- I tried using pipelines, but that was not successful, so I just used the VS Code Azure Extension to deploy directly ([explained here](https://docs.microsoft.com/en-us/azure/javascript/tutorial-vscode-azure-app-service-node-01?tabs=bash))
- Visit the Overview tab in the Azure portal, click on the URL, and your app should be alive. 
- If you use Sequelize, adjust your local database settings to point to the Azur PostgreSQL server, and run: 
```
sequelize db:migrate
```
Next steps:
- Figure out how to fire off sequelize from Azure (instead of having to update from the local application)
- Figure out how to use Azure Pipelines. I was able to get the Azure Pipelines set up to run upon code upload, but something was not working. If anybody has a blog post talking about configuring Azure pipelines for node (that is current), please share it. 

Thanks. 

Matt
Como o COVID-19 alterou a sua forma de trabalho?
Tags: trabalhoremoto, covid19, homeoffice, produtividade
Published: 2020-03-28 02:19:44

---
title: Como o COVID-19 alterou a sua forma de trabalho?
published: true
description: Um pequeno relato sobre trabalho remoto e sobre algumas coisas que percebi durante o período que estou em isolamento.
tags: trabalho remoto, covid-19, home office, produtividade
---

# Como o COVID-19 alterou a sua forma de trabalho?

Eu sempre soube que trabalhar remoto era possível, mas nunca tinha experimentado de fato fazê-lo.

Normalmente eu trabalhava um dia ou dois de casa, mas nunca tinha ficado por um período maior longe da empresa.

Depois de 2 semanas trabalhando completamente remoto, consigo afirmar algumas coisas:


### 01 - Trabalhar remoto é completamente viável.

Obvio, com uma internet de qualidade, um equipamento bom e um espaço propício, você consegue desempenhar de forma igual ou maior que no ambiente da empresa.


### 02 - Tenho sido mais produtivo nesse período de quarentena trabalhando em casa, que na empresa.

Na primeira semana, eu acabei trabalhando bem mais que o comum. Eu estava focado, sem distrações e quase sem interrupções.


### 03 - O time que você faz parte, também faz diferença.

Essa produtividade também se deu ao fato de que faço parte de um time que tem muita maturidade, responsabilidade e compromisso com as entregas e com o produto que estamos trabalhando.


### 04 - Fazer pausas é muito importante.

Na primeira semana, eu acabei trabalhando bem mais que o comum também eu quase não parei. 

Bebi pouca água, não levantei pra esticar as pernas, fui muito menos ao banheiro e etc...

Nem preciso dizer que isso não faz bem, certo?

Sem contar o fato de que a sensação de esgotamento foi bem maior que num dia corrido na empresa.


### 05 - Comunicação é tudo e processo importa.

Com o time conectado virtualmente é preciso que todos saibam em que cada um está trabalhando. E para isso os processos ágeis, se fizeram totalmente necessários e eficazes.


#### Conclusão:

Não sei pra vocês, mas pra mim, trabalhar remotamente está sendo uma experiência incrível.

Quando essa pandemia passar, eu possivelmente vou levar comigo, alguns ritos, processos e práticas que fizemos durante a quarentena.

E pra você? Como tem sido o período de isolamento? Você está trabalhando remoto? Como tem sido essa experiência?
Which companies are freezing hiring
Tags: hiring, discuss, help, career
Published: 2020-03-28 02:06:34

Hearing about lots of offers rescinded in the last few days.

Took some time out to compile this list of tech companies freezing hiring or doing layoffs (and those that are still hiring):

https://candor.co/hiring-freezes/

I hope it helps. I'll keep updating it live, email me at hello@candor.co if you're hearing anything.

— David, Candor
My goal for my channel...
Tags: gamedev, csharp, unity3d, beginners
Published: 2020-03-28 01:07:47

Hello everyone i'm a 14 year old gamedev. Currently i'm working on a 2d platformer which is physics based. I have a youtube channel where i showcase everything that i add to the game. If you enjoy the videos and want to help me make sure to subscribe. Lets try and reach 200 subscribers. 

Here's the channel: https://www.youtube.com/channel/UC8Kqr21rinohnhoUkp3lGWw?view_as=subscriber
Get better at writing with 3 lines of bash
Tags: showdev, productivity, linux
Published: 2020-03-28 00:36:03

Everyone knows that great communication skills are the most important trait we want in our team members. I have been deliberately practicing writing over the last three years and today I want to share with you my most impactful tools. Here are three lines of bash that are responsible.
 
```bash
#!/bin/bash

NOTESPATH="~/Notes/"

$EDITOR "$NOTESPATH$(date "+%Y-%-m-%-d")"
```
How do I install it?
- put it on your path, I suggest `/usr/bin`
- create the Notes directory in your user home.
- set your $EDITOR variable to your favorite tool ( if it isn't already ).

What does it do?
- Creates a file with the current date if it doesn't exist
- Opens your today's file if it already exists

After many iterations on writing tools, this is still my favorite way to get my thoughts on 'paper'. Day to day, I spend my time using the terminal, and for me this script is the easiest way to context switch in to writing.

The hardest part about deliberate practice is starting, and this tool has allowed me to write something much more frequently.

Hope you find this useful! <3