teleren/devto huggingface dataset:
Mastering Dark Mode in CSS and Sass
Published: 2023-01-21 08:22:20

Dark mode is a popular design trend that has gained a lot of attention in recent years. The idea behind dark mode is to provide a low-light interface that reduces eye strain and improves visibility in low-light environments. In this article, we will explore how to handle dark mode in CSS and Sass.

First, let's define some basic CSS variables that we will use to handle dark mode. We will use CSS variables to store the primary and secondary colors, as well as the text and background colors, for both light and dark mode.

```css
:root {
  --primary-color-light: #ff0000;
  --secondary-color-light: #00ff00;
  --text-color-light: #000000;
  --background-color-light: #ffffff;

  --primary-color-dark: #660000;
  --secondary-color-dark: #006600;
  --text-color-dark: #ffffff;
  --background-color-dark: #000000;
}
```

Next, we need to create a CSS class that will toggle between light and dark mode. We will use the `prefers-color-scheme` media query to check the user's preferred color scheme and apply the appropriate CSS variables.

```css
.dark-mode {
  --primary-color: var(--primary-color-dark);
  --secondary-color: var(--secondary-color-dark);
  --text-color: var(--text-color-dark);
  --background-color: var(--background-color-dark);
}

@media (prefers-color-scheme: dark) {
  body {
    color-scheme: dark;
  }
}
```

Now, we can use these CSS variables in our CSS and Sass files to handle dark mode. For example, we can use the `--primary-color` variable to set the background color of a button:
```css
.btn {
  background-color: var(--primary-color);
  color: var(--text-color);
}
```
In Sass, we can use the `lighten()` and `darken()` functions to create variations of the primary and secondary colors for different states, such as hover and active.

```css
.btn {
  background-color: var(--primary-color);
  color: var(--text-color);

  &:hover {
    background-color: darken(var(--primary-color), 10%);
  }

  &:active {
    background-color: lighten(var(--primary-color), 10%);
  }
}
```

In addition, we can also use the `@if` directive to create different styles for light and dark mode.

```css
@if light-mode {
  .btn {
    background-color: var(--primary-color-light);
    color: var(--text-color-light);
  }
} @else {
  .btn {
    background-color: var(--primary-color-dark);
    color: var(--text-color-dark);
  }
}
```

###Conclusion
Handling dark mode in CSS and Sass is a powerful way to create a visually appealing and accessible user interface.
Understanding the Event Loop in Javascript
Published: 2023-01-21 08:07:36

JavaScript is a single-threaded programming language, which means it can only process one task at a time. However, it can handle asynchronous code execution through the use of the event loop. In this article, we will explore the concept of the event loop and how it works in JavaScript.

The event loop is a mechanism that allows JavaScript to handle asynchronous code execution by continuously checking the message queue for new messages (also known as events) and executing them one by one. The event loop is implemented in the JavaScript runtime and runs continuously in the background.

One of the key features of the event loop is that it can handle multiple events at the same time, even though JavaScript is a single-threaded language. This is achieved by using a callback function, which is a function that is called after an event is completed.

Here is an example of how the event loop works in JavaScript:

```javascript
console.log("Start");
setTimeout(() => {
  console.log("Timeout");
}, 0);
console.log("End");
```

In this example, the event loop will first execute the first console.log statement, then it will add the setTimeout function to the message queue. The setTimeout function will wait for 0 seconds before it is executed, and the event loop will continue to execute the next console.log statement. After that, the setTimeout function will be executed and the "Timeout" message will be logged to the console. The output will be:
```
Start
End
Timeout
```
The event loop also plays a crucial role in handling promises and async/await in JavaScript. Here's an example of how the event loop works with promises:

```javascript
console.log("Start");
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise resolved");
  }, 1000);
});
promise.then((res) => console.log(res));
console.log("End");
```
In this example, the event loop will first execute the first console.log statement, then it will create a new promise and add it to the message queue. The promise will wait for 1 second before it is resolved, and the event loop will continue to execute the next console.log statement. After that, the promise is resolved and the "Promise resolved" message will be logged to the console. The output will be:

```
Start
End
Promise resolved
```

