teleren/devto huggingface dataset:
November 4th, 2021: What did you learn this week?
Tags: weeklyretro, weeklylearn, discuss
Published: 2021-11-05 00:21:09

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Information flowing through your brain](https://media.giphy.com/media/qKltgF7Aw515K/giphy.gif)

</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learned was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{%link https://dev.to/devteam/what-was-your-win-this-week-3p1o %}

<center>

![Someone feeling like "Yaaas!"](https://media.giphy.com/media/zBhZiVNNQjfTG/giphy.gif)
</center>
Lab7 - Make it prettier!
Published: 2021-11-05 00:10:34

Github repo: [Repo](https://github.com/juuuuuuun/jun-ssg)

#Overview
In this lab 7, the goal was to make the personal ssg project that was conducted in the class cleaner and prettier in design and grammar using various APIs.

#What I decided?
The description of the lab introduced several useful tools, and among them, I decided to use Prettier and ESLint, which I have used before.

##Prettier
Prettier makes it look better by checking the files of the set format in the desired range when running. To use the formatter, I added 
```
"prettier": "prettier --write \"./**/*.{md,js}\"",
"prettier-check": "prettier --check \"./**/*.{md,js}\""
```
, an executable script, to `package.json` among various usage methods. Also, I created a `.prettierrc.json` file and applied my personal preference settings.

##ESLint
Actually I was a little confused when I added Prettier and looked at the formatter to add ESLint. This is because the resulting output from Prettier and ESLint was almost exactly the same (in terms of formatter). Therefore, as a result of looking into the relevant part a little more, Prettier does not show the user what part has been fixed by formatting the codes with a script inside without a separate process. However, in the case of ESLint, formatting is the same, but it helps users not to repeat the mistake again by making the user recognize which part needs to be fixed and which grammatical part or design part is the problem.

Personally, I think ESLint is more helpful for developers :)

So, as in Prettier, I put the ESLint execution syntax in `package.json`
```
"eslint": "eslint --ignore-path .gitignore .",
"eslint-fix": "eslint --fix --ignore-path .gitignore ."
```
, and applied the customized ESLint settings `.eslintrc.json`.

##Contributing
If there are no guidelines for that part, of course, users may be very confused about using the feature, so we created `Contributing.md` for the newly added part so that users can naturally familiarize themselves with the feature.

#With closing..
Actually, this week's lab was very easy compared to the previous rap. In fact, I think it was the professor's consideration when considering Release 0.3. (Laughs) With this, we will wrap up the lab and move on to Release 0.3 quickly.
How to filter your query with params in Django Rest - Part I
Tags: django, djangorestframework, queryset
Published: 2021-12-11 18:44:19

---
title: How to filter your query with params in Django Rest - Part I
published: true
date: 2021-11-05 00:00:00 UTC
tags: django, djangorestframework, queryset
canonical_url: https://tech.serhatteker.com/post/2021-11/django-rest-query-part-1/
---

## Intro

Let's assume that I have an endpoint like below, linked to
usual `generics.ListCreateAPIView`:

- `/api/articles/`  - GET, POST


```python
# articles/views.py
from rest_framework import generics

from src.articles.models import Article
from src.articles.serializer import ArticleSerializer


class ArticleListView(generics.ListCreateAPIView):
    queryset = Article.objects.all()
    serializer_class = ArticleSerializer
```

As you may already know you can fetch all articles via `GET` and post a new article via `POST` with required data in the *body*.

OK, the question is how can I filter articles against queryset parameters? Like;
- https://example.com/api/articles?regions=US,UK


## Solution

The default behavior of REST framework's generic list views is to return the entire queryset for a model manager.  We should overwrite the default `get_queryset` method;

```python
# articles/views.py
from rest_framework import generics

from src.articles.models import Article
from src.articles.serializer import ArticleSerializer


class ArticleListView(generics.ListCreateAPIView):
    queryset = Article.objects.all()
    serializer_class = ArticleSerializer
    region_separator = ","

    def get_queryset(self):
        """
        Optionally restricts the returned articles to given regions,
        by filtering against a `regions` query parameter in the URL.
        """
        regions = self.request.query_params.get("regions", None)
        if regions:
            qs = Article.objects.filter()
            for region in regions.split(self.region_separator):
                qs = qs.filter(regions__code=region)

            return qs

        return super().get_queryset()
```

It filters articles when `regions` query param provided, when there is no param it returns *all* articles.


All done!




[third party packages]: https://www.django-rest-framework.org/api-guide/filtering/#third-party-packages
Using Local Storage for handling in React
Published: 2021-11-04 18:49:49

Wanting to store data, but not necessarily wanting to POST/GET?

Awesome. This can be done by using local storage.

I ran into this issue when I was trying to make transactions in my ski resort app. I wanted to use variables that I was already using in my “Sale POST”.

**Something to note*** If you are looking to make a transaction model in Rails, it will not work. Rails already has methods associated with “Transaction”. So you will need to name it something else. In my case, I used Sale.rb for my model.

In my “Sale POST”, I used set items like this.

I set my state to :

`const [sale, setSale] = useState({
customer_id: JSON.parse(localStorage.getItem(‘customer_id’)),
user_id: currentUser.id,
product_ids: []
})`

On the customer I was using, I was able to pull the set customer from local storage. I stored this on a click in my code.

`const handleAddCustomerToCart = (customerToAdd) => {
const customerInCart = customers.find((customer) => customer.id === customerToAdd.id)
setCartCustomer(customerInCart)
localStorage.setItem(‘customer_id’, customerToAdd.id);
}`

Storing an item to localStorage is easy. You need to use the code `localStorage.setItem()`

Inside of the setItem function, you need to name what you are saving to local storage. In the case above, I used ‘customer_id’. You also need to save a value to this key. For me, it was a value passed into my click function with an id.
Some other important localStorage functions include: `removeItem and getItem`.

I used getItem in my sale state to pull the id from local storage.

I also used removeItem in my sale post. After posting a transaction, I cleared the cart and removed the customer associated.

These are some beneficial ways to store data when you don’t necessarily need to post to a server.
How to measure continuous improvement
Tags: continuousimprovemen, learning, retrospectives
Published: 2021-11-18 10:50:59

---
title: How to measure continuous improvement
published: true
date: 2021-11-05 00:00:00 UTC
tags: continuousimprovemen,learning,retrospectives
canonical_url: https://jhall.io/archive/2021/11/05/how-to-measure-continuous-improvement/
---

I was recently part of a conversation discussing how to measure continuous improvement. Scrum’s retrospectives, blameless post-mortems, 20% time, training courses, hack days, and many other activities are all designed to foster continuous improvement. But how do know if they’re working?

One of the conversationalists said “We can count our retrospectives, but that feels like a vanity metric.”

I agree, it is a vanity metric.

So what isn’t?

If we take a step back, I think it becomes a bit more clear: What are we aiming to continuously _improve_? This is the thing we should measure _to see if it improves_.

This probably isn’t a single thing, and it likely changes over time. But here are some key metrics I can see measuring to see if continuous improvement is happening within a team or organization:

- Revenue or profit
- Customer satisfaction scores
- Customer retention
- Lead time (from product/feature idea to deployment)
- System performance metrics (web page load time, database query time, CPU utilization, etc)

This list could go on for pages. This should be enough to get you started.

What CI metrics have you found to be valuable?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
My First JavaScript REST API: Dog Facts Deployed To Heroku
Tags: javascript, programming, opensource, heroku
Published: 2021-11-04 23:20:47

![Dogs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7efdyzuarzo4x9fxlrcw.jpg)

## Introduction

I recently deployed my first Javascript REST API that returns facts about dogs. The impetus behind creating this project was to get a working front end solution with the API providing the data. While working on the front end, I started making use of the python API by DukeNgn that can be found [here](https://github.com/DukeNgn/Dog-facts-API) and ran into [CORs](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues that prevented me from getting the data. 

## Development

My main goal was to get the API deployed as quickly as possible and therefore, relied on the simplest solution making use of `Express` and the Javascript `fs` library to read a JSON file with all the facts. I also used the `cors` javascript library to make sure I wouldn't run into the same issue as the python library:

```
// App config.
const app = express();
app.use(express.json());
app.use(Cors());
```

All the code is available [here](https://github.com/MokoSan/DogFacts-API).

## Deployment with Heroku

The deployment to Heroku was smooth following [this](https://devcenter.heroku.com/articles/git) tutorial. The only issue I got into was hardcoding a port that wasn't agreeable with Heroku for which configuring the listening port accordingly did the trick:

```
const port = process.env.PORT || 5000;
```

One of the coolest Heroku features was to hook up my GitHub repository to Heroku resulting in an automatic deployment whenever I pushed changes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cd56u85y7574nejuw10n.png)

## Usage

- https://dogfacts-api.herokuapp.com/api/v1/resources/dogs for all the dog facts.
- https://dogfacts-api.herokuapp.com/api/v1/resources/dogs?number={number} for a particular number of random dog facts.
- https://dogfacts-api.herokuapp.com/api/v1/resources/dogs?index={index} for a dog fact associated with the index - there are 435 total facts.

## Example
https://dogfacts-api.herokuapp.com/api/v1/resources/dogs?number=2

### Output:
```
[
    {"fact":"Dogs are direct descendants of wolves."},
    {"fact":"Small quantities of grapes and raisins can cause renal failure in dogs. Chocolate, macadamia nuts, cooked onions, or anything with caffeine can also be harmful."}
]
```

## Conclusion

Building the API was an awesome learning experience! Any feedback about the code or this blogpost would be greatly appreciated.
What is DX and why you should invest on it?
Tags: productiveteam, leadershipculture, agilemindset
Published: 2021-11-04 23:00:29

###### I am always posting provoking post on my Linkedin, and I have decided to replicate those here. [Let's socialize!](https://www.linkedin.com/in/alexsandro-souza-dev)

Developers are expensive, hard to find, and even harder to keep them. Knowing that, are you investing in the development experience of your team?

Companies that offer a good developer experience allow programmers to get up and running quickly with minimal frustration. A bad developer experience — one that is a neverending battle trying to figure out how things works, with the fragmented team structure, with lengthy onboarding and setup, with complex approval processes — costs time, money and, in some cases, can increase developer turnover.

What motivates most individuals also applies to developers. Nobody feels motivated if you feel unproductive, blocked and waiting for most of the day. 

Engineering teams need a Developer Experience leader who ensures developers have the right tools, processes, and environment to maximise productivity and create the greatest business value possible. The DX will make it easy for developer teams to focus on generating the highest value by solving, automating, and eliminating the daily toil developers encounter. 

Developer Experience (DX) encompasses all aspects of the developer's interaction with the organisation, its tools, systems, processes, culture and mission.

Start now! Introduce a new conversation to the table about the idea. That already can "wow" your developers, who will gladly tell you what they need to be more productive.

The right environment with the right tools and processes in place turns competent engineers into great value delivers.
Angular: Environment
Tags: angular, typescript
Published: 2021-11-01 00:40:20

<!-- https://dev.to/rafaelbernard/environment-variables-in-angular-1f1i
-->
As variáveis de ambiente permitem que nós possamos incluir no nosso código condições, parâmetros e valores diferentes de acordo com nosso ambiente. 

Imagine que você utilize uma API Rest de um serviço qualquer, seja ele criado internamente na empresa que você trabalha, seja ele de terceiros e que esse serviço ofereça um endpoint para homologação e outro para produção.

Uma abordagem inicial seria trocar os valores dessa api todas as vezes que quisermos publicar nossa aplicação em produção.

Uma abordagem muito mais elegante é configurar as variáveis de ambiente para que você não tenha que lembrar de trocar o conteúdo de nenhuma variável.

Aqui mostro como fazer isso utilizando o recurso de configuração de ambiente do Angular.

Projetos criados com Angular CLI possuem por padrão um arquivo de configuração chamado environment.ts disponível na pasta environments da sua aplicação.

![Arquivos environment.ts e environment.prod.ts](https://dev-to-uploads.s3.amazonaws.com/i/9e6z5mc01p2k9ndi64au.png)

`environment.ts:`
```typescript
export const environment = {
  production: false
};
```

`environment.prod.ts`
```typescript
export const environment = {
  production: true
};
```

Veja um exemplo de como usar o environment.

```typescript
import { environment } from '../environments/environment';

environment = environment;
```

```html
<div class="row justify-content-center" *ngIf="!environment.production">    
    <div class="auth-box text-center">
        <div class="row">
            <div class="col-md-12">
                <button type="button" (click)="LimparTudo()" class="btn btn-danger btn-md btn-block waves-effect text-center m-b-20">Limpar Memória</button>
            </div>
        </div>
    </div>
</div>
```
Converting a custom chat to use serverless AWS for it's backend (Part 1: The Setup)
Tags: aws, chat, serverless, javascript
Published: 2021-11-04 22:01:21

The browser based game http://www.ninjawars.net has a chat that I developed a few years ago that is purely EC2 server based.  The background websockets server of the chat is run directly off of a debian EC2 server.  These days, I write stuff in serverless AWS and often use AppSync.  So I thought it was high time to convert this chat from using a custom websockets backend to using the AWS appsync subscription approach for a different method of real-time updates.

![Convert websockets chat to appsync](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15cqa1iae7qfghdmnus9.png)

## Current system

Right now, the way the chat works is:
1. It initializes with the chats that are already in the system from the database
2. When a user sends a new chat, it instantly sends that as some json to the websockets server
3. the websockets server broadcasts the message to other browser clients, which append the chat to the chat area

Simple enough.

However, the websockets server is based on a php package http://socketo.me/ , and sometimes that mini-app goes down without warning, leaving the chat to fallback to an old-school [chat-archive](http://www.ninjawars.net/village).  Even monitoring and being certain that the chat websocket server is -up- isn't obvious.

## How to build a chat today

Ok, so that's the previous approach with websockets, what will the version 2 be like?

Well, having used amplify + DynamoDB + Datastore, Datastore makes it simple to pull data and send up data in an offline-app compatible way, as well as having a subscription to new incoming data.  So first attempt is going to be using DynamoDB, Amplify, and Datastore, generally ignoring auth for the purposes of this simple app, for now.


![Diagram of the intended data flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jn09605m6naha8pglbbk.png)
Above is a diagram of the intended data flow for a simple chat using Amplify Datastore.

I'm working on the architecture for this, more on the results and modifications to come in part 2!
What JavaScript looked like in 1996
Published: 2021-11-04 21:55:50

Check out this very early JavaScript guide book I got from eBay. It was released in 1996 and is only the beta edition back when JS was just born! 👶 Definitely a piece of history.

----------
<b>Yo!</b> I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on [TikTok](https://www.tiktok.com/@js_bits), [Twitter](https://twitter.com/JS_Bits_Bill) and I have a new [debugging course](https://jsbits-yo.com/bug-bash/) dropping soon!
Como capturar url do site com javascript
Tags: javascript, tutorial
Published: 2021-11-04 21:43:27

Para capturar a url do seu site com javascript basta digitar o seguindo script.

```javascript
let captureUrl = window.location.href;
console.log(captureUrl);
```

Criei uma variável let captureUrl, nela vai ficar armazenado a informação da url da minha aplicação.

Na segunda linha, estou exibindo as informações que está no captureUrl pelo console.log e você pode também trocar por alert(captureUrl).


Link da documentação -> [clique aqui](https://developer.mozilla.org/pt-BR/docs/Web/API/Window/location)
VS Code extensions NOT only for Frontend developers
Tags: webdev, vscode, frontend, angular
Published: 2021-11-04 21:14:00

#Prettier - Code formatter
It is code formatter with support of many languages. It can automatically format the code right after save which save your time and increase productivity. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm442n1mvvx7brtavcek.png)
 
#Better comments
This extension is used for more friendly comments, you are able to customize tags by your own. Very easy configurations with support to plenty of programming languages.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdme4qy8aacvvigi2cl6.png)
 
#Angular Snippets
Snippets for Angular, Typescript, HTML.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ih4yzhcmxf0u7wrf906g.png)
#Intelisense path
Extension to autocomplete filenames.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48mx7e4s93mgluoimjhn.png)
 
#IntelliSense for CSS class names in HTML
This extension take care of completion of CSS class in HTML.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gpnnkk7b88otb5ya5tu.png)
#Eslint
Javascript Linter extension.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3alwnf0il0bbvxn2jzaz.JPG)
#GitLens
This extension provide to you useful information from git on hovering of each line. Easy to explore repository, with possibility to be fast redirected to requested file in your Source Control Client (GitHub, BitBucket, ...).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9s1dp7av2jjij8i8spb.JPG)
#ThunderClient
Is lightweight Rest API Client. It is alternative to Postman not that heavy but still useful.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfciibv1pz7zheaijza8.JPG)
#Live Server
Helps to launch local development server with live reloading of static and dynamic pages as well.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c7nskdf3qcr05xxkhuj.JPG)

