teleren/devto huggingface dataset:
A Tool for Learning to Classify CSS Selectors and Combinators
Tags: html, css, webdev
Published: 2023-08-06 09:41:57

---
title: A Tool for Learning to Classify CSS Selectors and Combinators
published: true
description: Organize and highlight CSS selectors and combinators by type
tags: html, css, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wl38x15ck30vkdd6bqp.jpg
---

If you find yourself constantly struggling to categorize the numerous types of CSS selectors and combinators. I've often found myself forgetting the different classifications, which led me to create [selectors.info](selectors.info) - a tool designed to systematically organize and visualize CSS selectors and combinators by their respective types. This tool serves not only as a practical reference but also as a learning guide.

## Write, Parse, and Classify

Write your list of selectors and combinators, and the tool will parse and categorize them, as an example on how the HTML below will be classified accordingly:

```css
.navigation > li:last-child a
```

Will be categorised like:
- Selectors
	- Class: `.navigation`
	- Type: `li` and `a`
	- Pseudo-Class: `:last-child` 
- Combinators
	- Child: `>`
	- Descendant: space

![Write, Parse, and Classify CSS Selectors and Combinators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ma8b1wout0gvq1tlmla.jpg)

## Easy Navigation

Once your CSS selectors are parsed and divided into categories and subcategories (e.g., `Selectors` as a Category and `Pseudo-Class` as a SubCategory), you can easily highlight each type within the code by clicking on a Subcategory.

![Easy CSS Selectors/Combinators Navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vqoy2dwxpam8p3ugwbw.jpg)


## Concise Descriptions for Every Classification

For each selector or combinator type, it provides a brief yet informative summary, offering an insightful glimpse into its implementation.

![CSS Selectors/Combinators types description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6ipi70t7ci6cva287tq.jpg)


## Tool Features

- **Classify Selectors and Combinators:** Organize and visualize their types.
- **Understand Selector Types:** Includes Type Selectors, Classes, IDs, Attributes, Pseudo Classes, and Pseudo Elements.
- **Explore Attribute Types:** Clear definitions for specific matchers like Prefix Matcher `^=`, Suffix `$=`, etc.
- **Combinators Type Insight:** Breakdown of combinators types like Descendant, Child, Next Sibling.
- **Interactive Editor:** Immediate classification by Selectors, Combinators, and Attributes Types, with highlighting.


## Conclusion

[selectors.info](selectors.info) is a practical tool that visually categorizes selectors and combinators. It is designed to assist anyone looking to understand and organize CSS selectors and combinators better

{% youtube oWolqqtPDJM %}
Setting up PostgreSQL on a Django/Python project
Tags: python, django, postgres
Published: 2023-08-06 08:59:04

Postgres is a popular relational database that you can use in your Python/Django project. Setting it up however, can be a little overwhelming.

Graciously, with Django models, you don’t have to write too many SQL queries to create your database, tables and even add data on your psql shell.

Here is your step by step summary to install and set up PostgreSQL on Ubuntu 22.04:

### Check whether Postgres is installed
- Open a terminal or command prompt.
- Run the following command:

```shell
 psql --version
```
- The version information will be displayed in the output.

### Install Postgres 

```shell
sudo apt update
```

```shell
sudo apt install postgresql postgresql-contrib
```

### Start the PostgreSQL service

```shell
sudo systemctl start postgresql.service
```

### Switch over to the postgres account

```shell
sudo -i -u postgres
```

### Access the psql shell

```shell
psql
``` 

### Create a superuser role with login privileges, and password

```shell
 CREATE ROLE <name_of_role> LOGIN PASSWORD <password_as_a string> BYPASSRLS;
```

### Create database

```shell
CREATE DATABASE <database_name>;
```

### Grant privileges on the database

```shell
GRANT ALL PRIVILEGES ON DATABASE <database_name> TO <created_superuser>;
```

### Connect to the database (outside of psql and user postgres)

```shell
psql -U payments_admin -h localhost -p 5433 -d payments;
```