###Conclusion
The event loop is a fundamental concept in JavaScript that allows the language to handle asynchronous code execution. It continuously checks the message queue for new messages and executes them one by one, providing a way for JavaScript to handle multiple events simultaneously. Understanding how the event loop works is crucial for writing efficient and performant JavaScript code.
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2023-01-21 08:00:06

---
title: "Today's Daily Dose of Programming Humor"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12598468df3.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Who used the internet before it was cool?

___A:___ Httpsters
 -->
"CORS: The Cross-Domain Data Savior"
Published: 2023-01-21 07:53:43



## **What is CORS ?**

CORS stands for Cross-Origin Resource Sharing. It is a security feature implemented by web browsers that blocks web pages from making requests to a different domain than the one that served the web page.

When a browser receives a request for a resource from a web page, it checks the "origin" of the request against the "Access-Control-Allow-Origin" header in the response from the server. If the origin of the request is different from the value in the header, the browser will block the request and the resource will not be loaded.

CORS is used to protect web applications from malicious attacks by preventing unauthorized access to resources on the server. It allows web developers to specify which origin domains are allowed to make requests to their server, and which methods (GET, POST, etc.) and headers are allowed in those requests. By doing this, web developers can ensure that only trusted sites can access their resources, and they can prevent cross-site scripting (XSS) and other types of attacks.
Function to Efficiently Reverse Alternate K-length Chunks of a String In Javascript
Tags: webdev, javascript, programming
Published: 2023-01-21 07:50:14

In this article, we will be discussing a code snippet that demonstrates how to reverse alternate chunks of a string. The code defines a function called strRevChunk(str, k) that takes in two parameters: a string str and an integer k.


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

A “chunk” is defined as a substring of the original string, with a length of “k” characters. The loop starts at the first character of the string (index 0) and increments by “k” characters each time, so it will grab chunks of the string in the following order: 0-k, k-2k, 2k-3k, etc.

If the current index (i) of the loop is divisible by 2*k, the function takes the current chunk and reverses it using the .split(), .reverse(), and .join() methods. Otherwise, it simply assigns the current chunk to a variable “chunk1” without reversing it.

The reversed or non-reversed chunk is then added to the “chunkStr” variable, which is initially an empty string. Once the loop completes, the “chunkStr” variable will contain the modified version of the original string, with chunks reversed every other iteration. The function then returns the modified “chunkStr” variable.

`function strRevChunk(str, k) {
  let strLen = str.length
  let chunk1, chunk2
  let chunkStr = ""
  for (let i = 0; i < strLen; i += k) {
    if (i % (2*k) == 0) {
      chunk1 = str.substr(i, k).split('').reverse().join('')
    } else {
      chunk1 = str.substr(i, k)
    }
    chunkStr += chunk1
  }
  return chunkStr
}

let str1 = 'abcdefghijkl'
console.log(strRevChunk(str1, 2))`

The code block also contains an example of how the function is used, where str1 = ‘abcdefghijkl’ and k = 2. Here we can see the function is called with str1 and 2 as its arguments, and the function will return the modified string “badcefghijkl”

`let str1 = 'abcdefghijkl'
console.log(strRevChunk(str1, 2))
Output - badcefghijkl`
C++ O'rganamiz 2-dars
Tags: programming, tutorial, cpp, dawroun
Published: 2023-01-21 07:39:52

## Salom bugun biz C++ ni o'rganishni davom etamiz
 
https://replit.com/ saytidan foydalanamiz, 
bu darsda biz **Int** buyrugi, va kodlarada raqam ishlatishni o'rganamiz.

> Raqamlar

BIz raqamlarni qovuscha ichiga yozsak bo'ladi ammo ular matematik raqamlar deb hisoblanmaydi chunki "" ichiga faqat matn yoziladi va biz ularni qo'shib, ayrib, kopaytira olmaymiz qovusni ichiga nima yozilgan bo'lsa Console ga o'sha chiqadi shuning uchun biz raqamlarni "" tashqarisiga yozishimiz kerak, masalan

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3im7c1iubo2gt8mfvwq.png)
Korib turganingizdek birinchi qatordagi "77<<+<<10" Console ga huddi shundek chiqdi, ikkinchi qatordagi qovus tashqarisida yozilgan 77+10=87 bo'lib chiqti.

