teleren/devto huggingface dataset:
Shorten Your CSS Selectors With The :is Pseudo-Class
Tags: css, performance
Published: 2021-09-10 06:41:27

One CSS feature I wish I knew about long before I discovered it is the `:is` [pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes).

You can use it to shorten some of your longer selectors.

For example, consider the following declaration block:

```css
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    /* some styles would go here */
}
```

Seems a bit repetitive, right?

Now, here's how our code would expand if we wanted to add a class to each `<a>` tag:

```css
h1 a.class, h2 a.class, h3 a.class, h4 a.class, h5 a.class, h5 a.class {
    /* some styles would go here */
}
```

We'd have to re-type "`.class`" *six times*.

And this is just one small example of how the `:is` selector can save you some keystrokes:

```css
:is(h1, h2, h3, h4, h5, h6) a {
    /* some styles would go here */
}
```

In this case, if we wanted to add that same class from earlier, we'd just have to type it once, instead of six times:

```css
:is(h1, h2, h3, h4, h5, h6) a.class {
    /* some styles would go here */
}
```

So basically, all it does is iterate over each comma-separated internal selector and apply it to the sibling or child selector.

## Performance implications

One important thing to remember about CSS is that subtle differences in selector syntax can carry exponential impact on performance.

For example, "`div > p`" is far less performant than "`div p`", because browers interpret selectors from right to left. While this is something I might write about more in the future, it's beyond the scope of this post.

