teleren/devto huggingface dataset:
Future CSS: A first look at when and else statements
Tags: css, webdev, news, tutorial
Published: 2022-04-19 11:55:21

In CSS, we make selections of different devices by using media queries. Media queries give us an easy way to select a devices based on numerous conditions, such as screen size, pixel density, or even format: i.e. print or screen. 

This has progressively gotten more complicated over time, and now we are often balancing many conditions that sometimes conflict with each other. 

**The new [CSS Conditional Rules 5 Specification](https://www.w3.org/TR/css-conditional-5/)** tries to resolve this problem, by introducing two new ways to do media queries - `@when` and `@else`. These will finally allow us to create conditional statements directly in vanilla CSS. **Let's take a look at how it works!**

## @when/@else support
Currently, no browsers natively support `@when`/`@else`, however that is likely to change soon. Full support for `@when`/`@else` is shown below.

![Support for @when and @else in CSS](https://caniuse.bitsofco.de/image/css-when-else.png)

## Using @when/@else in CSS
Let's suppose we have one set of rules which we want to apply to screen sizes less than 780px wide which supports `display: flex`, and another which should apply to anything apart from that. Previously, we would have to use `@media` queries to select for both of those things separately. This became a little bit messy when selecting for multiple different things. With `@when` and `@else` it looks like this:

```css
@when screen and (max-width: 780px) and supports(display: flex) {
    .my-element {
        color: red;
        display: flex;
    }
}
@else {
    .my-element {
        display: block;
    }
}
```

We can also chain multiple conditions. For example, let's say we have **three** scenarios: screens with a max width of 780px that support `display: flex`, screens larger that support `display: flex`, and everything else. In that case, we can have multiple conditions:
```css
@when screen and (max-width: 780px) and supports(display: flex) {
    .my-element {
        color: red;
        display: flex;
    }
}
@else screen and supports(display: flex) {
    .my-element {
        display: flex;
    }
}
@else {
    .my-element {
        display: block;
    }
}
```

As you'd expect, we can have even more `@else` statements, but the above gives you an idea of how useful both `@when` and `@else` will become when implemented in CSS.

## Conclusion 
Conditional statements have never been in vanilla CSS, so it's great to finally see them coming soon. It's also going to greatly simplify how we make media queries. We already have logic in CSS if we use third party packages like SASS, but when it comes natively to CSS, we can avoid the need to use a pre-processor or build with this addition.
.Net - Scoped, transient e singleton
Tags: dotnet, csharp
Published: 2022-04-19 11:39:02

Vejo bastante gente com dificuldade em entender a diferença entre os principais tipos de lifecycle quando falamos sobre injeção de dependência em .net. Criei um exemplo no [GitHub](https://github.com/lukelima/LifecycleExample.) e vou falar sobre ele.

Basicamente criei 3 serviços bastante simples e parecidos (apenas para fins didáticos) e os injetei utilizando AddSingleton, AddScoped e AddTransient.
![Injeção dos serviços no arquivo Program.cs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8noxoqf10ivwjukmajcf.png)
 
Esses serviços só possuem uma propriedade, o Id, que é criada no momento da instanciação. 
Criei um controller e injetei os serviços por construtor.![Injeção dos serviços no construtor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtxlecy6yja6fdi733us.png)

Também injetei uma instância do serviço em cada método.
![Injeção dos serviços em cada método](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbzeyh86fimx3xji9aeu.png)

## Singleton
O serviço é criado **uma única vez** e a mesma instância é passada para todas as chamadas dele. Veja que o id, criado no momento da instanciação, foi o mesmo (e continua sendo o mesmo independente da requisição): 
![Imagem mostra que uma única instância foi criada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djf0pqcgxgmr0k59iem2.png)

## Scoped
**Uma única instância é criada por requisição**. Então se o serviço for chamado em vários lugares em uma única requisição, a mesma instância será passada. Outras instâncias serão criadas para as próximas requisições.

Mesma requisição:
![Imagem mostra que uma única instância foi criada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxkot9z4wtnarvh9hvxt.png)

Requisição diferente:
![Imagem mostra que uma nova instância foi criada para uma segunda requisição](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg603oilzwhz3luzoo6h.png)
  
## Transient
Ele é o mais custoso, pois se o serviço for chamado em diversas classes, **cada uma delas terá uma instância diferente**:
![Imagem mostra que uma instância foi criada para cada chamada do serviço](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ynbb4lr6b78cbg1zx5t.png)
New automation tool - Looking for feedback
Tags: startup, java, automation, showdev
Published: 2022-04-19 11:24:27

**Hi Dev.to Community!**

At KuFlow we are building a **developer-oriented workflow engine**, on which to design and execute business processes. We like to call it an _orchestrator of tasks_, both human and automated.

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

It is not a BPM tool or a No-Code tool. It is a “workflow as code” tool, designed for companies that have a certain complexity in their business processes and with an IT department that must respond to it.

We are currently at an early stage. A few weeks ago we released the first version of KuFlow, and we're looking forward to getting feedback.

Would you be so kind of **[taking a look at our website](https://kuflow.com/en/faq?utm_source=devto&utm_medium=web&utm_campaign=launch)** and give us your feedback?

Thanks in advance! :-)
Regular Expression Example
Tags: javascript, regex
Published: 2022-04-19 11:19:40

```JavaScript
let myStr = "Hello World!"
let myRegex = /Hello/
myRegex.test(myStr) // true

let myRegex2 = /hello/ 
myRegex2.test(myStr) // false

let myRegex3 = /hello/i 
myRegex3.test(myStr) // true

myStr.match(myRegex) // "Hello"
let myStr2 = "Hello World! hello"
let myRegex4 = /Hello/ig
myStr2.match(myRegex4) // ["Hello,"hello"]
```

## Match Anything with Wildcard Period
```JavaScript
let humStr = "I'll hum a song";
let hugStr = "Bear hug";
let huRegex = /hu./;
huRegex.test(humStr); // true
huRegex.test(hugStr); // true
```

## Match Single Character with Multiple Possibilities
```JavaScript
let bigStr = "big";
let bagStr = "bag";
let bugStr = "bug";
let bogStr = "bog";
let bgRegex = /b[aiu]g/;
bigStr.match(bgRegex); // ["big"]
bagStr.match(bgRegex); // ["bag"]
bugStr.match(bgRegex); // ["buig"]
bogStr.match(bgRegex); // null
```
```JavaScript
let quoteSample = "Beware of bugs in the above code; I have only proved it correct, not tried it.";
let vowelRegex = /[aeiou]/ig;
let result = quoteSample.match(vowelRegex);
// [ 'e',  'a',  'e',  'o',  'u',  'i',  'e',  'a',  'o',  'e',  'o',  'e',  'I',  'a',  'e',  'o',  'o',  'e',  'i',  'o',  'e',  'o',  'i',  'e',  'i' ]
```

## Match Letters of the Alphabet

```JavaScript
let catStr = "cat";
let batStr = "bat";
let matStr = "mat";
let bgRegex = /[a-e]at/;
catStr.match(bgRegex); //["cat"]
batStr.match(bgRegex); //["bat"]
matStr.match(bgRegex); //null
```

```JavaScript
let quoteSample = "The quick brown fox jumps over the lazy dog.";
let alphabetRegex = /[a-z]/ig;
let result = quoteSample.match(alphabetRegex);//[ 'T',  'h',  'e', ... ,'d', 'o',  'g' ]
```

## Match Numbers and Letters of the Alphabet

```JavaScript
let jennyStr = "Jenny8675309";
let myRegex = /[a-z0-9]/ig;
jennyStr.match(myRegex);
```

```JavaScript
let quoteSample = "Blueberry 3.141592653s are delicious.";
let myRegex = /[h-s2-6]/ig;
let result = quoteSample.match(myRegex);
```

## Match Single Characters Not Specified

```JavaScript
let quoteSample = "3 blind mice.";
let myRegex = /[^aeiou0-9]/ig;
let result = quoteSample.match(myRegex);
```

## Match Characters that Occur One or More Times

```JavaScript
let difficultSpelling = "Mississippi";
let myRegex = /s+/g;
let result = difficultSpelling.match(myRegex);
//[ 'ss', 'ss' ]
```

## Match Characters that Occur Zero or More Times
```JavaScript
let chewieQuote = "Aaaaaaaaaaaaaaaarrrgh!"
let chewieRegex = /Aa*/;
let result = chewieQuote.match(chewieRegex); // ['Aaaaaaaaaaaaaaaa']
```
I made an app to track your life, with emoji!
Tags: javascript, webdev, programming, react
Published: 2022-04-19 10:38:07

Hey guys, I'm Virej Dasani, a 17 year old student, and self-taught Web, App, & Game developer.

I've been working on this app for a while now and I'm proud finally show you guys what it is

{% youtube lhkQvB2N4uI %}

Check it out here: https://virejdasani.github.io/Dailymoji/

I made Dailymoji to reduce the time we spend, tracking our activities, in journals.

If you're busy, it's hard to maintain a journal because they traditionally require you to write what you did. With Dailymoji, you don't have to write a single word unless you want to.

Just tap on an emoji and your activity, with its date and time, has been recorded!

![Dailymoji image loading...](https://raw.githubusercontent.com/virejdasani/Dailymoji/main/assets/img/dailymoji-ph-2.png)

![Dailymoji image loading...](https://raw.githubusercontent.com/virejdasani/Dailymoji/main/assets/img/dailymoji-ph-3.png)

![Dailymoji image loading...](https://raw.githubusercontent.com/virejdasani/Dailymoji/main/assets/img/dailymoji-ph-5.png)

![Dailymoji image loading...](https://raw.githubusercontent.com/virejdasani/Dailymoji/main/assets/img/dailymoji-ph-4.png)

I made Dailymoji using React + JavaScript + Firebase.

Upvote Dailymoji on ProductHunt: https://www.producthunt.com/posts/dailymoji

Please consider giving Dailymoji a ⭐️ on Github: https://github.com/virejdasani/Dailymoji

Check it out here: https://virejdasani.github.io/Dailymoji/


Looking forward to your feedback and comments!
I made the trendiest free open-source admin template for React! Check it out!
Tags: opensource, webdev, react
Published: 2022-04-19 10:38:02

Horizon UI is the trendiest open-source admin template built on top of Chakra UI. Horizon UI comes with over 70+ dark/light frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. Horizon UI is built to save a lot of time going from prototyping to full-functional code due to pages categories like NFTs page, Dashboard, Kanban, and so on.

[Presentation website](https://horizon-ui.com/?ref=dev.to)
[See live preview](https://horizon-ui.com/horizon-ui-chakra/?ref=dev.to)
What Is GitLab Workflow | GitLab Flow | GitLab Tutorial For Beginners | Part III
Tags: devops, beginners, tutorial, git
Published: 2022-04-19 10:37:48

In this video, we’ll introduce you to two variants of GitLab Flow. One utilizes environmental branches, and the other utilizes release branches. Follow along to see how you can work faster with these variants. [Start FREE Testing](https://accounts.lambdatest.com/register?utm_source=devto&utm_medium=organic&utm_campaign=apr19_sb&utm_term=sb&utm_content=tutorial_video)!

Integrate GitLab with LambdaTest: [https://bit.ly/3ti02GM](https://bit.ly/3ti02GM)


In this part of GitLab Tutorial for Beginners, Moss(@tech_with_moss), a DevOps engineer, will introduce you to the three primary Git branching strategies: GitHub Flow, GitLab Flow, and Git Flow and help you choose the best Git Branching Strategy for your project. By the end of this video, you’ll also learn GitLab’s primary branching and merging strategy to implement the development workflow in GitLab with a high degree of confidence.
 
You will learn -:
🔸 What is GitLab Flow?
🔸 What is GitHub Flow?
🔸 What is Git Flow?
🔸 What is the best Git branch strategy?
🔸 What is the difference between Git Flow and GitHub Flow?
First IOS app using XCode
Tags: ios, xocode, macos, codewitharjun
Published: 2022-04-19 10:23:00

Are you wondoring how to create a first IOS app. It's pretty simple you just have to install XCode and start writing the code and run. That's it Please find the detailed video about how you can do that : 

{% youtube t3qvyOclaAk %}
Why to use keys in list in React?
Tags: react, javascript
Published: 2022-04-19 10:15:45

Recently i came across a Linkedin post about use case of keys in react without specifying the details under the hood. Hence decided to decode it out in this post. Now Let's see what's happening under the hood of react when we add keys to our list.

Ever wonder how react detect the Dom has been updated? React uses the state of art diffing algorithm to do reconciliation. And do you know it have o(n) complexity? 

The algorithm follows this two basic principle

1.Two elements of different types will produce different trees.
2.The developer can hint at which child elements may be stable across different renders with a key prop.

Ok how this helps out us, lets take one example DOM list

`<ul>
<li>1</li>
<li>2</li>
</ul>`

Now let's say you want to add one item at the start.

`<ul>
<li>3</li>
<li>1</li>
<li>2</li>
</ul>`

Now react will compare both this Dom and have to iterate then have to figure out both the list item 1 and list item 2 have been not changed. Then have to add the list item 3 at start.

Let's just imagine if our list have 1000 of elements which need to be updated frequently. Our app would be have a worst performance nightmare.

Now lets see how this works differently when you add a key 

`<ul>
<li key='a'>3</li>
<li key='b'>1</li>
<li key='c'>2</li>
</ul>`

Now when react compare the Dom, it exactly knows a has been introduced newly and no change has happened on b and c so it will just add the a list item in the list. In this way it will avoid iteration as well. 

Also make sure you are not keeping the index as key which is not recommended by react as it might result in unexpected re-render behaviours. Make sure to use unique key elements always.

Hope now it's clear that why adding a key would be very important in react and how it can improve the performance so well.

you can check more about the diffing algorithm [here](https://reactjs.org/docs/reconciliation.html#recursing-on-children)
Introduction To GitLab Interface | GitLab Tutorial For Beginners | Part II
Tags: devops, beginners, tutorial, git
Published: 2022-04-19 10:09:20

GitLab offers a feature-based system with a centralized, integrated platform for web developers. In addition, GitLab features help in project management, issue tracking, and free private repository hosting to simplify planning and managing your projects. [Start FREE Testing](https://accounts.lambdatest.com/register?utm_source=devto&utm_medium=organic&utm_campaign=apr19_sb&utm_term=sb&utm_content=tutorial_video)!

Integrate GitLab with LambdaTest: [https://bit.ly/3ti02GM](https://bit.ly/3ti02GM)


In this part of GitLab Tutorial for Beginners, Moss(@tech_with_moss), a DevOps engineer, introduces you to GitLab account authentication and group dashboard interface. Furthermore, you will be getting familiar with GitLab user interface features which enables you to automatically build, test, and deploy your software. Its features like built-in continuous integration and continuous delivery make it seamless to go from a code change to a running pipeline. You will also learn about the GitLab project dashboard to help you create a new project, ‘new issue’ within the project, and explore the ‘package & registry’ section.

This video will help answer the following questions 🎫 -: 
🔹What is GitLab UI?
🔹How do you access GitLab UI?
🔹How do you use GitLab?
🔹What can you do with GitLab?
event loop - micro task - promise
Published: 2022-04-19 10:03:53

```js
function logOne() {
    console.log('1');
}

function main() {
    setTimeout(logOne, 0);
    Promise.resolve(2)
        .then(val => val * 2)
        .then(console.log);
    console.log('3');
}

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1i38dwequml3419ql8c.png)
What is the most important factor for you when looking for work?
Tags: discuss, career, codenewbie, watercooler
Published: 2022-04-19 10:01:13

There are dozens of factors that we need to take into account when we are looking for work. Everybody is different and some people are likely to give a higher priority to a different area. Salary, Career Progression, Work-Life balance, Job Satisfaction, Remote working and other factors all need to be considered.

- Salary – you want to earn as much as you can
- Career Progression – you are trying to get promoted and learn new skills
- Work-Life balance – you want the flexibility to have your own working hours and location
- Job Satisfaction – you are eager to contribute as much as possible at your company
- Remote working - you want to have a stress free convenient work environment 
- Other – do you have other goals in mind if so talk about it in the comments
Laravel Temporary URL for local storage driver
Tags: laravel, php
Published: 2022-04-19 09:57:09

Recently, I needed to use a temporary URL. Laravel supports temporary URLs out of the box with S3 drivers. I was using a local disk, but Laravel does not support a temporary URL feature for the local disk. If you are getting this exception, you are on the right article. 
`RuntimeException with message 'This driver does not support creating temporary URLs.'`

I decided to add the temporary URL logic for my local disk. We'll accomplish this via [Laravel signed URLs](https://laravel.com/docs/9.x/urls#signed-urls).

The below steps describe how to implement the `getTemporaryUrl` function in your Laravel app.


## Step 1: Add the following code in the AppServiceProvider boot method.


```php
Storage::disk('local')->buildTemporaryUrlsUsing(function ($path, $expiration, $options) {
            return URL::temporarySignedRoute(
                'local.temp',
                $expiration,
                array_merge($options, ['path' => $path])
            );
        });
```

Notice that `URL::temporarySignedRoute` receives route name `local.temp`, which we need to define. 

## Step 2: Add the route in web.php

```php
Route::get('local/temp/{path}', function (string $path){
    return Storage::disk('local')->download($path);
})->name('local.temp');
```

This will allow downloading of the file using a temporary URL. 

Now you can easily generate a temporary URL for the local disk. 

```php
disk = Storage::disk('releases-local');

return $disk->temporaryUrl($this->path, now()->addMinutes(5));
```

## PS
Your feedback is welcome if you want to suggest improvements or know any better way.
Implement different types of sliders using Vue 3 and Swiper 7
Tags: vue, javascript, css
Published: 2022-04-19 09:46:09

**What is the use of swiper.js?**

Using swiper.js, we can integrate eye-catching sliders in different javascript frameworks like [Vue](https://blog.canopas.com/vue-3-lifecycle-hooks-with-real-time-example-1b772b89e085), angular, [react](https://blog.canopas.com/android-reactive-programming-with-coroutines-and-mvvm-74cd4117df3a), etc. It includes many options and effects that can be applied to make a customized one. 

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

We will see some of the examples in [this article](https://blog.canopas.com/implement-different-types-of-sliders-using-vue-3-and-swiper-7-ab79bd5abe28).
X Forward depend on xauth executable binary on the server side
Tags: ssh, linux
Published: 2022-04-19 09:41:59

Once I found that the DISPLAY variable was not set as I expected when I ssh into a box with X Forward enabled on both side, and X Server running on the ssh client side, I read [this answer](https://unix.stackexchange.com/a/12772/346997) and solved this problem
I need support on Speed Optimization
Tags: speaking, webdev, beginners, javascript
Published: 2022-04-19 09:07:12

Hello all,
we are trying to improve our  website Chilli Promotions- [Promotional Products Supplier](https://www.chillipromotions.com.au/) in Australia. But we are facing a lot of problem.
Is here any one who can support us!!!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ulprhd6qod023sqzckt.JPG)
Metaverse Company purchases ReKTGlobal in a 9-figure deal
Published: 2022-04-19 09:06:59

A little-known metaverse company has acquired ReKTGlobal for close to half a billion dollars, and the acquisition signals a change of dispensation for the Esports Company.

ReKTGlobal Set for Leadership Change
April 12, 2022, marked the beginning of a new dispensation for ReKTGlobal and its assets. The parent company of the London Royal Ravens and the esports team, Rogue, was acquired for a fee of $470 million. The company announced the sale on its official Twitter page, stating that the deal signals the next chapter in their evolution into the metaverse. While the agreement is yet to be concluded, it would see the new owners acquire all the assets and brands currently owned by ReKTGlobal. 

Interestingly, however, the new owners are a relatively unknown metaverse company called Infinite Reality. They were able to gain ownership of ReKTGlobal by purchasing almost half a billion USD worth of its stock. That gives Infinite Reality a significant portion of ReKTGlobal’s total stock which they evaluated as worth $2 billion in equity.

The acquisition of ReKTGlobal also gives Infinite Reality ownership of multiple businesses, which include Rogue and London Royal Ravens. Esports content production agency Greenlit Content and internet talent management company TalentX Entertainment are also part of the assets that the metaverse company will acquire at the end of the high-profile business deal.

ReKTGlobal Founder and Chairman Amish Shah stated in an interview with Forbes that the long-term goal for ReKTGlobal is to become a 10, 20, $30 billion company. And they believe they’ll achieve it faster with Infinite Reality.

Infinite Reality: Meet The New Owners
Infinite Reality is a company operating primarily in the metaverse space. The company results from the merger of Display Social, an eCommerce platform, Thunder Studios, and Infinite Metaverse, a metaverse builder. 

Infinite Reality develops tools and provides services that help to improve end-user experience in the metaverse. The company essentially supports metaverse creators and brands by developing their content and distribution channels.

To create an open metaverse, they help creators develop content, databases, smart contracts, moderation, authentication systems, and tools for metaverse exploration. And we can expect them to commit all of their resources to expanding and growing ReKTGlobal. 

[Read more](https://www.coinparative.com/nft-news/metaverse-company-purchases-rektglobal-in-a-9-figure-deal/)
Showcase: Airport for Mac
Tags: mac, apps, apple, showdev
Published: 2022-04-19 09:05:02

To be focused on writing & working, there are the times where I don’t want my machine to be connected to the outside world, so the idea is what if there is a way to kill the wireless tech anytime & anywhere. This is something not new in the market, there is a great example on smartphones - Airplane mode.

Instead of reinventing something new, just like an iPhone, what if there is an Airplane mode for Mac that turns on/off Wi-Fi, Bluetooth and other things.


Quick video:
https://youtu.be/cRafN4kHGT8

**You can download the app from here for FREE(limited time only and it supports only on Monterey) https://www.producthunt.com/posts/airplane-for-mac**

**How I built it?**
Like always, Apple doesn't keep up the work on Mac development, it was mindf*ck task to make it work. Outside it looks simple but there was a lot of effort put in learning
- AppKit
- Applescript
- Shell script