That's it, you are now ready to start going migrations to your database, and create tables based on your Django models.
DISSE: a Library for Modelling and Simulating Distributed Systems.
Tags: go, distributedsystems, showdev
Published: 2023-08-06 08:25:01

Hi, I'm the creator of DISSE, a library for modelling and simulating distributed systems. I developed this library as part of my final year project at university to learn more about distributed algorithms and to experiment with different scenarios. I'm looking for some feedback and advice from the community on how to improve it and make it more useful.

DISSE is designed to be used by researchers, students, and engineers who are interested in distributed algorithms. It can be used to study the behaviour of different algorithms, to compare different algorithms, and to design new algorithms. DISSE provides a high-level API for creating models of distributed systems. These models can be used to create simulations that test the behaviour of distributed systems under various conditions. Additionally, DISSE provides a comprehensive logging system for obtaining various outputs from the simulations.

You can view the API documentation at https://pkg.go.dev/github.com/samuel-adekunle/disse. You can also view the standard library for modules which implement common distributed systems algorithms and examples of how to use the library, in GitHub repository at https://github.com/samuel-adekunle/disse.

Some of the features of DISSE are:

- It supports message passing, timers, and interrupts as the basic primitives for communication and synchronization.
- It allows users to define custom message types, timer types, and interrupt types for their algorithms.
- It supports subnodes, which are nodes that are part of another node. This can be used to model hierarchical or nested systems.
- It supports different types of loggers, such as debug logger and UML logger, which can generate different outputs from the simulations.
- It uses shared memory for local simulations, which makes it fast and efficient.
- It is written in Go, which is a modern and expressive language with excellent concurrency support.

I would appreciate any feedback or advice on how to improve DISSE. Some of the questions I have are:

- How can I make the API more user-friendly and intuitive?
- What are some of the algorithms or scenarios that you would like to see implemented in the standard library or the examples?
- How can I improve the documentation and the code quality?
- How can I make DISSE more scalable and distributed?

Please feel free to comment below or open an issue on GitHub if you have any suggestions or questions. Thank you for your time and interest!
Demystifying Angular CLI: A Comprehensive Guide for Beginners
Tags: angular, javascript, typescript, programming
Published: 2023-08-06 08:04:14

