teleren/devto huggingface dataset:
Using the new :has pseudo-class as a CSS parent selector
Tags: css, news, tutorial, webdev
Published: 2022-08-23 11:18:59

## Introduction

Modern browsers have started to [support](https://caniuse.com/css-has) the `:has` pseudo-class. Safari supports it since March 2022 and Chrome just released a new version in August 2022 that supports it. In Firefox it can used enabling the `layout.css.has-selector.enabled` flag.

The `:has()` pseudo-class selector can be used as a parent selector. It is very powerful because it accepts a relative selector list as an argument, therefore, possibilities are endless.

## Example

Let's see some examples of how the `:has` pseudo-class can be used. We have the following html structure:

```html
<div>
  <div>
    <img src="ocean.jpeg" />
    <p>Image description.</p>
  </div>
  <div>
    <img src="html.jpg" />
  </div>
</div>
```

We have two images, one with a description and one without.

First, we are going to select the `div` element that contains the image with a description. For this we can use the **child selector** `>` like this: `div:has(> p)`. For our example it is enough, but we could do something more specific like combining the child selector and the **adjacent sibling selector** `+` like this: `div:has(> img + p)`.

- `div:has(> p)` is going to select the div elements that contain a paragraph.
- `div:has(> img + p)` is going to select the div elements that contain an image and a paragraph.

We can use both for our example.

```css
div:has(> p) {
  border: 2px solid #000;
  border-radius: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
```

Now we are going to remove the margin of the image that has a description and we are going to give it some border radius.

```css
img:has(+ p) {
  margin: 0;
  border-radius: 5%;
}
```

Finally, we are going to give the image without a description some border radius. For this we are going to use the `:not()` pseudo-class.

- `img:not(:has(+ p))` is going to select the img elements that do not have a p element as an adjacent sibling.

```css
img:not(:has(+ p)) {
  border-radius: 50%;
}
```

---

This is the final result:

![Rendered HTML result.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zvvflv8tjjju0l2zf5o.png)
 

You can also see the HTML rendered at the bottom of [this page](https://www.jmalvarez.dev/posts/using-has-pseudo-class-as-parent-selector). Remember that only if you are using any of the browsers that already supports the `:has` pseudo-class you will see the result.

## Resources

- [Browser support](https://caniuse.com/css-has)
- [:has() documentation - mdn web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)
The Array Way to Swap Variable - js,py and etc. i think.
Tags: javascript, python, swap
Published: 2022-08-23 11:12:00

This will pretty much will work in any data types im assuming?

```javascript
let a = 'a1'
let b = 'b1'

a = [a,b]
b = a[0]
a = a[1]

console.log(a,b) // b1,a1
```

```python
a = 'a1'
b = 'b1'

a = [a,b]
b = a[0]
a = a[1]

print(a,b) # b1,a1
```
There are better ways like, destructuring, this is just an alternative
How to create a basic redux store? (Freecodecamp notes)
Tags: redux, webdev, beginners, programming
Published: 2022-08-23 10:52:00

Lets answer some basic questions 

**1) What is Redux?**
Redux is a state management framework that can be used with number of different technologies, including React. Note that Redux can be used with different technologies and not only React, it is just popular for being used with React.

**2) What is a Redux store?**
Redux store is the single source of truth when it comes to application state , if we had 3 components in an app and with 3 different states , the entire state of your app would be defined by a single state object housed in the Redux store. This also means that any time a piece of your app wants to update , it must do so through the redux store . This makes it easier to track the state of your app.

**3)  What are some important functions and keywords we will need to know before we create a redux store?**

- Redux store is an object which holds and manages application state
- createStore() on Redux object is used to create a store
- createStore takes in reducer function as a required argument
- We can use .

**4) Declare a variable and assign it to the createStore() method passing in the reducer as an argument**


{% gist https://gist.github.com/NaveenDK/afa1d18bb41d7227863f6479242f8715
  %}

5) How can we retrieve the state from a redux store?

{% gist  https://gist.github.com/NaveenDK/943fa9aee8bee0db3dee9740f0b7a7b2.js  %}

**Knowledge check**

1) What is Redux?
2) What is a Redux store?
3) What are some important functions and keywords we will need to know before we create a redux store?
4) How to declare a variable and assign it to the createStore() method passing in the reducer as an argument
5) How can we retrieve the state from a redux store?