So as far as the `:is` selector goes, I just want to note that pseudo-classes (including `:is`) are the [*most* inefficient selector type](https://csswizardry.com/2011/09/writing-efficient-css-selectors/).

Also, the [browser compatibility](https://caniuse.com/?search=%3Ais) could be improved. I'd strongly suggest looking into some backwards-compatible pseudo-classes with the same functionality, such as "`:matches()`".

## Conclusion

I hope you enjoyed this article, and I hope it saves you some time in the future!

Besides, who wants to sit around and rewrite each selector six times every time there's a small change?
This is my first blog!
Tags: opensource, beginners, webdev
Published: 2021-09-10 06:34:56

Hello everyone, my name is Thanh Cong Van, my friends usually call me Steven as my Vietnamese name is hard to pronounce. I am living in Toronto, due to the pandemic, I believe that some of my peers are living in different place right now.
I am currently taking Computer Programming and Analysis at Seneca, all I want from my program is to have good skills on front-end development. People tend to love full stack development, however, I just want to focus on front-end since I found that is the one interested me the most. The reason why I pick OSD600 in this semester is because I have never worked on real big projects, and also I have never worked with a bunch of people. By taking this course, I strongly believe that I could improve my technical skills as well as communication skills.
Personally, I really want to contribute to work on influential brands' online store such as Nike, Adidas because they will need lots of improvement for their web designs.
I did a couple of researches about trending repo of this week, and the one that interested me the most is [30-seconds-of-code](https://github.com/30-seconds/30-seconds-of-code). It is basically about short **Javascript** code snippets for development needs. By using this, we do not need to think about writing a bunch of lines to create just only one function. This will make things become way easier than it used to be.
Data Modelling & Apps in Salesforce
Tags: database, codenewbie, cloud
Published: 2021-09-10 06:30:52

**NOTE -** If you are completely new to CRM & Salesforce, I recommend you check out the previous articles of this Salesforce Admin Series.

I have already talked about Database tables and Salesforce Objects in my previous articles of this series. What I missed was to tell you about the concept of Data Modelling in Salesforce.

#Data Modelling 
Data Modelling is the term given to the feature of Salesforce where data is structured with the help of database tables, objects, various applications and methods. As we have talked about the first two, in this article I'll talk about Apps in Salesforce.

#Apps in Salesforce
If I am to speak in the simplest words, an application is like a container of all the objects, functions, and records in Salesforce. Under one Salesforce App, there are several tabs that serve their own purpose.
Remember that Salesforce is a CRM platform and it provides companies & businesses with pre-defined apps, objects to manage their customer relations.

####Let me give you an example - 
There is a Sales App pre-configured in salesforce and is ready to use for anyone. When you open the sales app, you'll see a number of tabs. From Accounts, Contacts to Opportunity & Chatter tabs. You'll get everything. All these tabs collectively form a Sales management system.

You can follow along - 
1. Log in to your salesforce org. On the home screen, you'll see a nine-dots button below the salesforce logo. Click on it.
2. Type Sales in the appearing search box and click on the result Sales.
![sales app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ti49d1x3z3zldjkri34c.png)
3. Look at the image below. This is the sales app of salesforce. You see all sorts of tabs to run a sales system of any business. 
![tabs sales](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkr5emj0eob4u0yz1krh.png)

From managing customers and products to preparing deals and opportunities, Sales app covers it all. Each task has separate task. However, we can bind any two tabs and objects with Salesforce Relationships (already talked about in previous article).

#Types of Apps in Salesforce
There are two types of apps in SFDC - 
**1. Standard apps** - Standard apps are pre-defined & pre-configured in a salesforce org. It includes App Launcher, Sales, Marketing, nd every available app. However, you can customize these according to your requirements.
**2. Custom apps** - The apps are built separately from scratch to meet certain requirements are the custom apps. You can define your own set of tabs, logo, and features in a custom app.

There is one more term used for apps in salesforce - 
**Console Apps -** Salesforce gives you the functionality to design and develop custom UI experiences. Mostly configured for fast-paced managements and service consoles.
These apps are called Console Apps in Salesforce.
HTML tags | p
Tags: html, tags, p
Published: 2021-09-10 06:27:09

It is used to **represent a paragraph**. It is normally represented visually as text blocks separated from adjacent blocks by blank lines, but `<p>` **can also serve to structurally group related content**, such as images or form fields.

They are block elements, and they are closed automatically if another block element is opened before adding the closing tag `</p>`. However, **the safest thing is to always close them** and thus avoid possible unwanted behavior if the HTML behind it is modified later.

**Using paragraphs in the content makes the page more accessible** since assistive technologies allow you to jump from one to another, just as you do by reading visually.

However, **using empty** `<p>` **to add extra space can be problematic** for those same users as screen readers will announce the paragraph but without content, which can be confusing and frustrating. To achieve this effect of extra space, you have to use the CSS `margin` property.

- Type: *block*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) | [Support](https://caniuse.com/mdn-html_elements_p)
Router.back() won't work in incognito mode or when link comes from different source..!!
Tags: nextjs, route, history
Published: 2021-09-10 06:24:48

Hi, i am using nextjs as react framework for my ecommerce website. My product detail page have an custom back button which is having Router.back() function. This works normal when browsing back and forth in website. But whenever i copy the product detail link and open directly in incognito mode the custom back button won't work...!!


Anyone have solution for this ?
TypeScript - Build Types from Interfaces
Tags: typescript, javascript, interfaces
Published: 2021-09-10 05:51:09

We definitely need to be more vigilant when creating interfaces and types in TypeScript. If we define loosely typed interface then it is no different from **any**.

for example:
```javascript
interface Folder {
   id?: string;
   name: string;
   description: string;
   isMarkedFavorite?: boolean;
}
```

With the above interface, we can create 4 different interfaces:
1. name, description
2. name, description, id
3. name, description, isMarkedFavorite
4. name, description, id, isMarkedFavorite

These kind of scenarios often come when we use an interface for **Payload** and **Response** of an API. For example:
1. Create folder would need only 2 properties: name and description
2. Once the folder is created, you would get id of the folder and also user's preferences like if the user has marked the folder as favorite or not

Typically for Payload and Response, the developer would typically use the same interface. Instead, we can use TypeScript's Pick and Omit utils to create new interfaces.

```javascript
interface BaseFolder {
   id: string;
   name: string;
   description: string;
   isMarkedFavorite: boolean;
}

type FolderPayloadV1 = Omit<BaseFolder, "id" | "isMarkedFavorite">;
type FolderPayloadV2 = Pick<BaseFolder, "name" | "description">;
```

You can also use **Partial<BaseFolder>** to make all the properties of BaseFolder optional.

```javascript
interface BaseFolder {
   id: string;
   name: string;
   description: string;
   isMarkedFavorite: boolean;
}

type FolderPayloadV3 = Partial<BaseFolder>

// Equivalent would be
{
   id?: string;
   name?: string;
   description?: string;
   isMarkedFavorite?: boolean;
}
```

As a developer, if we put enough time in designing interfaces then it shapes our development pattern as well. Type in TypeScript allows us to mitigate development bugs in many unseen ways. Like if the developers knew that the API is expected to return 4 properties and out of the for properties one of the property is expected to come from another API source, hence the developer can avoid unwanted bugs.

Happy Coding!

I run a small YouTube channel named **EverydayJavaScript**. My target is to reach 10000 subscribers by end of year. Please subscribe my channel.
Subscribe: [https://www.youtube.com/EverydayJavaScript](https://www.youtube.com/EverydayJavaScript)
RxJS - Operators
Tags: javascript, typescript, rxjs
Published: 2021-09-10 04:53:36

Hi Guys and welcome back, today I introduce the concepts of **Operators**.
Operators are functions. Isn't it easy? Operators are functions of two types in RxJS: _Creation_ or _Pipeable_.

## Creation
Creation operators are simple functions and their scope is to create new observables.

```ts
import { of } from "rxjs";

of(1, 2, 3, 4).subscribe(x => console.log("[of] result", x));
```

```console
[of] result 1
[of] result 2
[of] result 3
[of] result 4
```
The most commons creation operators are: ajax, empty, from, fromEvent, interval, of, throwError, timer, combineLatest, concat, forkJoin, merge and zip.

In the next article I'll deepen these types of operators, today I just make an overview of the operator's types.

## Pipeable
Pipeable operators are functions that take an Observable as input and return another observable. These functions are pure, so the input observable does not change but the function returns a new one. The main scopes of these operators are: transform, filter, and work with the input observable.
An example of pipeable operators:
```ts
import { Observable } from "rxjs";
import { map, tap } from "rxjs/operators";

new Observable<number>(observer => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.next(4);

  observer.complete();
})
  .pipe(
    map(val => val * 2),
    tap(res => {
      console.log("[pipeable tap]", res);
    })
  )
  .subscribe();
```
```
[pipeable tap] 2
[pipeable tap] 4
[pipeable tap] 6
[pipeable tap] 8
```
The pipeable operators are divided by scopes and the scopes are: Transformation, Filtering, Join, Multicasting, Error Handling, Utility, Conditional and Boolean and Mathematical and Aggregate.

As you can understand you can combine Creation operators with Pipeable operators to manage your business logic like here

```ts
import { timer } from "rxjs";
import { take } from "rxjs/operators";

timer(0, 1000)
  .pipe(take(10))
  .subscribe(x => console.log("[timer] result", x));
```
```
[timer] result 0
[timer] result 1
[timer] result 2
[timer] result 3
[timer] result 4
[timer] result 5
[timer] result 6
[timer] result 7
[timer] result 8
[timer] result 9
```

With this last article, I have introduced all the pillars to the base of the RxJS library and the Reactive Programming. In the next article, we'll start to explore the operator's world.

That's all guys,
See you soon!

_[Here](https://github.com/Puppo/rxjs-getting-started/tree/03-operators) you can find the code of this article._
Stepping out of my comfort zone !
Tags: opensource
Published: 2021-09-10 04:37:45

First of all, my name is Thien Phuoc Mai or you guys can call me James. I'm now taking my last year of the CPA program at Seneca College. I love to play basketball and League of Legend during my free time. The reason why I'm taking this course is I got inspired by the professor who teaching this course. Back then a friend send me a Youtube video of this prof teaching Web422 and I was inspired right away with all his knowledge and his teaching method. Everything I have learned in those videos are realistic to what happen out there in the real world. For me, joining this course is a win-win situation where I have a chance to learn new and realistic skill that will help me joining the workforce and also have a chance to step out of my comfort zone and learn the "unknown" by myself. I really hate vague and ambiguity when learning something new so by taking this course I hope to push myself to become a better IT guy than I was before. Right now because of the flight ticket being too expensive to fly back home (5,000 CAD for 1 way ticket) I got stuck in Toronto but I hope I will be able to fly back and visit my family soon. 

I did not have a clear view of what kind of projects I want to be involve on this semester due to moving and working most of the time. I'm kind of interesting in contribute to Uber code and help them to fix some of the bug (  Hopefully). I used to be an Uber driver and I love how their get the business to be the way they are doing now.

So I find out the 30 second of code projects where you can apply saved snippet for you own use. They are ton of snippet on their website including: number formation, applying algorithm,etc,.. . I pick it cause I'm a lazy person :)) and the other reason would be I believe we should trey to learn and solve new problem and shorten our time by using these snippets

Thank you for reading this and hope in my next post I have leveled up my coding game ! See y'all !
I wrote a RabbitMQ executor service in Java.
Published: 2021-09-10 04:23:58

---
title: I wrote a RabbitMQ executor service in Java.
published: true
description: I show off an open-source project I started writing a RabbitMQ executor in Java. This little tool is something you can deploy on a machine in order to execute workloads from a RabbitMQ queue. The executor will run the commands defined by a file and return the result to another queue.
tags:
cover_image: https://i.ytimg.com/vi/WDZ5jTkQ_5s/maxresdefault.jpg
---

{% youtube WDZ5jTkQ_5s %}

I show off an open-source project I started writing a RabbitMQ executor in Java. This little tool is something you can deploy on a machine in order to execute workloads from a RabbitMQ queue. The executor will run the commands defined by a file and return the result to another queue.
CREATE, MANAGE & GROW WITH CODECAST
Published: 2021-09-10 04:21:16

 💥⚠️ There’s a better way to create, manage, and grow your private online community ⚠️💥

If you've ever thought about taking your developer skills to the next level and monetizing your work, here's what you need to know !!🚨🚨🚨

CodeCast is built upon providing programmers and developers with a place to flourish. This means you can begin creating projects, sharing your work, hosting workshops, building your community & start monetizing your skills.

Rather than trying to attract viewers, build a community of passionate people who WANT to engage with your code!

Click Here to Find Out More & Get Started
https://www.codecast.io/
Anyone familiar with this scripted pdf transformation tool?
Tags: print, pdf, json, help
Published: 2021-09-10 04:20:18

---
title: Anyone familiar with this scripted pdf transformation tool?
published: true
description: My guess is that its rotating two objects in preparation for print. If anyone is familiar with the program behind this please let me know! Thank you
tags: print, pdf, json, help 
//cover_image: https://direct_url_to_image.jpg
---
My guess is that its rotating two objects in preparation for print. If anyone is familiar with the program behind this please let me know! Thank you
```
{
  "Unit": "Millimeters",
  "Pages": [
    {
      "PageNumber": 1,
      "Width": 400,
      "Height": 100,
      "Instructions": [
        {
          "Type": "DrawPdfPlaceholder",
          "Name": "AmendmentA",
          "PageNumber": 1,
          "Position": {
            "X": 200,
            "Y": 50
          }
        },
        {
          "Type": "PushState"
        },
        {
          "Type": "RotateTransform",
          "CenterX": 90,
          "CenterY": 50,
          "Angle": 90
        },
        {
          "Type": "DrawPdfPlaceholder",
          "Name": "PrepressOutput",
          "PageNumber": 1,
          "Position": {
            "X": 90,
            "Y": 50
          }
        },
        {
          "Type": "PopState"
        },
        {
          "Type": "PushState"
        },
        {
          "Type": "RotateTransform",
          "CenterX": 310,
          "CenterY": 50,
          "Angle": 270
        },
        {
          "Type": "DrawPdfPlaceholder",
          "Name": "Prepress",
          "PageNumber": 2,
          "Position": {
            "X": 310,
            "Y": 50
          }
        },
        {
          "Type": "PopState"
        }
      ]
    }
  ]
}
```
Azure Devops Pipelines — Could not get lock /var/lib/dpkg/lock-frontend
Tags: azuredevops, terraform, azuredevopspipeline, azure
Published: 2024-06-18 08:23:14

---
title: Azure Devops Pipelines — Could not get lock /var/lib/dpkg/lock-frontend
published: true
date: 2021-09-10 04:11:10 UTC
tags: azuredevops,terraform,azuredevopspipeline,azure
canonical_url: https://andyr8939.medium.com/azure-devops-pipelines-could-not-get-lock-var-lib-dpkg-lock-frontend-b388981dbe0a
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylnfchbz38jxtd40xlql.jpg
---

### Azure Devops Pipelines — Could not get lock /var/lib/dpkg/lock-frontend

I’ve been using Azure DevOps Pipelines to build our Azure Infrastructure with Terraform for nearly 9 months now and its been pretty much rock solid. However, recently all of a sudden my pipelines started failing if I ran more than 1 build at a time, and all gave this error.

```
E: Could not get lock /var/lib/dpkg/lock-frontend - open (11: Resource temporarily unavailable) 
E: Unable to acquire the dpkg frontend lock (/var/lib/dpkg/lock-frontend), is another process using it?
```

![](https://cdn-images-1.medium.com/max/1024/0*CWDDcSZHw3AVcyhi.png)

This was happening at the part of the pipeline where I install some dependencies I need on the ubuntu agent, mainly _jq, unzip, zip_ etc. It was only happening when I ran multiple pipelines at once, so my self hosted VM Scale Sets agents ramped up. If it was a single deployment it was fine.

Seeing your pipelines do this when you are under the pump to deliver a lot of changes is frustrating.

![](https://cdn-images-1.medium.com/max/854/0*qHz0Wci6467mfdUR.png)

### Solution

It turned out to be fairly simple. When the VM Scale Set Instance was starting, something which I think was the Azure DevOps Extension, was using apt-get to get updates, which meant my dependency section couldn’t run apt-get due to the lock and crashed out.

To fix it I added in a wait loop to my dependencies section in the pipeline with the below.

```
_# Install dependencies in the agent pool server_

- task: Bash@3

inputs:

targetType: 'inline'

script: |

until sudo apt-get -y update && sudo apt-get install unzip zip jq -y

do

echo "Try again"

sleep 2

done

displayName: 'Install Dependencies'
```

All that is doing is trying to get the packages with apt-get, and if it can’t do it because of the lock, wait 2 seconds and try again until it can. Simple, but very effective.

So now instead of my dependency check crashing out in <1s if there was a lock, it typically hits a lock for 10 seconds or so, then completes fine and I have had 100% pipeline success since.

Hope that helps!

Andy

_Originally published at_ [_https://www.andyroberts.nz_](https://www.andyroberts.nz/posts/azure-devops-lock/) _on September 10, 2021._
quote in ssh bash -c 
Tags: linux, ssh, troubleshoooting
Published: 2021-09-10 03:42:47

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9l1dbck82lr6hjmxonj.png)
 
```
    cmd="find $volumePath/data -maxdepth 1 -type f -name 'GRA_*.log' -print0 | xargs -0 -n 100 rm -v"
    # 双引号中bash子命令需要使用 `\"` 引用，否则会报错 "xargs argument line too long"
    ssh -p $sshPort $hostIP -- "bash -c \"$cmd\""
```

<https://serverfault.com/q/953087/576644>