teleren/devto huggingface dataset:
Django signal...
Tags: django, python, tutorial, beginners
Published: 2022-08-11 08:36:00

There are seven built-in signals in Django - 
`pre_save`: Signal sent before model `save()` method is called.
`post_save`: Signal sent after model `save()` method is called.
`pre_delete`:  Signal sent before model `delete()` method is called.
`post_delete`: Signal sent after model `delete()` method is called.
`m2m_changed`: Signal sent when a `ManyToMany` field is changed
`request_started`: Signal sent when `HTTP` request start.
`request_finished`: Signal sent when `HTTP` request finished.



```python
from django.dispatch import receiver
from django.db.models.signals import pre_save
@receiver(pre_save, sender=User)
def pre_save_user(sender, instance, created, **kwargs): 
    if created:
              #your logic 

```
Are you a Javascript Developer if you don't have these VS Code Extensions?
Tags: javascript, vscode, developer, programming
Published: 2022-08-11 08:33:41


VS Code Extensions every Javascript Developer should have

1.  ESLint: This extension is great for running ESLint rules on your code and integrating the results within the editor. It enables you to detect and quickly fix rule invalidations.

2.  Prettier: This is an opinionated code formatter that integrates with VS Code and other IDEs. It is really handy for ensuring code is formatted and properly indented and presents coloured keywords for more readable code.

3.  REST Client: This is a VS Code extension that allows you to send an HTTP request and view the response directly in VS Code.

4.  Javascript Boosted: Javascript Boosters suggests actions to enhance your code by analyzing your code action cause it solves it all from the declaration, refactoring conditions, functions, typescript, promises and much more.

5.  Mocha Sidebar: If you test your JS, this is for you. This provides support for testing using the Mocha Library. This extension helps you run tests directly on the code and shows errors as decorators.
Using Frameworks to Make Less Mistakes
Tags: 100daysofcode, productivity, entrepreneur
Published: 2022-08-11 08:27:15

Someone who makes the right decision 80% of the time is compensated hundreds of times more than someone who is right 70% of the time.

In an hour of writing code, I make a few hundred decisions.

### Frameworks

Client says they want Y.

I create Y but plan for Z, because I predict they'll ask for that next.

Client says we don't need B, but their customers will probably ask for it, so how I can write this in a expandable way, just in case.

It's almost a framework I've learned to use when working with clients.

- What do they say they want
- What do they probably want but can't articulate
- What can I see that they need
- How can I meet them in the middle with some educated guessing

Sometimes we're right, sometimes we're wrong, but using the past to predict the future is a poor method for making decisions.

Instead of trying to predict what you think is going to work, try to eliminate what you know isn't going to work.

From there you'll be left with a few decent options.

Being successful, really just boils down making less mistakes.

### You're unique

Improving your decision making skills will carry over to improving your life and some famous entrepreneurs swear by mental models or frameworks.

However, you're a unique individual, both in experience and knowledge.

So these popular frameworks are not a simple plug and play, one size fits all.

"Think how we think and you'll win".

What frameworks do you have that set you up to make better decisions? If you don't have any, why not?
RESTful Webservice, gRPC, ApacheThrift for Microservices
Tags: api, architecture, microservices
Published: 2022-08-11 08:21:00

**How to create microservices**

We will create a RESTful Webservice using request URI/URL to search and process and respond in XML, HTML, JSON format.

Commands are followed by HTTP verbs, which are

**- GET:** performs fetching within a given URI.
**- POST:** for generating data.
**- PUT:** is used to edit information.
**- DELETE:** to delete data.

**How to create API naming convention**

The API naming convention should be named as a group of nouns to indicate that it is a group of Resources.

**How to checking request and response with tool**

