teleren/devto huggingface dataset:
📰 Monthly digests: May 2023
Tags: digests, django, programming, web
Published: 2023-05-31 05:29:34

---
title: 📰 Monthly digests: May 2023
published: true
date: 2023-05-31 05:25:02 UTC
tags: Digests,Django,Programming,Web
canonical_url: https://dmytrolitvinov.com/blog/digest-may-2023/
---

 ![📰 Monthly digests: April 2023](https://dmytrolitvinov.com/content/images/size/w1600/format/avif/2023/05/Monthly-Digest--1-.png)

1. 🎸 **[Django: Avoid database queries in template context processors](https://adamj.eu/tech/2023/03/23/django-context-processors-database-queries/?ref=dmytrolitvinov.com)**
2. 👾 **[Lucide](https://lucide.dev/?ref=dmytrolitvinov.com)** - Beautiful & consistent icon toolkit made by the community
3. 🌱 **[Handling a Million Tasks in Django: Efficient Prioritization with Celery, Redis, and Flower](https://awstip.com/handling-a-million-tasks-in-django-efficient-prioritization-with-celery-redis-and-flower-b06fc8957d5?ref=dmytrolitvinov.com)**
4. 🚀 **[17 Django Tips and Tricks for Optimizing Your Application](https://azeemcode.medium.com/17-django-tips-and-tricks-for-optimizing-your-application-848809bc1b48?ref=dmytrolitvinov.com)**
5. 🌾 [**rye**](https://github.com/mitsuhiko/rye?ref=dmytrolitvinov.com) - [An Experimental Package Management Solution for Python](https://github.com/mitsuhiko/rye?ref=dmytrolitvinov.com)
6. 🐍 **[pyautoenv](https://github.com/hsaunders1904/pyautoenv?ref=dmytrolitvinov.com)** - Automatically activate and deactivate Python environments as you move around the file system.
7. 🦗 **[locust-grasshopper](https://github.com/alteryx/locust-grasshopper?ref=dmytrolitvinov.com)** - A load testing tool extended from locust. More details about it [here](https://innovation.alteryx.com/introducing-grasshopper-an-open-source-python-library-for-load-testing/?ref=dmytrolitvinov.com).
8. 📄 [**How to Document Your Code Like a Pro**](https://www.youtube.com/watch?v=L7Ry-Fiij-M&ref=dmytrolitvinov.com) - TLTW: use comments in code, type hints (can be used just as comments - why not 🤷‍♂️), docstrings. And don’t forget about ChatGPT 😉
9. 🤖 **[50+ ChatGPT Prompts for Web Developers](https://www.builder.io/blog/ai-prompts-for-web-developers-chatgpt?ref=dmytrolitvinov.com)**

![📰 Monthly digests: May 2023](https://dmytrolitvinov.com/content/images/2023/05/image.png)

**Quote of the Digest:**

_“We have to stop optimizing for programmers and start optimizing for users.”_ - Jeff Atwood
Build a Full-Stack Ecommerce Site with Vue, Node, MongoDB & Firebase
Tags: vue, node, mongodb, firebase
Published: 2023-05-31 04:36:07

In this tutorial, you'll learn how to build a full-stack ecommerce site with Vue, Node, MongoDB, Postman, Express and Firebase

Do you have Vue.js front-end capabilities, but lack familiarity with the server side? Would you like to develop the skills needed to build full-stack applications? In this course, instructor Shaun Wassell helps you enhance your development tool kit by showing how to leverage your existing Vue.js skills to build a full-stack ecommerce site. Shaun guides you through the process, showing how to use Vue.js to build a simple front end; Node.js and MongoDB to construct the back end; Axios to communicate between the front and back ends; add authentication with Firebase Authentication; and finally, how to take it live. Along the way, learn how to work with different tools and frameworks to correctly configure your site, including Postman and Express.

{% embed https://www.youtube.com/watch?v=oPTFTlkuutQ&ab_channel=iMProz %}
How to Test URL param with Spaces
Tags: testing, react, webdev
Published: 2023-05-31 04:28:17


**Introduction**


When testing applications that involve URL parameters, it's important to ensure that the parameters are encoded correctly, especially when they contain spaces or special characters. In this article, we will explore how to test URL parameters with spaces in Cypress using a practical example.

**Setting up the Test**


To begin, create a new Cypress test file called "search.spec.ts" in the "cypress/integration" directory. This file will contain our test case for searching a hero name in the search bar.

```
describe("Search results", () => {
  it("types hero name in search bar", () => {
    cy.visit("http://localhost:3000/home");
    
    cy.get('[data-cy="search-bar"]')
      .type("iron man")
      .should(
        "have.value",
        "iron man",
        `/characters?nameStartsWith=${encodeURIComponent("iron man")}`
      );
  });
});
```

In this test case, we navigate to the homepage and type "iron man" in the search bar. We then assert that the input value matches "iron man" and that the resulting URL contains the encoded parameter "nameStartsWith=iron%20man" (where "%20" represents the space character).

**Testing URL Parameters with Spaces**


To test the URL parameter with spaces, we need to ensure that the parameter is correctly encoded before asserting its presence in the URL. 


```
cy.should(
  "have.value",
  "iron man",
  `/characters?nameStartsWith=${encodeURIComponent("iron man")}`
);
```

The [encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) function converts special characters, including spaces, to their URL-encoded representations. By passing the "iron man" value through this function, we can safely include it in the URL.

**Conclusion**

Testing URL parameters with spaces is essential to ensure that your web application handles them correctly. 

By using the encodeURIComponent function and asserting the encoded parameter in the URL, you can confidently test scenarios where URL parameters contain spaces or special characters. 


Hope this helps!
Top 50+ Angular Interview Questions and Answers
Tags: angular, javascript, interview, webdev
Published: 2023-05-31 04:16:52

In this course you will complete 58 Angular interview questions that come from real Angular interviews. Prepare for next Angular coding interview by doing practice questions. Learn Angular skills & concepts.
This course is great preparation for any Angular programming interviews that you may have coming up. Programming interviews need a lot amount of knowledge, but the best way to prepare for interviews is a lot of practice! In this course you will complete 58 Angular interview questions that come from real Angular interviews. There are no excersises that nobody asks here. In every question we will get a task first, then you will try to solve each problem yourself, and then I will show you different solutions to each problem step-by-step. We will take a deep dive into the skills, concepts, and techniques that are required to solve each problem.

When you have completed this course you will have mastered the 58 interview questions that we will cover, but you will also have learned the concepts, skills, and techniques, like Typescript and RxJS that are necessary for you to excel in any other interview questions you may be asked. You will feel very confident going into any Angular programming interviews you will have. On top of all this, you will strengthen your Angular programming skills and Angular fundamentals in overall.

Core topics of the course:

Typescript concepts
RxJS concepts
How does Angular work?
State management in Angular
Change detection strategies
Performance optimisations
Error handling in RxJS, subscribes and async pipes
Interceptors
Protecting routes with guards
Angular forms

**What you'll learn:**
  

- Be very well prepared for any Angular programming interviews you will have
-    Excel in a wide variety of Angular interview questions that you could be asked in an interview
-    Strengthen you Angular programming skills and your knowledge of important Angular concepts
-    Learn the skills, concepts, and techniques necessary to excel in Angular coding interviews
-    Learn what programming interviews are like and what kind of questions to expect
-    Feel very confident going into any Angular programming interviews you will have

{% embed https://www.youtube.com/watch?v=BPVlmFIXfaI %}
How to Add Quantity Increment and Decrement in Magento 2
Tags: webdev, magento, magento2tutorials
Published: 2023-05-31 04:08:42

Magento 2 offers a vigorous stage for building a web based business store. One of the basic highlights of an online business store is the capacity to change the amount of items in the truck. 

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

In this blog entry, we will walk you through the most common way of adding amount addition and decrement usefulness in Magento 2. Carrying out this element can essentially upgrade the shopping experience for your clients by making it more straightforward for them to adjust item amounts in their truck without eliminating and yet again adding things.

Besides, an easy to understand amount determination cycle can urge clients to make bigger buys and decline the quantity of deserted trucks. The presence of the amount box on the item page and similarity with different gadgets are likewise urgent for giving a smooth shopping experience to clients. In this bit by bit guide, we will clarify **_how to add quantity increment and decrement in Magento 2._**

For more info, visit **_https://webguru.dev/how-to-add-quantity-increment-and-decrement-in-magento-2/_**
What is an API and why is it widely used on the web?
Tags: api, backend, fundaments
Published: 2023-05-31 03:50:32

Being a web developer you must know certain terminologies or processes that are key to the operation and extend your applications to others.

In this article I will explain in a simple way what an API is and why it is so widely used today on the web, by small, medium and large companies for the correct use of their information.

An API (Application Programming Interface or Application Programming Interface), is an application that serves as a bridge between data and two or more applications, ie, you can have your database on a separate server and to generate this interface, will end in a URL that will be the output of the information or responses when requested, this URL is known as endpoint, so you can have a web page and a mobile application receiving the same data connected to an API and manage them (depending on the permissions set by the owner) without having to establish different connections directly to the server in applications.


![Architecture of the use of an API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqg8oe2kc5w27hr46h5c.jpg)

An API works through the HTTP protocol, which stands for Hypertext Transfer Protocol, this protocol is the one that defines the syntax and semantics used by the software elements of the web architecture (clients, servers, proxies) to communicate, that is to say, the one that allows us to interact with the content of the web.

## Common uses of API's


![Some companies that have their API free for third party applications](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhh5e5ks2lmvs7qc3qzl.jpg)

Large companies and platforms such as Spotify, Youtube, Facebook, Twitter, Paypal, Shopify have their APIs giving developers permission to certain information allowing them to link it and the end user can obtain certain data from their respective accounts and make use in these applications.

In e-commerce it is widely used when making purchases that ask us for our credit card information to verify if it is real and we are not inventing it, payments by digital means such as Paypal, access from a mobile application and from the web to the products in our inventory whether we use platforms like Shopify or developed especially for our company.

Manage information from our own organization or where we work.

Access applications from our social networks and display information of our liking and entertainment such as: our Spotify playlists, the content we share as twetts, Facebook and Instagram posts.

In conclusion the use of APIs allow many of us as developers to obtain results in a short time and in a more productive and efficient way allowing us to obtain functionalities in our applications that already exist without having to redo them, hence the comment that perhaps we have heard at some point is not necessary to reinvent the wheel, but to make use of the already developed code that meets the objective or the solution of the problem we are solving.

In future articles I will be expanding information on the subject of API and HTTP.
How To Use Custom Back To Top Button In Vue.Js
Published: 2023-05-31 03:22:56

## Please check this article:
 [https://techsolutionshere.com/how-to-use-custom-back-to-top-button-in-vue-js/](https://techsolutionshere.com/how-to-use-custom-back-to-top-button-in-vue-js/)
Error "CSRF token mismatch" on a path that does not require token authorization.
Tags: laravel, backend, bug, csrftoken
Published: 2023-05-31 03:19:31


![Error "CSRF token mismatch" on a path that does not require token authorization.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tk10624dby5r5707dug.jpg)

If you use Laravel you have probably encountered the following error "CSRF token mismatch".

Laravel uses CSRF tokens to protect your application from cross-site request forgery attacks.

If you encounter a "CSRF token mismatch" error, it usually means that the token sent with the request does not match the one expected by Laravel.

But, if a route does not need a session token, such as a user registration or password retrieval, and you get this error with status 419, how to fix it?

## Solution:

You can fix the problem by excluding that specific path from CSRF protection in Laravel. To do so, follow these steps:

1 - Open the file **app/Http/Middleware/VerifyCsrfToken.php**, and add the path in the **'$except'** property, as follows:

## In case it is an API:

`protected $except = [ 'api/path-of-api-user-creation-api', ];`

## In case of being an SPA:

`protected $except = [ '/path-from-api-user-creation-api', ];`

Then restart the Laravel server so that it can take the change and that's it.
radix-svelte with Thomas G. Lopes
Tags: webdev, javascript, beginners, podcast
Published: 2023-05-31 03:11:02


Original: https://codingcat.dev/podcast/3-13-radix-svelte

{% youtube https://youtu.be/h8DLp6CdRcQ %}

## Questions

1. Can you tell us more about yourself?
2. Do you take inspiration from Pink, Appwrite’s design system?
3. Is Radix a design system or just a component library?
4. How do you decide which components to build?
5. What tools do you use? 
  1. Stack
  2. Component Creation
  3. Testing
6. Svelte Package command
7. What are some of your struggles?

## Links

* [radix-svelte](https://www.radix-svelte.com/)
* [radix-svelte Docs](https://www.radix-svelte.com/docs/accordion)
* [Appwrite Pink](https://pink.appwrite.io/)
Websites to follow to stay up to date on Startups and their stuff...
Tags: startup
Published: 2023-05-31 02:49:08

Here's a list of websites to follow for staying up to date on startups:

TechCrunch ---> techcrunch.com
Crunchbase ---> crunchbase.com
AngelList ---> angel.co
Startup Grind ---> startupgrind.com
Product Hunt ---> producthunt.com
Hacker News ---> news.ycombinator.com
VentureBeat ---> venturebeat.com
Forbes (Startups) ---> forbes.com/startups
Entrepreneur ---> entrepreneur.com
LinkedIn ---> linkedin.com
These websites offer a wealth of information on startups, funding, product launches, industry trends, and entrepreneurial insights. Make sure to explore their content, subscribe to their newsletters, and follow them on social media to receive regular updates on the startup ecosystem.
A Facilidade do QuickDBD
Tags: database
Published: 2023-05-31 02:41:47

No mundo acelerado de hoje, a eficiência é essencial. Isso se aplica a todas as áreas da vida, inclusive ao desenvolvimento de software. É por isso que ferramentas como o QuickDBD são tão valorizadas. O QuickDBD é uma ferramenta poderosa e fácil de usar para criar diagramas de banco de dados de forma rápida e eficiente.

Uma das principais vantagens do QuickDBD é sua interface intuitiva e amigável. Mesmo para aqueles que não têm muita experiência em design de banco de dados, o QuickDBD oferece uma curva de aprendizado suave. A interface é limpa e organizada, com todos os recursos essenciais facilmente acessíveis. Isso significa que os usuários podem se concentrar no projeto em si, em vez de se perder em menus complexos ou opções confusas.

Outra característica que torna o QuickDBD tão fácil de usar é a sua simplicidade no processo de criação de diagramas. Basta arrastar e soltar os elementos do banco de dados, como tabelas e relacionamentos, na tela de design. Os elementos se encaixam perfeitamente, e a conexão entre eles é feita automaticamente. Esse processo intuitivo e visual permite que os usuários criem diagramas rapidamente, economizando tempo e esforço.

Além disso, o QuickDBD oferece uma linguagem de definição de dados (DDL) simplificada. Os usuários podem descrever suas tabelas e relacionamentos de maneira clara e concisa, sem a necessidade de aprender uma linguagem complexa como SQL. Essa abordagem simplificada facilita o entendimento e a comunicação entre membros da equipe, mesmo aqueles sem conhecimento técnico aprofundado.

Uma das funcionalidades mais úteis do QuickDBD é a geração automática de scripts SQL. Depois que o diagrama do banco de dados é criado, o QuickDBD é capaz de gerar automaticamente o código SQL correspondente. Isso elimina a necessidade de escrever manualmente os scripts, reduzindo significativamente a margem de erro e agilizando o processo de desenvolvimento. Os usuários podem exportar o script SQL gerado e executá-lo diretamente em seu sistema de gerenciamento de banco de dados (SGBD) de escolha.

Outro aspecto importante a ser destacado é o suporte e a documentação fornecidos pela equipe do QuickDBD. Eles oferecem tutoriais detalhados, exemplos práticos e uma seção de perguntas frequentes abrangente em seu site. Isso significa que os usuários podem encontrar respostas para suas perguntas rapidamente e obter ajuda sempre que necessário. A equipe também está aberta a feedback e sugestões, o que demonstra um compromisso contínuo em melhorar a ferramenta e atender às necessidades dos usuários.

Em resumo, a facilidade de uso do QuickDBD é inegável. Sua interface intuitiva, processo simplificado de criação de diagramas, linguagem DDL simplificada e geração automática de scripts SQL tornam a ferramenta acessível mesmo para iniciantes. Com o QuickDBD, os usuários podem projetar e documentar seus bancos de dados de maneira eficiente e sem complicações. É uma ferramenta valiosa para desenvolvedores e equipes de projeto que desejam acelerar o processo de criação de bancos de dados de forma intuitiva e eficaz.
De[v]log#2: Making astronvim and raylib work on window + Extra: astronvim LspInstall error on android
Published: 2023-05-31 01:49:23


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


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

My day started off pretty normal....still feeling bad that I couldn't finish setting up yesterday...so with new determination and all i set out to solve those errors...

first order of business was to fix everything that is wrong with astronvim....

There are dependencies to install before install astronvim and my negligence caused me a great headache...installed all of them and those errors warning go away...

now for the next error...i noticed that i couldnt using :TSInstall 
apparently it is compile error...due to compiler being super old or something so i setout to fix it

fortunately there is already support for this error
```
https://github.com/nvim-treesitter/nvim-treesitter/wiki/Windows-support

```
this link helped me out...i literally installed almost everything describe in there...curl tar mingw llvm
then i put this line of code 
```
require 'nvim-treesitter.install'.compilers = { "clang" }
```
at the end of nvim/init.lua file and voila....the issue is resolved! Astronvim now run almost flawlessly...a few hiccups here and there but i can tolerate them for now...so i will just fix them later


After that i tried to fix raylib once again...
following along this make it possible to compile and run on vscode
```
https://www.appsloveworld.com/cplus/100/561/how-to-add-raylib-to-vs-code
```
but for some reason...that only work for c codes...i gotta search a way for c++ to work too...but atleast i can fallback and work with c now

My eyes and head hurt from all those setbacks but hey...adrenaline rush after solving a problem always motivate me to keep on going...so all is well in the end i guess?

## Extra
I dont want to write a new log for this since it is a miniscule problem...running astronvim on android work fine with one exception... I could'nt install clangd with LspInstall command...
The error says "Failed due to unsupported platform or something"
Manually installing clangd outside of nvim and putting this line at the bottom of /nvim/init.lua solve the problem

`require'lspconfig'.clangd.setup{}`

with one problem solved...new one arrived gcc wont work on termux and now I m trying to setup archlinux on termux with proot...

I had some trouble install tree-sitter-cli with cargo and npm on termux...I was busy that day and forgot to write about it...I will just do it later
Route Management Using React Router DOM
Published: 2023-05-31 01:43:10

On the **Web Development** it's common the page routing.

It works with the application managing what will be rendered according the page (also called path) accessed by the user.

There are several ways to control page routes, but now let's talk about this process using the **React Router DOM** lib.

Installing de lib:

`npm i react-router-dom`

Creating a functional Router component contained our routes. It's necessary importing from **'react-router-dom'** the components Route and Routes.

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

To the component Route is necessary add some props like: path and the element which will be render.

At the route _/home_ will render de component Home and the route _/history_ will render de component History.
 
Lets to complicate more? If I want to use the same path to more than one route? It's easy!

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

You can use the functional component Route as a container, and add path which will be shared to their children.

Now to visualize the component Home it's necessary access the route _/page/home_, the same way to History which will be render if accessed by _/page/history_.

To Finish it's necessary add the Provider Browser Router around to our Router component into of React App.

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