This article covers all the essential information about the Angular CLI for beginners.Simply click on the link below to explore it!
👉[Read Now](https://medium.com/@developer.aymenmissaoui/demystifying-angular-cli-a-comprehensive-guide-for-beginners-a0f88360295f)
Angular Pipes: Simplifying Data Transformations in Your Templates
Tags: javascript, typescript, angular, programming
Published: 2023-08-06 08:01:47

This article covers all the information beginners need to know about Pipes in Angular. Simply click on the link below to explore it!
👉[Read Now](https://medium.com/javascript-in-plain-english/angular-pipes-simplifying-data-transformations-in-your-templates-cf944938775f)
Balancing Your Coding Act: Work-Life Harmony in Your Dream Job?
Tags: codenewbie, beginners, discuss, career
Published: 2023-08-06 07:00:00

_Welcome to "Discover Your Code," guided by our official DEV moderator, Sloan the Sloth 🦥. This series is designed to help aspiring coders and students explore the coding universe, ignite their passion, and find their ideal career paths._

Today's question is:

> How important is achieving work-life balance in your ideal coding career?

Responses from newbies and experienced devs alike are encouraged in order to broaden our horizons and showcase different POVs.

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*
Code Clicks: When Have Colleagues Sparked Insights?
Tags: discuss, carreer, learning
Published: 2023-08-06 07:00:00

_Discover diverse career growth stories and coding journeys in "Mentors & Mentorships" on The Daily Byte. Get inspired! 💻🌟_

> Has a fellow developer or a colleague ever said something to you that just clicked and sparked a new understanding or approach to your work? Describe the moment and how it impacted your coding style or approach to work.


Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Solving the 404 Error in React + React Router Projects: A Comprehensive Guide
Tags: react, reactrouter, webdev, tutorial
Published: 2023-08-06 06:50:21


---
title: "Solving the 404 Error in React + React Router Projects: A Comprehensive Guide"
published: true
description: "Ever experienced a 404 error when hitting URLs directly in a React + React Router project, even though clicking links works fine? This article explains how to solve this common problem."
tags: react, reactrouter, webdev, tutorial
---


If you've ever encountered a situation in a React Router project where clicking a link transitions smoothly, but hitting the URL directly results in a 404 error, you're not alone. In this article, we will explore how to resolve this issue.

## Table of Contents
1. [Overview of the Problem](#overview-of-the-problem)
2. [Understanding the Cause and Solution](#understanding-the-cause-and-solution)
3. [Configuring Apache Server](#configuring-apache-server)
4. [Configuring Nginx Server](#configuring-nginx-server)
5. [Conclusion](#conclusion)

## Overview of the Problem
We'll begin by describing the phenomenon where clicking a link works as expected, but entering the URL directly leads to a 404 error.

### Sample Code
```jsx
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}
```

## Understanding the Cause and Solution
Next, we'll look at the root cause of this phenomenon and the solution for Apache servers.

### Client-Side Routing vs. Server-Side Routing
Since React Router performs routing on the client-side, the server searches for a physical file corresponding to the URL, resulting in a 404 error.

## Configuring Apache Server
We'll address this issue by modifying the settings on an Apache server.

### Modifying the .htaccess File
Add the following code to your existing `.htaccess` file:

```htaccess
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
```

## Configuring Nginx Server
For Nginx servers, you can set up as follows:

```nginx
location / {
    try_files $uri $uri/ /index.html;
}
```

## Conclusion
If you've ever been plagued by 404 errors with React + React Router, the methods in this article may be your solution. By understanding the behavior of client-side routing and properly configuring your server, you can achieve smooth page transitions.
Getting migration and seeder files from connected DB using db_craft
Tags: codeigniter4, php, migration, seeder
Published: 2023-08-06 06:45:12

## DB-Craft

### DB-Craft is a package for CodeIgniter 4 that provides convenient commands to generate migration and seeder files from a connected database.

### Installation

You can install the DB-Craft package via Composer by running the following command:

```
composer require robinncode/db_craft
```

### Dependencies

DB-Craft has the following dependencies:

- PHP: ^7.0.* || ^8.0.*

- CodeIgniter/Framework: ^4.0.*

### Usage

DB-Craft comes with the following commands:
Generate Migration Files

To generate all migration files from the connected database, run the following command:

```
php spark get:migration
```

To generate migration files for a specific table, run the following command:

```
php spark get:migration table_name 
```
Replace `table_name` with the name of the specific table for which you want to generate migration files.
Generate Seeder Files

To generate all seeder files from the connected database, run the following command:

```
php spark get:seed
```
To generate seeder files for a specific table with table data, run the following command:

```
php spark get:seed table_name
```
Replace `table_name` with the name of the specific table for which you want to generate seeder files.
Apa itu Autentikasi: Definisi dan Jenis-jenis Autentikasi
Tags: indonesia, auth
Published: 2023-08-06 06:22:26

Dalam dunia digital, sering terdengar istilah "autentikasi" atau "authentication". Tulisan ini akan membahas sedikit lebih dalam tentang itu. Selamat membaca!

## Apa itu Autentikasi?

"Autentikasi" (baku) atau "otentikasi" (tidak baku) itu proses untuk membuktikan sesuatu secara autentik (baku) atau otentik (tidak baku).

Autentik sendiri artinya "bisa dipercaya".

Dalam bahasa Inggris disebut _authentication_ atau disingkat menjadi _auth_ saja. Untuk selanjutnya, saya akan terus menggunakan istilah "auth".

Jadi kalau ada pertanyaan "apa itu auth?", artinya sama dengan autentikasi yang sudah disebut di atas.

Sumber:

- https://kbbi.kemdikbud.go.id/entri/autentikasi
- https://kbbi.kemdikbud.go.id/entri/autentik

## Kapan Proses Auth Digunakan?

Ketika program atau aplikasi komputer yang kita buat butuh tahu penggunanya (Inggris: user) bisa dipercaya atau tidak. Sering sekali di dalam aplikasi ada fitur-fitur yang tidak bisa digunakan oleh sembarang orang, maka proses auth ini sangat populer. Bahkan banyak modul terpisah yang memang dibuat khusus untuk proses autentikasi.

"Pengguna" itu sendiri belum tentu manusia, ya. Bisa jadi komputer atau entitas lain.

## Auth Sehari-hari

Biasanya orang awam lebih familiar dengan istilah "login" dan "logout". Dua hal tersebut termasuk dalam lingkup auth. Selain itu ada juga istilah "register" atau "daftar" atau "buat akun". Proses pembuatan akun ini juga masuk dalam lingkup auth.

## Jenis-jenis Auth

Proses auth ada berbagai macam tingkat kompleksitas dan keamanan. Secara umum, bisa dibagi menjadi beberapa kategori di bawah ini:

### 1. Knowledge-based Authentication

Atau "autentikasi berbasis pengetahuan". Auth ini berhubungan dengan sesuatu yang diketahui user, seperti: password, pin, atau jawaban atas pertanyaan keamanan.

### 2. Posession-based Authentication

Atau "autentikasi berbasis kepemilikan". Auth ini berhubungan dengan sesuatu yang dimiliki user, seperti: kartu, token fisik, atau mobile device.

### 3. Biometric Authentication

Auth ini berhubungan dengan ciri-ciri fisik yang dimiliki user manusia. Proses auth bisa dilakukan dengan mendeteksi wajah, sidik jari, atau bagian tubuh lain.

### 4. Multi-factor Authentication (MFA)

Auth ini kombinasi atau gabungan dari jenis-jenis auth yang sudah disebutkan sebelumnya. 

## Kesimpulan

Auth atau autentikasi itu proses untuk membuktikan sesuatu bisa dipercaya atau tidak.

Auth adalah pintu dari banyak proses lainnya yang berhubungan dengan kontrol akses. Semoga dengan tulisan ini, kita bisa lebih memahami proses lain yang lebih kompleks.

Sila meninggalkan komentar atau pertanyaan untuk memulai diskusi tentang auth.

Terima kasih sudah membaca!
. NET 8 WEB API from A to Z
Tags: aspdotnet, csharp, rest, webapi
Published: 2023-08-06 05:35:50

This is not an article. I am going to teach to how to create a .NET 8 WEB API from scratch. All the chapters would be collected here to let you find them easy.

Section 1 - Introduction
{% embed https://youtu.be/r9zzEB_K8FU %}

SECTION 2 - The Anatomy of a WEB API !
{% embed https://youtu.be/ubk9Qz7CHEE %}

SECTION 3 - AN ASP.NET WEB API in Real Life
{% embed https://youtu.be/6PUxb_ZsJ9Q %}

SECTION 4 - Minimal APIs or Controller Classes
{% embed https://youtu.be/0QnxIDquOJY %}

SECTION 5 - Routing
{% embed https://youtu.be/DMh4ZpNxHE4 %}

SECTION 6 - Model Binding - Part 1 - Simple Types
{% embed https://youtu.be/g0B65K4H4Ek %}

SECTION 7 - Model Binding - Part 2 - Complex Types
{% embed https://youtu.be/qD4qjQuvc_I %}

SECTION 8 - Model Validation via Data Annotation
{% embed https://youtu.be/XmCIZdH7Wr4 %}

SECTION 9 - Model Validation - Validation Attributes
{% embed https://youtu.be/O5dq0VYmguM %}

SECTION 10 - Return Types
{% embed https://youtu.be/nTpOmCNiINs %}

SECTION 11 - Filters
{% embed https://youtu.be/UVPFuFqoUOQ %}

SECTION 12 - Filters - Example
{% embed https://youtu.be/2Dsxgs0s4ek %}

SECTION 13 - Cleaning the Controller
{% embed https://youtu.be/HQL7AkHIPo4 %}
How to easily shortlisted your Resume !
Tags: resume, jobhunter, resumewriting, job
Published: 2023-08-06 05:33:33

Finding a job these days needs a relevant resume to the job description, otherwise, you wont be shortlisted and then you get no interview that is so upsetting. Today I am going to explain one the biggest problems in our CVs plus I have introduced a very simple solution as well.

Your resume wont be shortlisted most of the time because you have created a word format or PDF one and then send it to any company with any job description and then you are expecting a happy answer from them!. Most of our CVs are suffered from these two issues :

- Job-Skills Mismatches in the CV !

- Lack of relevant details !

This means, we had better create a relevant resume based on the job description for each job vacancy that we want to apply, but it seems it would be hard job. I am going to say it is not hard at all.

Just make sure you have access to :

1- ChatGpt

2- Linkedin or any other job portal

The rest should be explained in details so please watch the youtube clip that I prepared

{% embed https://youtu.be/VSny2WTwL-M %}
Detect a language from a string in C#.NET
Tags: csharp, dotnet, programming, tips
Published: 2023-08-06 05:12:07

Let's say you have a simple string in any language as your business forces you to let the client enter so you need to detect the language of the respected string at run time. We might have the varity of ways to solve solve this problem , but as a lazy .NET Developer, I am going to introduce a very simple Nuget tool to do job for you in less than a second.

First of all, create a simple Console Application in Visual Studio or in/by any IDE you want. Like below screen. 👇

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9g8d1s7o5ftwcrdszeji.jpeg)

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

then you would have a simple solution like what I have shared below. 👇

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

The next step is adding LanguageDetection.NETStandard Nuget package to the solution.

[](https://nuget.org/packages/LanguageDetection.NETStandard/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1e5pyzkwtq1wyruf6aas.jpeg)


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

To make the long story short, just go through the simple piece of code that I have written.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ubkuiviu8zeoyy64wgq.jpeg)

As you can see, the result is not bad.

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

but if I try a different language ?. Something like Persian might be a little bit tricky!. Let's see.


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

Not bad !.

Since you guys are totally lazy to write even 3 lines of code, I do share the code with you below.

```
using LanguageDetection;

var LangDetector = new LanguageDetector();


LangDetector.AddAllLanguages();

//string MySimpleText = "This Text is a simple damn English string. Detect if you can!.";

string MySimpleText = "این یک متن فارسی ساده است. اگر مردی، این را تشخیص بده";


var Result=  LangDetector.Detect(MySimpleText);

Console.WriteLine(Result);
```

That's all.

Enjoy C# development for ever...
Skeleton Screen Loading Effect with HTML & CSS
Tags: html, css, programming, design
Published: 2023-08-06 05:30:14

Skeleton screens start as a blank page with placeholders for the content you'll see. The elements are gradually revealed until the page is fully loaded.

You can create this skeleton screen with html5 & css3 without any javascript code with us. please see the video on youtube :

{% embed https://youtu.be/aQGP2R1HyU0 %}

and see the source code on Github :

{% embed https://github.com/bugandfix/Skeleton_Screen %}
Interfaces are so yesterday in C# 12
Tags: csharp, dotnet, programming, tips
Published: 2023-08-06 05:27:15

It seems creating Interface is so yesterday in C# 12!

Please do not be shocked because I am going to dispute what most of you/us have done so far!.

{% embed https://youtu.be/5su7NDb9nqE %}

I am going to say: Interfaces are not necessary in C# anymore!.

Huh ?.

How dare you?!

Wait and see ...

If you look at the Solution that I have created, I have no interface at ALL, but it works fine!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0d2mp21gqxkmjfvysr83.jpeg)

You might want to dispute my idea and ask then how can you write the test?. We are supposed to be discounted from the real database, but be able to write tests, then how can you do that?. I will tell you, I am not going to use any Mocking framework as well! Then how ?.

The answer is using Interceptors which I am going to use and explain in the next article in detail.
Language but without compilation
Tags: lamg
Published: 2023-08-06 05:16:27

I Literally made a whole working programming language without parsing, tokenizing, lexing and compilation
But without that it took me 1.4 month to make the size is 500+ KB and lines of code are 8000+, [Download now on github](https://www.github.com/JavaCoder9721/ComputerTalk)