I recommend the [gRPC](https://grpc.io/) tool. It is an open source framework that will perform request service and response that requests come in. 

In thai reference have many talk how to use [gRPC](https://iamgique.medium.com/grpc-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-990c514c7949)

**How to improve performance transmission data with tool**

How to talk through the service with a Binary method, which will make the transmission efficiency faster It recommends a tool called [ApacheThrift](https://thrift.apache.org/). Suitable for use in Big Data applications where most applications are synchronous. If the destination system has a timeout, it should not be called.
9+ Beautiful Toggle Designs for Your Component States 😍✨
Tags: webdev, css, design, ui
Published: 2022-08-11 07:56:49

---
title: 9+ Beautiful Toggle Designs for Your Component States 😍✨
published: true
description: 
tags: webdev, css, design, ui
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxb74qi2n33lq2t57z0u.png
canonical_url: https://madza.hashnode.dev/9-beautiful-toggle-designs-for-your-component-states
---
A toggle switch is a component used to control two mutually exclusive states (for example, ON and OFF). Toggles can be used to switch between dark and light modes in your app, enable or disable the control center settings, and many other cases.

In this article, I have compiled some of my favorite custom-made toggle designs to inspire your own creations. The focus for curating these was the attention to detail and the animations used to leave a professional impression on your visitors.

For each toggle design, I will provide a direct link, an interactive preview, as well as the author links, so you can explore more of their work, too.

<hr>

##  [3D Orange Switch](https://codepen.io/ykadosh/pen/jOwjmJe)
By:  [Yoav Kadosh](https://codepen.io/ykadosh)

{% codepen https://codepen.io/ykadosh/pen/jOwjmJe %}

## [Let there be light](https://codepen.io/dilums/pen/eYgPrNq)
By: [Dilum Sanjaya](https://codepen.io/dilums)

{% codepen https://codepen.io/dilums/pen/eYgPrNq %}

## [Impossible checkbox](https://codepen.io/jh3y/pen/ZjLKGY)
By: [Jhey](https://codepen.io/jh3y)

{% codepen https://codepen.io/jh3y/pen/ZjLKGY %}

## [Day to Night Toggle Switch](https://codepen.io/aybukeceylan/pen/QWWrbyK)
By: [Aybüke Ceylan](https://codepen.io/aybukeceylan)

{% codepen https://codepen.io/aybukeceylan/pen/QWWrbyK %}

## [Power switch animation](https://codepen.io/milanraring/pen/KKwRBQp)
By: [Milan Raring](https://codepen.io/milanraring)

{% codepen https://codepen.io/milanraring/pen/KKwRBQp %}

## [Airplane Mode Toggle Switch](https://codepen.io/Kia8/pen/dyPLpaP)
By: [Kiarash Zarinmehr](https://codepen.io/Kia8)

{% codepen https://codepen.io/Kia8/pen/dyPLpaP %}

## [Happy and Sad Switch](https://codepen.io/kLeosrisook/pen/VweNjrV)
By: [kalyada](https://codepen.io/kLeosrisook)

{% codepen https://codepen.io/kLeosrisook/pen/VweNjrV %}

## [On/Off CSS Radio Switches](https://codepen.io/nickbottomley/pen/ndqVQP)
By: [Nick Bottomley](https://codepen.io/nickbottomley)

{% codepen https://codepen.io/nickbottomley/pen/ndqVQP %}

## [Toggle Group](https://codepen.io/oliviale/pen/xxboXzo)
By: [Olivia Ng](https://codepen.io/oliviale)

{% codepen https://codepen.io/oliviale/pen/xxboXzo %}

<hr>

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on [Twitter](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/) and [GitHub](https://github.com/madzadev)!

Visit my [Blog](https://madza.dev/blog) for more articles like this.
Find List Of Developer Tools With FindDevTools
Tags: tooling, showdev
Published: 2022-08-11 07:17:00

We are always carefully selecting our developer tools. It has a high effect on our work. When we consider using an app, we might like a certain feature but not like the other features it offers, or we just don't like the pricing.

That's why I personally often look for an alternative to developer tools out there. But rather than save it privately, I'd like to share it with others. As a bonus, other people might recommend another similar tool that can help us with our coding work.

ProductHunt is a perfect place to find a new tool. But it's not focusing on developer tools. It's what makes me excited to build a site where people can just submit a developer tool they like or look for an alternative.

## Introducing FindDevTools

[FindDevTools](https://finddev.tools/) provides information about the pricing and features of certain products to find an alternative. People can compare two products and see them side by side.

## Challenge making a list of developer tools

Building a site like this might seems trivial,  but it has a few challenges (for me) to bring it to the level I like.

### Tools must be categorized correctly
What's hard in making a listing site like this is the categorizing part. We have to very carefully put each tool into the correct programming category. So when people look for an alternative, they will find a correct solution for their problem.

### Entry as draft
For the submission, a new entry will be marked as a draft, so we can review it first and make sure it's on the correct tag and valuable for the programmer/developer. Not just promoting any startup tool.

### Make it easy
To make it easy for people to add a new submission, I run an API. When people provide the link to the site or Twitter, we'll automatically fetch any info we need without the user entering it. Like the logo, description, or snippet.

### Things don't scale
The manual part is still here. Reviewing a submission and adding features with pricing is still critical to make this site useful.

## Revenue Plan
To be honest, I'm not sure yet. It's something that I personally use and like gardening it. Maybe a 'mainstream way' where we have a good traffic, then adding a developer-tools sponsor or providing ads with Carbonads or Ethicalads (something not bothering the viewer).

Site: [FindDevTools](https://finddev.tools/)
How to Increase Your Marketing Email Open Rate with Tencent Cloud’s Simple Email Service
Tags: webdev, edm, html, design
Published: 2022-08-11 06:53:00

The email open rate is of great concern to EDM marketers as well as one of the most crucial metrics for evaluating the effectiveness of their marketing. Check out the essential guidelines to enhance the open rate of your marketing email!

**1. Find the optimum send time**
23.63% of the emails are opened within the first hour after delivery, after which the open rate slumps as time goes by. Therefore, it is important to understand the habits of your recipients, as emails sent to them when they are using a computer or mobile phone are more likely to be opened.

**2. Use the right sender's name and address**
The sender's name and address matter, as they tell the recipients who sent the email. Statistics have shown that 73% of email recipients decide whether to open an email based on the sender's name.

**3. Create an appealing email subject line**
A survey by a data research agency has shown that 69% of email recipients decide whether to open an email based on the subject line. Choose a subject that is relevant to your offering. This can make recipients feel connected and confident.
Add the name, city, or other variables of your recipients to the subject line to draw their attention. This can be easily done with Tencent Cloud Simple Email Service (SES), which allows adding variables during bulk emailing. For more information, see https://www.tencentcloud.com/products/ses.

**4. Perform A/B testing**
A/B testing helps you figure out a better email design by comparing the test results. For example, to determine the best email subject line, you can randomly split your recipients into two groups and email them in two different ways of A and B.

**5. Determine the appropriate send frequency**
You can query the data about your previous bulk email sends and group your recipients by email open frequency. Then you will have a high-frequency group and a low-frequency group. You can email the former frequently but the latter less frequently.

For more details, please visit: https://www.tencentcloud.com/dynamic/blogs/sample-article/100320
Our next topic will focus on how to warn up your IP address for emailing. Stay tuned!
flat() vs flatMap()
Tags: javascript, webdev, programming, tutorial
Published: 2022-08-11 06:52:03

## `flat()`
- The `flat()` method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

- Argument - The depth level specifying how deep a nested array structure should be flattened. Default value is 1.

- The `flat()` method removes empty slots in arrays.

```js
const arr = [10, 20, [40,5]];
console.log(arr.flat());
// [10, 20, 40, 50]

const arrTwo = [10, [[20], 30]];
console.log(arrTwo.flat());
// [10, [20], 30]

const arrThree = [10, [[20, 30]]];
console.log(arrThree.flat(2));
// [10, 20, 30]

const arrFour = [10, [[[[20, 40]]]]];
console.log(arr.flat(Infinity));
//[10, 20, 40];
```

## `flatMap()`

- The flat `flatMap()` method return a new array formed by applying a given callback function to each element of the array, and then flattening the array.

- It is identical to a `map()` followed by a `flat()`.

```js
let arr = [1, [2], 3];
const resultingArr = arr.flatMap((x) => {
return x * 3;
});
console.log(resultingArr); // [3, 6, 9]

let arrTwo = [1, [2], [[3]]];
const doubleEven = arr.flatMap((x) => {
return x % 2 == 0 ? 2 * x : [];
});
console.log(doubleEven); // [4]
```
Improve on choosing the better data structures
Tags: javascript, webdev, data, computerscience
Published: 2022-08-11 06:24:33

In many organisations including B2C e-commerce, the choice of data structures is not good when writing code that scales customers on the web browser.  **DOM manipulations and client-side operations are costly!** Any big operations you write/perform/query directly on the web browser using javascript are costly. 

Say, for instance, the choice of setting up the data structure of a **shopping cart containing many items** that requires frequent update/addition/removal.
Instead of structuring a shopping cart data items like a list of items as shown below -

```
{
  "headers": [
    "name",
    "quantity",
    "price"
  ],
  "items": [
    {
      "id": "1232ewr2",
      "name": "Inoculation",
      "quantity": "1",
      "price": "20",
      "sku": "432EGFE"
    },
    {
      "id": "e632r32",
      "name": "Pulp Fiction",
      "quantity": "3",
      "price": "5",
      "sku": "432ERFE"
    },
    ...
  ],
  "total": 35
}
```
You can use -

```
{
  "headers": [
    "name",
    "quantity",
    "price"
  ],
  "items": {
    "1232ewr2": {
      "name": "Inoculation",
      "quantity": "1",
      "price": "20",
      "sku": "432EGFE"
    },
    "e632r32": {
      "name": "Pulp fiction",
      "quantity": "3",
      "price": "5",
      "sku": "432ERFE"
    },
    ...
  },
  "total": 35
}
```
If you observe critically and think, there are a few observations that determine the use-cases and improvement on time constraints on the web browser -

- 
**Searching** an item in the cart takes - **O(1)** instead of **O(N)**.

- 
**Updating** the quantity (addition/removal) of an item in the cart takes  **O(1)** instead of **O(N)**.

- 
**Removing** an item from the cart takes **O(1)** instead of **O(N)**.

For frequent addition/removal / updation of items - Associative containers like **Maps** come in handier than linear data structures for instance **Arrays / Linked lists**.
Like handling large-scale geospatial data, repeated data containing metadata and storing a set of fixed keywords or tags that are referenced frequently.
So, take your time to analyse your problem first and then determine the basic operations that must be supported and finally choose the right data structure to quantify the resource constraints for each operation.
7 Most Suitable AngularJS Frameworks for Web Applications
Tags: javascript, angular, webdev, frameworks
Published: 2022-08-11 06:14:35

A strong online presence gives your business an ideal platform to rightly communicate with your potential users.

Considering this, to build a modern-day web application, you need to supplement it with attractive functional features. AngularJS frameworks rectify this need and are used for building fully dynamic websites having rich features.

**Top 7 AngularJS Frameworks**

1) Mobile Angular UI
2) Ionic
3) Prime NG
4) Radian
5) Suave UI
6) Quarkus – Supersonic Subatomic Java
7) NGX Bootstrap

**Why should I use AngularJS Framework?**

**Very Easy to Get Started** –  AngularJS is perhaps one of the easiest technology any developer can think of.
 
**Affordability** – Being an open-source application with ease in usage and implementation, AngularJS developers can turn up customized web pages at lower costs.

**Easy Customization** – Based on the feedback provided by the customers, AngularJS can enable the addition and deletion of particular features. This also avoids the unwanted elements in development to bring out a user-friendly experience for the customers. 

**Faster Development** – Utilizing AngularJS MVC architecture, it is easy to execute all the tasks, whether simple or complex.

**Code Reusability** – AngularJS frameworks allow the reuse of the same code wherever required, which also entails minimal coding. This not only helps to save time but also allows the developers to concentrate on some unique codes.
ERROR: System limit for number of file watchers reached in Nuxt
Tags: nuxt, javascript, vue, linux
Published: 2022-08-11 06:01:06

This error has no connection with `NUXT`. It's totally connected with system watcher limits. Simple one line command will resolve this issue.

```bash 
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
```
Thank you
How to add title to Markdown Links & Images?
Tags: tip, markdown, html
Published: 2022-08-11 05:49:17

It's very important to add title to links & images. But in many blogs / websites, they accept markdown & not everyone are aware of or it's not so easy to find how to add title in markdown content. But it's pretty simple to add title in markdown content. Passing a string along with the link or image works in such scenario. Below is an example.

    //Add title to the links
    [Open Google](https://google.com/ "Open Google")

    //Add title to images
    ![alt text](image-url.png "Image Title")

Unfortunately, not all websites accepts & shows title. Some of them ignores the string passed whereas it works on GitHub. Many md cheat-sheets miss out adding this but seems helpful.
Redis Monitoring
Tags: redis, ebpf, kubernetes, tutorial
Published: 2022-08-11 05:30:00

Hey guys, 
Wrote a new blog post on Redis monitoring and performance issues when executing commands on Redis clusters.

TLDR:
* basic Redis monitoring using Redis CLI
* common issues troubleshooting
* Redis cluster issues troubleshooting
* advantages of harnessing ePBF to create contextual metrics


[Monitoring-Redis](https://www.groundcover.com/blog/monitor-redis)

Hope you will enjoy it :)
Para quien programamos?
Published: 2022-08-11 05:27:21

La primera respuesta que se me viene a la mente sería para uno mismo, en segundo lugar quizás por temas profesionales. Otros podrán decir que por hobby y otros podrían decir porque es una pasión.

Cualquier sea el caso, razón o necesidad permitame proponer otra idea sobre la palestra, y que ojalá sería de mi más profundo agrado que usted señor leyente pueda reflexionar.


Yo propongo que deberíamos programar para el próximo ser vivo que tome nuestro código. Como así? creo que usted debería pensar que después de usted hay otro ser humano que hará un esfuerzo enorme por entender lo que usted hizo. Entonces, que pasa si yo sé que existirá ese alguien y programo pensando bajo ese escenario y el siguiente ser piense de la misma forma, y así seguidamente hasta el fin de los fines de la tierra, generando una cadena de valor en nuestro código y erradicando ese odio profundo en aquel código que fue escrito con sufrimiento, pena y dolor.

Yo quiero pensar que este acto tan generoso produce un sinergía en el código, quiero creer que el siguiente ser sentirá una energía positiva cuando lea nuestro código y diga: "woow que legible es este código, todo tan ordenado" y toda esa buena atmósfera la transforme en algo más que buenas intenciones, la transforme en un código que realmente sea significativo para él y quien sabe para usted señor lector, tal vez cuando usted tome un código con esta características, siente este valor agregado y usted ponga mucho más de usted cuando este creando variables y clases.


Finalmente recordarle que cuando las cosas se hacen con amor, las cosas funcionan mucho mejor.


Atte el psicologo del código.
98. Leetcode solution in CPP
Tags: cpp
Published: 2022-08-11 05:22:13

```
class Solution {
  public boolean isValidBST(TreeNode root) {
    return isValidBST(root, null, null);
  }

  private boolean isValidBST(TreeNode root, TreeNode minNode, TreeNode maxNode) {
    if (root == null)
      return true;
    if (minNode != null && root.val <= minNode.val)
      return false;
    if (maxNode != null && root.val >= maxNode.val)
      return false;

    return isValidBST(root.left, minNode, root) &&
           isValidBST(root.right, root, maxNode);
  }
}

```
#leetcode
#challenge
here is the link for the problem: 
https://leetcode.com/problems/validate-binary-search-tree/submissions/
-CSS-JS-formValidate
Tags: codepen, programming, css, javascript
Published: 2022-08-11 05:18:17

Day 23👨‍💻 #FrontEndDeveloper Hoy saque este modesto diseno, lo fusione con un tuto de falconMaster para practicar validaciones con #JavaScript #Vanilla mientras aprendo JavaScript puro.
-Este fue el resultado final: 🕯️😊🚀

{% codepen https://codepen.io/SoyHipst/pen/xxWaxWX %}