Follow me on [Twitter](https://twitter.com/smetankajakub_)
Meeting our standards
Tags: watercooler, webdev, opensource, privacy
Published: 2021-11-04 21:10:01

We are building [Offen,](https://www.offen.dev/?utm_source=forum&utm_campaign=0200) a fair and lightweight web analytics software that treats operators and users as equal parties. Here is what we have achieved in the past weeks. 

Statistics about the location of visitors had been on our to-do list for a fairly long time. Yet implementing it in a way that met our privacy standards proved to be a veritable challenge. After [careful consideration](https://github.com/offen/offen/issues/423) and intense research, we finally decided on an approach based on time zones.

To derive the geographical location, this method does not rely on an IP database, but asks the browser for the selected time zone and tries to assign it to a country. This fully protects the privacy of users and provides sufficiently accurate results for analysis as well.

Furthermore, we have addressed the issue of user awareness in Offen. Since the only direct link to the User Auditorium is in the consent banner, it was important for us to provide additional features to increase the attention of users. Widgets now give operators the opportunity to easily integrate a reference to the User Auditorium. Preferably with a link on every page.

While there are still a few improvements on the agenda, with the implementation of location statistics we are a major step closer to v1.0. Be sure to stay tuned and follow us here or on [Twitter](https://twitter.com/hioffen) and [Mastodon](https://fosstodon.org/@offen) for the next release updates.
Introducing Codecademy Docs
Tags: news, codecademy, tutorial, opensource
Published: 2021-11-04 21:07:00

We’re thrilled to announce that we just launched a brand new site called [Codecademy Docs](https://www.codecademy.com/resources/docs) — an open-contribution coding documentation and glossary for popular languages and frameworks. 📕

Every developer relies heavily on coding documentation to get their work done. At Codecademy, we wanted to build a beginner-friendly coding reference, where you can find the answer you're looking for all within three mouse-clicks. Think Wikipedia, but for coding!

{% youtube fkKQiG0zCyo %}

Poke around and let us know what you think. If you catch any bugs or typos, please feel free to make a Pull Request to the GitHub repo. You can find the [contribution guide here](https://github.com/Codecademy/docs/blob/main/.github/CONTRIBUTING.md).

And lastly, we just launched on Product Hunt today. So please give it an upvote if you can:

⬆️ **https://www.producthunt.com/posts/codecademy-docs** ⬆️

Happy Coding!