Ularni ayrsangiz, qo'shsangiz ham bo'ladi masalan 

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

Men 2023-2010 qilib yozdim Console ga esa mening Yoshim chiqdi
Endi yangi funksiya komentariy funksiyasiga o'tamiz siz kod yozayotkaningizda komentariy yozishingiz xam mumkin koment yozish uchun // yozasiz, misol


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

Komentni kompyuter qo'rmaydi va uni ignor qiladi hech narsa yoq deb hisoblaydi uni faqat odam qo'radi 

bir qatorni komentga olish uchun 
**//** agar ko'p qatorni olish kerak buld=sa boshida***/** va oxirida*/ 
Yana bit muhim funksiya bu o'zgaruvchilar bu odiyroq qilib chundirganada bu bir konteyner ular o'z ichiga malum bir turdagi va hajmdagi suvni, choyni,colani shunga o'xshash suyuqliklarni o'z ichiga oladi, uni ichiga bir turdagi fayl-malumot solsa bo'ladi mana ularning nomlari

```
// data_type name = value;
    // turi ismi = qiymat;

    /*  int => integer = butun sonlar uchun.
        float = kasr son saqlash uchun.
        string = matn/tekst saqlash uchun.
        char => character = faqat bitta belgi saqlash uchun.
*/
```
 Misol qilib chikamiz
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqcb907tcwb1fgofbatz.png)
Buyerda **int** o'zgaruvchisiga butun son yozilgan 
**string** o'zgaruvchisiga ism yozilgan 
biz avvalo tepada korsatilgandek o'zgaruvchilarimizni nomlab olishimiz kerak **int** o'zgaruvchisini **13** deb nomladik endi 13 emas yosh deb yozsak ham bo'ladi

```
#include <iostream>
using namespace std;

int main(){
int yosh = 13;
 string ism = "Davron";


    cout << "Salom men " << ism << "man" << endl;
    cout << "Men " <<  yosh << " daman";

    return 0;
}
```
Va javobi 

```
Salom men Davronman
Men 13 daman
```
Bo'ladi, o'zgaruvchilarni xohlagandek nomlasak bo'laveradi lekin 
bir xil bo'lishi kerak emmas va pastdagi qoydalarni buzishi kerak emas.

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

> Etibor uchun raxmat, salomt buling!
 @dawroun
Use Live Time/Date in the ReactJS
Tags: react, javascript, tutorial, functional
Published: 2023-01-21 07:37:05

- make the object of the Date() Method 

`const date = new Date();`

- use effect to display the live time

`useEffect(() => {
    setInterval(() => {
      setDateState(new Date());
    }, 1000);
  }, []);`

- give the some parameters in the return value 
 `
{dateState.toLocaleString("en-US", {
          hour: "numeric",
          minute: "numeric",
          second: "2-digit",
          hour12: true,
        })}
`
- Complete Code of Time/Date 

```
import React from "react";
import { useState, useEffect } from "react";

const ClockAPI = () => {
  const [dateState, setDateState] = useState(new Date());

  const t = new Date();
  const c = t.getHours() - 12;
  useEffect(() => {
    setInterval(() => {
      setDateState(new Date());
    }, 1000);
  }, []);

  return (
    <>
      <h1 className="mb-4 text-6xl font-extrabold tracking-tight leading-none  text-white-900 md:text-5xl lg:text-6xl dark:text-white">
        {dateState.toLocaleString("en-US", {
          hour: "numeric",
          minute: "numeric",
          second: "2-digit",
          hour12: true,
        })}
      </h1> 
     
    </>
  );
};

export default ClockAPI;

```
The Discord server rant
Tags: discofard
Published: 2023-01-21 07:36:08