NOTE: These are notes from FreeCodeCamp https://www.freecodecamp.org/learn/front-end-development-libraries/redux
Thanks to GPT3, now you can literally talk to your bookmarks on Telegram. Try now!
Tags: productivity, showdev, datascience, ai
Published: 2022-08-23 10:42:23

[BotMark](https://t.me/aquilanet_bot) is a Telegram bot for quick bookmarking & powerful search (works in groups as well).

![BotMark Telegram bot for quick bookmarking & powerful search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xemntixztgcxo0eamcht.png)

For Individuals:
When you find an interesting website/article on your mobile phone, press the share button and select "botmark"—nothing more, nothing less.

For Groups:
Add "botmark" to a group and keep track of all the links in your group in one place—easy peasy.

Try here: [BotMark Telegram link](https://t.me/aquilanet_bot)
RBAC in Angular and Hyperlambda components
Tags: webdev, programming, productivity
Published: 2022-08-23 10:40:10

[RBAC](https://en.wikipedia.org/wiki/Role-based_access_control) in [Angular](https://angular.io/) and [Hyperlambda](https://aista.com/hyperlambda/) components is easy to implement. However, as you do, you also dynamically build your Angular UI accordingly. What CRUD verb you've got access to, is actually dynamically determined by reading meta data from your endpoints. The meta data from your web API again, is used to inform the Angular frontend what UI elements it should show. If you for instance have a user that belongs to a role that does not have `delete` access to one of your CRUD entities, Magic does _not_ render the delete button. This allows you to have a UI that is dynamically built according to access level of individual users using your system.

This has tremendous value for you as a software developer, since you don't have to think about access control in your frontend. In addition, you can create new roles, and/or modify access control to Hyperlambda files, and the frontend will _dynamically change accordingly_. This idea is often referred to as _"RBAC"_, or _"Role Based Access Control"_, and is the way most sane software systems works, ranging from your Linux desktop, to Kubernetes and web APIs.

In the video below I am demonstrating how RBAC works with Hyperlambda and its generated Angular frontend. If you want to reproduce what I'm doing, you can [register a free cloudlet here](https://aista.com), and follow me hands on.

{% embed https://www.youtube.com/watch?v=-k5HNL5lDjo %}

Notice, Hyperlambda does not implement group policies. This was a conscious choice to simplify things. Hence there are only two levels of access control in Hyperlambda; Role, and what roles your users belongs to. Since Aista is in the business of simplicity, this makes things easier to understand. Group policies don't really add much as far as we're concerned. The main components in Hyperlambda helping you with RBAC is as follows.

1. Users - Users belongs to roles
2. Roles - Roles are associated with endpoints
3. Endpoints - Endpoints decides which roles can invoke them

This simple pattern gives you complete control over who are allowed to do what in your applications. You might for instance have an _"admin"_ role that is given more permissions than a _"normal"_ user role. This prevents unauthorised modifications and deletions of database records, and is the foundation for any secure HTTP web API.

* [Try out Hyperlambda here](https://aista.com) if you want to reproduce what I'm doing in the above video
Max Rotate Function
Tags: python, leetcode, problemsolving
Published: 2022-08-23 10:38:00


You are given an integer array nums of length n.

Assume arrk to be an array obtained by rotating nums by k positions clock-wise. We define the rotation function F on nums as follow:

F(k) = 0 * arrk[0] + 1 * arrk[1] + ... + (n - 1) * arrk[n - 1].
Return the maximum value of F(0), F(1), ..., F(n-1).

The test cases are generated so that the answer fits in a 32-bit integer


```py

class Solution(object):
    def maxRotateFunction(self, nums):
        """
        :type nums: List[int]
        :rtype: int
        """
        res = []
        n = len(nums)
        mx = 0

        def rotateFn(k):
            total = 0
            nonlocal nums
            nums =  nums[0:k % n-1] + nums[k+1 % n -1:]
            for i in range(n):
                total += nums[i] * i
                
            return total

        for i in range(n):
            mx = max(mx, rotateFn(i))
        return mx


```
What's Bit Manipulation?
Tags: programming, beginners, algorithms, tutorial
Published: 2022-08-23 10:24:17

Bit Manipulation- [https://450dsa.com/bit_manipulation](https://450dsa.com/bit_manipulation)

For X and Y such that 
X/2=Y

Example:  
### - 7/2=3
    7->111 (3)
    3->011 (2)
    
    
### - 12/2=6
    12->1100 (2)
    6->0110 (2)
    


If the X is **ODD**

It will have the least significant bit set. Hence dividing by 2, will be right shifting

If the X is **EVEN**

Its least significant bit will not be set hence dividing by 2 will have no effect on number of set bits as only 0 will be lost.

### So if the number if the X is ODD, 
number of set bits of X = 1 + Y

### But when X is even, 
number of set bits of X = Y
Launching Crawlee, the web scraping and browser automation library for Node.js
Tags: javascript, node, typescript, opensource
Published: 2022-08-23 10:15:52

Hello world,

Today, drawing on our team's  years of experience, we're launching [Crawlee](https://crawlee.dev), the the web scraping and browser automation library for Node.js that's built for fastest development and maximum reliability in production.

## Main features

🖼 Supports **headless browsers** with [Playwright](https://playwright.dev/) or [Puppeteer](https://developer.chrome.com/docs/puppeteer/)

⚡️ Supports **raw HTTP** crawling with [Cheerio](https://cheerio.js.org/) or [JSDOM](https://github.com/jsdom/jsdom)

🎛 Automated **parallelization and scaling** of crawlers for top performance

🐾 Avoids blocking using **smart sessions**, **proxies**, and **browser fingerprints**

🚎 Simple management and persistence of **queues of URLs** to crawl

🗜 Written completely in **TypeScript** for type safety and code autocompletion

📚 **Comprehensive documentation**, code examples, and tutorials

💪🏼 Actively **maintained** and developed by [Apify](https://apify.com)—we use it ourselves!

## Getting started

Visit [crawlee.dev](http://crawlee.dev) or run the following command:

```
npx crawlee create my-crawler
```

## Liked Crawlee?

💛 You can support the project on [GitHub](https://github.com/apify/crawlee), [Product Hunt](https://www.producthunt.com/search?q=crawlee), or [Hacker News](https://news.ycombinator.com/show)
Solar irradiance: disease prevention - sustainable mobility
Tags: aws, devpost, asdi, hackathon
Published: 2022-08-23 10:04:07

Solar irradiance has important effects on the human body. Detecting a change in patterns can serve to prepare public administrations in disease prevention, mobility hour flow regulations and more. 

Being able to predict solar irradiation patterns in certain areas can allow the application of appropriate public measures and stimulate the participation of private initiative. 

For the assumption of this example, a mere sample demonstration from Belgium has been taken, but said analysis and system could be scaled and applied to any place in the world and with great granularity. 

NOTE: For the purposes of this project, it should be understood that this is simply a demonstration development carried out for the sole purpose of this competition and that although the system is operational, obviously the set of data with which it has been fed is simply in an incipient state of preparation. 

Source: Royal Observatori of Belgium (inspired by NREL National Solar Radiation Database  ASDI: https://aws.amazon.com/marketplace/pp/prodview-wa3anotrw3rve?sr=0-1&ref_=beagle&applicationId=AWSMPContessa) 

Link to the video of the project: https://youtu.be/IFgthPnCMW4 

Project in DevPost: https://devpost.com/software/solar-irradiance-disease-prevention-sustainable-mobility
Javascript Tagalog - String trimStart Method
Tags: javascript, tagalog, pinoy, trimstart
Published: 2022-08-23 09:55:00


**Ano ngaba ang trimStart method sa Javascript?**
Yung trimStart method ay aalisin niyalang yung mga spaces sa unahan ng string. ganon lang.

Spaces like '\n' and '\t' included sila sa trimming btw

**Pano gamitin:**

```javascript
const x = "    hello    ";
console.log( x.length ) // 

//Return Value
console.log( x.trimStart() ) // hello     
console.log( x.trimStart().length ) // 9

```
bumaba yung length ng na trim, kasi nga nawala yung mga spaces sa unahan :) ehehe.
```javascript
// Di naapektuhan yung original string
console.log( x ) //      hello    
console.log( x.length ) // 13
```
---
**More tagalog Javascript Learning Resources:**
https://javascript-methods-in-tagalog.vercel.app/
Javascript Tagalog - String trimEnd Method
Tags: javascript, tagalog, pinoy, trimend
Published: 2022-08-23 09:52:00

**Ano ngaba ang trimEnd method sa Javascript?**
Yung trimEnd method ay aalisin niyalang yung mga spaces sa end ng string. ganon lang.

Spaces like '\n' and '\t' included sila sa trimming btw

**Pano gamitin:**

```javascript
const x = "    hello    "
console.log( x.length ) // 13

//Return Value
console.log( x.trimEnd() ) //    hello
console.log( x.trimEnd().length ) // 9

```
bumaba yung length ng na trim, kasi nga nawala yung mga spaces sa hulihan :) ehehe.
```javascript
// Di naapektuhan yung original string
console.log( x ) //     hello    
console.log( x.length ) // 13
```
---

**More tagalog Javascript Learning Resources:**
https://javascript-methods-in-tagalog.vercel.app/
Javascript Tagalog - String trim Method
Tags: javascript, tagalog, filipino, trim
Published: 2022-08-23 09:49:01


**Ano ngaba ang trim method sa Javascript?**
Yung trim method ay aalisin niyalang yung mga spaces sa starting and end ng string. ganon lang.

Spaces like '\n' and '\t' included sila sa trimming btw

**Pano gamitin:**

```javascript
const x = "    hello    "
console.log( x.length ) // 13

//Return value
console.log( x.trim()  ) // hello
console.log( x.trim().length  ) // 5

```
bumaba yung length ng na trim, kasi nga nawala spaces :) ehehe.
```javascript
// Di naapektuhan yung original string
console.log( x ) //     hello    
console.log( x.length ) // 13
```
---

**More tagalog Javascript Learning Resources:**
https://javascript-methods-in-tagalog.vercel.app/
3 Astounding Cloud IDEs
Tags: ide, programming, productivity, linux
Published: 2022-08-16 19:46:09

Welcome to yet another blog. Today I am going to tell you about some cloud IDEs which will definitely help you in a great way in your development journey. So without further ado, let's begin.

## 1. Repl.it 
![Replit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bab8squmihkw97naywfy.png)
 
This is my favourite cloud IDE. Since I use 9 years old laptop, it's sometime difficult to do hectic tasks like web automation, machine learning, web development etc. Even in its free plan, it offers a lot. Also you can avail the benefits of Hacker plan for 6 months if you are a student and you have activated Github Education Plan. You can also do fun experiments on it. I did web automation, used VS code on it, used it as a domain, etc.


## 2. Github Codespaces / Gitpod
![Codespaces](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ur6k1z12zh5qwtygswf9.png)
 
In last few months, I have been availing the free codespaces given by github. These are awesome for those don't have high end personal computers. Github gives unlimited 8 GB and 4 cores PCs for development. Gitpod also provide same service and in its free plan gives 50 hours of usage.

## 3. Codepen
Before you tell, let me make it very clear that yes, I do know that it is not an ide but still it is a tool which I use very often to create projects so it deserves to be in the list. The ease it provides in creating simple HTML, CSS and Javascript project is amazing.

So these are the IDEs which I use on cloud. I hope you liked it. 
Let's me catch you up in the next blog. Till then keep learning.
Signing off,
This is VAIB
NFT Marina on Product Hunt
Tags: product, productivity, html
Published: 2022-08-23 09:49:00

**Kia Ora,**
Are you searching for an NFT & Crypto landing page that perfectly aligns with your needs and is simple yet intuitive? Then “Our NFT Crypto Page” is the right suit for you.

We've prepared 2 distinct landing pages for you right here. Any homepage can be used to effortlessly adorn your designs. You must get in touch with us if you experience any issues using our landing page.

---

All current coding standards, including HTML5, CSS3, and Bootstrap 5, are used on our landing page.

Yay! it's launched on [Product Hunt](https://www.producthunt.com/posts/nft-landing-page-bootstrap-5)!

## Your Thumbs up would make my day

[](https://www.producthunt.com/posts/nft-landing-page-bootstrap-5)
Binary Search
Tags: binarysearch, algorithms, searching, javascript
Published: 2022-08-23 09:46:00

Binary Search is a search algorithm used in a sorted array. It can be implemented in two ways which are iterative or recursive methods.

### Javascript iterative method

```javascript 
function binarySearchIterative(arr, x, l, h) {
  while (l <= h) {
    mid = Math.floor((l + h) / 2);

    if (arr[mid] === x) {
      return mid;
    } else {
      if (arr[mid] > x) {
        h = mid - 1;
      } else {
        l = mid + 1;
      }
    }
  }

  return -1;
}
```

### Javascript recursive method

```javascript 
function binarySearchRecursive(arr, x, l, h) {
  if (l <= h) {
    mid = Math.floor((l + h) / 2);

    if (arr[mid] === x) {
      return mid;
    } else {
      if (arr[mid] > x) {
        return binarySearchRecursive(arr, x, l, mid - 1);
      } else {
        return binarySearchRecursive(arr, x, mid + 1, h);
      }
    }
  }

  return -1;
}
```

### Explanation 
The binarySearch function receives four parameters: the array, the value we are looking for `x`, and the array's first `low` and last position `high`.

We will traverse the array while `low` is less or equal to `high` because they are supposed to be at the two extremities, if `low` is greater than `high` we assume that we have already traversed the part of the array that is interesting and if we don’t find the value we return -1.

To avoid traversing the entire array since it is already sorted, the binary search algorithm calculates the middle of the array and checks if the value that is in the middle is equal to `x`, if so we return the position. if it isn’t we check which part of the array is worth looking at by calculating if the value in the middle is greater or less than `x`.

if the middle value is greater than `x`, the case before it becomes the new `high`, and if it is less than `x` the case just after it becomes the new `low`. That means the interval will be reduced until we find `x`. If `x` isn’t in the array we return -1 because at one moment `low` will be greater than `high` and the traversal will be stopped.

### Illustration
The value we are looking for is 4.


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

Firstly we calculate the middle of the array which is 3. array[3] is 6 which is less than 4 the value we are looking for, so we reduce the interval the case before 3 becomes the new high.


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

In the second pass in the loop, we calculate again the middle which is equal to 2. array[2] is to 4, which means we found our x and then return 2.

### Complexity analysis 
Since we will never traverse the entire array, the binary search algorithm has a time complexity of **O(log n)** and because we don’t use any extra space the space complexity is **O(1)**.

### Conclusion 

We are at the end of our post, we can summarize that binary search is an algorithm that can help to find a value in a sorted array with a time complexity of O(log n), I hope that you learn something new by reading this article.
What is Linux ?
Tags: linux, beginners, bash, tutorial
Published: 2022-08-16 15:07:51

Linux is an open source operating system. An operating system is the software that directly manages a system’s hardware and resources, like CPU, memory, and storage. The OS used as a medium in between applications and hardware and makes the connections between all of your software and the physical resources that do the work.


**How does Linux work?**

Linux was designed to be similar to UNIX, but has evolved to run on a wide variety of hardware from phones to supercomputers. Every Linux-based OS involves the Linux kernel—which manages hardware resources—and a set of software packages that make up the rest of the operating system.

The OS includes some common core components, like the GNU tools, among others. These tools give the user a way to manage the resources provided by the kernel, install additional software, configure performance and security settings, and more. All of these tools bundled together make up the functional operating system. Because Linux is an open source OS, combinations of software can vary between Linux distributions.

**What is a command line?**
The command line is your direct access to a computer. It's where you ask software to perform hardware actions that point-and-click graphical user interfaces (GUIs) simply can't ask. 

Command lines are available on many operating systems—proprietary or open source. But it’s usually associated with Linux, because both command lines and open source software, together, give users unrestricted access to their computer.

**Linux and Opensource**
Linux is a free, open source operating system, released under the GNU General Public License (GPL). Anyone can run, study, modify, and redistribute the source code, or even sell copies of their modified code, as long as they do so under the same license.

Linux has become the largest open sources software project in the world. Professional and hobbyist programmers and developers from around the world contribute to the Linux kernel, adding features, finding and fixing bugs and security flaws, live patching, and providing new ideas—all while sharing their contributions back to the community.