ripped from my blog @ [neumatic.blog](https://neumatic.blog/articles/the-discord-rant?utm_source=dev.to)
## Discord

Discord is a popular chat and voice communication platform that is often used by gamers. One of the key features of Discord is the ability to create and join communities, which are referred to as "servers" by users of the platform as well as the platform itself.

[![](https://neumatic.blog/post-assets/the-discord-rant/b3600b5c-b73f-4a53-ba3c-b699185ffb7c.png)](https://neumatic.blog/post-assets/the-discord-rant/b3600b5c-b73f-4a53-ba3c-b699185ffb7c.png)

## Truth

Generally, a server is technically a computer or program that provides a service to other computers or programs, often over a network. In the context of Discord, a "server" is actually just a collection of users who have come together to communicate with each other, including channels, roles, and other metadata about the community. This misuse of the term "server" is not unique to Discord, as many other platforms and services also use it to refer to groups of users. However, the correct term to use for a group of users on a platform like Discord would be a community or group.

## Matrix

On the other hand, the use of the term "server" on Matrix is actually correct. Matrix is a decentralized program used to facilitate communication, and groups of users on the platform are organized into "homeservers". These servers are instances of Matrix that are hosted on individual machines, and they store all of the user information and host their community. Because Matrix is running on physical hardware, referring to these groups as "servers" is accurate.

## Serverless

In contrast, Discord uses Google cloud functions to process any actions taken on the platform. This means that Discord's code is running on a lot of machines spread across the world in Google's data centers. In this context, a "server" on Discord is simply a collection of people, channels, rules, and messages, rather than a single instance of a program running on physical hardware. Also, not that it means much, but Google's product is referred to as "serverless"

Overall, while the misuse of the term "server" on Discord is a minor issue, it is important to recognize that it is technically incorrect. In contrast, the use of the term "server" on Matrix is appropriate due to the nature of the program and its use of physical hardware. I'd also like to note something I found on just the homepage: both names for the same thing, but referenced in the same page (technically since it was in a tooltip)

[![](https://neumatic.blog/post-assets/the-discord-rant/8a10feab-7c3c-4428-9ea5-fe23539ea9c1.png)](https://neumatic.blog/post-assets/the-discord-rant/8a10feab-7c3c-4428-9ea5-fe23539ea9c1.png)
Protected Routes in React Router V6
Tags: webdev, react, javascript, security
Published: 2023-01-21 07:28:53

In React router, Private Routes commonly known as 'Protected Routes' are routes that requires a user being authorized to visit that route. Hence if a user is not authorized for a  page, they cannot access it.Authorization is far more than only authentication. For example, we can use it when we have roles and permissions in specific areas of the application.

In this article, I want to share with you that how to implement Protected Routes in React Router V6?

[Get Source Code](https://github.com/Mehrab-18/react-protected-routes)

**Prerequisites?** 
Make sure to install react-router and react-router-dom dependencies

**File Structure**

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

We have pages folder where we have all our components and a utils folder where we have a component with our authentication logic.

**index.js**


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

Start from wrapping your <App> component with <BrowserRouter> from react-router-dom

**App.js**


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

So, setting up our App.js we will have <Routes> component that will contain all of our Routes. Now to protect some routes we will write them inside another <Route> component ant this route will be our <ProtectedRoutes> component that will contain our logic 

**ProtectedRoutes.js**


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

This component will have a simple logic i.e. if user's authenticated direct it to the Child component that is our current route path and if a user isn't authenticated navigate it to our home page with path "/". Simple as that!

Hopefully, this article helped you understand implementing protected routes in react router v6. After completely understanding you'll be able to implement **Protected Routes** in your react app.

Let's Build Safer React Apps!
This week’s newsletter is out! (21-01-2023) - Browsers and Music and Vikings & War
Tags: javascript, tech, webdev
Published: 2023-01-21 07:07:06

---
title: This week’s newsletter is out! (21-01-2023) - Browsers and Music and Vikings & War
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

Browsers and Music and Vikings & War

https://markjgsmith.substack.com/p/mark-smiths-newsletter-21-01-2023

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
what is difficult about the programming language.?
Tags: react, python, webdev
Published: 2023-01-21 06:57:09

Programming can be challenging for a variety of reasons. Some of the difficulties that people may encounter when learning a programming language include:

Syntax: The specific rules and conventions of a programming language can be difficult to learn and remember, especially for beginners.

Debugging: Finding and fixing errors in code, known as bugs, can be time-consuming and frustrating.

Problem-solving: Translating real-world problems into a set of instructions that a computer can understand can be challenging.

Understanding the logic and flow of the program: To be able to write a good program, it's important to understand the logic behind it and how the different parts of the program interact with each other

Keeping up with new technologies: The field of programming is constantly evolving, so developers must stay up to date with new languages, frameworks, libraries and development tools.

Complex algorithms and data structures: Some problems require advanced knowledge of algorithms and data structures, which can be difficult to understand and implement.

Working in a team: Collaborating with other developers and coordinating a development process can be challenging, especially when working with people from different backgrounds and cultures.

Cultural and social aspects: Understanding the cultural and social implications of the software being developed and how it will be used can be challenging.
git merge vs git pull
Tags: git
Published: 2023-01-21 06:30:10

Over the years I have seen developers use two approaches to add code from one branch to another. For example, suppose you have two branches: "main" and "new-feature". You have been working on "new-feature" for a while and now you want to merge the changes you made into "main". To do this, developers generally use one of two ways:

1. Checkout the `main` branch and run `git merge new-feature`
2. Checkout the `main` branch and run `git pull origin new-feature` (This is the approach which is generally used when we create pull requests from the UI of various git hosting platforms (e.g. GitHub, GitLab, Bitbucket))

And I asked many people about this but no one seems to know the exact difference and they had just picked up one approach and been using it forever.

---

## Here's the difference -

`git merge` is used to merge a branch into the current branch, while `git pull` is used to fetch and merge changes from a remote repository into the current branch. In other words, `git pull` is a combination of `git fetch` and `git merge`. `git fetch` retrieves new commits from a remote repository, but does not merge them into the current branch. `git merge` is then used to integrate the changes from the remote branch into the local branch.
Integer and String(Python)
Published: 2023-01-21 06:29:13

#ornatilgam ma'lumotlar turlari 
#dasturlashda ma'lumot turlari muhim tushunchadir.
#ozgaruvchilar har hil turdagi ma'lumotlarni saqlashi munkin va har xil bajarish munkin.
#pyton dasturlash tilida quydagi malumot mavjud 

#text type - String 
#umeric tiypes - integer, float, complex
#sequnce types - list, tipe, range 
#mapping type - dict
#boolen tupe - booL 
#binary types - butes, butearriy, memoryview
#none type - Nonetype

#Misol uchun 
#x = "hello world" #-- #String 
#x = 20 -- int
#x = 20.5 -- float
#x = 1j -- complex
#x = ["aplle" "banan" "cherry"] -- list
#x = ("aplle" "banan" "cherry") -- tuple
#x = range(6) -- range
#x = {"Name", : "John","Age" : 36} -- dict
#x = {"Apple", " banana", "cherry"} -- set 
#x = frozenset({"apple", "banna", "cherry",})
#x = true 
# = b"hello" -- bytes 
#x = bytearray(5) -- bytearray 
#x = memoryview(bytes(5)) -- memoryview
#x = None -- nonetype 

# string mashq!
#x = "hello world"
#display x:
#print(x)

#display the data type of x:

#int ga mashq:
#print(type(x))

#int ga mashq!
#x = 20 
# = 25 
#c = x + y 
#z = c + x  
#e = z + c 


#display x: 
#print(e)

#display the data type of x: 
#print(type(e))

#float ga mash!
#x = 20.5 


#display x:
#print (x)


#display the type of x: 
#print 

#complex ga mashq!
#x = 1j

#dsplay x:
#print(x)

#display the of x:
#print(type(x))

#x = 9 + 8j 
#y = 10 + 4.5j
#print(type(x))
#print(type(y))
#print(type(z))

#print(type(x)
#print(type(y)
#print(type(z)


#list ga mashq!
#x = ["apple","banana","cherry"]

#display x:
#print(x[2])

#display the data of x: 
#print(type(x))

#my_list = ["jessa", "kelly", 20,35.75]
#print(my_list)
#print(type(my_list))




#type ga mashq!
#x = ("apple", "banana", "cherry")

#displaay x:
#print(x)

#displayga the data type of x: 
#print(type(x))

# my_tuple = (11, 24, 56, 88, 78)
# print(my_tuple[2:5])

# range ga mashq!
# x = range(6)

# display x: 
# print(x)

# display the data type of x:
#print(type(x))


#