Frontend Collective - Week #1
Tags: weeklyui, webdev, javascript, css
Published: 2020-02-06 08:10:55

It's the curated collection of awesome work that is done by awesome people and community.

Highlights 

- Some Imaginary CSS
- Some hard to remember CSS Selectors
- Daily Developer Jokes
- Griddle
- Php In 2020
- IHateRegex
- Gradientify

------------

## **Some Imaginary CSS**

It's a collection of some fancy imaginary CSS that could be possible near future.

As far, none of these examples is real as of this writing… they are pure flights of fancy!

### **Container Queries**

Here’s one example: Only round an element’s corners when it’s narrower than the full viewport width

```css
.card:media(width < 100vw) {
  border-radius: 0.5em;
}
```

Written by [Tyler Sticka](https://cloudfour.com/is/tyler/ "Tyler Sticka")

For more visit the site [**here**](https://cloudfour.com/thinks/some-imaginary-css/ "here")

------------

## **Some hard to remember CSS Selectors**

Below is the list of selectors that are suitable for our use case. Enjoy!

```css
:nth-child(odd|even|n){}
```

```css
p::first-line {}
```

```css
article + p {}
```

```css
article ~ p {}
```

For more visit the site [**here**](https://dev.to/proticm/10-useful-and-hard-to-remember-css-selectors-56h2 "**here**")

------------

## **Daily Developer Jokes**
Collection of awesome jokes. The Daily Developer Jokes bot will post programmer humour and jokes every day, both on the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/ "Daily Developer Jokes Website"), and on the [Daily Developer Jokes DEV](https://dev.to/dailydeveloperjokes "Daily Developer Jokes DEV") Profile.

Created by [**Fred Adams**](https://xtrp.io/ "**Fred Adams**")

For more visit the site [**here**](https://dailydeveloperjokes.github.io/ "**here**")

------------

## **Griddle**
Griddle is a CSS framework created with CSS Grid and Flexbox. It's easy to get started with Griddle, especially if you are familiar with how other CSS Frameworks work. At its core, is CSS Grid. The CSS specification that is quickly becoming the new standard when creating UI layouts and grids.

**Installation**
```code
$ yarn add @daveberning/griddle
# or
$ npm install @daveberning/griddle
```

**Import**
```
import '@daveberning/griddle;
```

For more visit site [**here**](https://github.com/daveberning/griddle "**here**")

------------

## **PHP in 2020**
Today, PHP is a rather unique language: it still allows you to write completely dynamically and weakly typed code, but also has a much stronger, opt-in type system. Combined with static analysis, tools like Psalm, Phan and PHPStan, you can write secure, strongly typed and statically analysed code.

A modern snippet of PHP

```php
<?php

declare(strict_types=1);

final class Foo
{
    public int $intProperty = 2;

    public ?string $nullableString = null;

    private Bar $bar;

    public function __construct(Bar $bar) {
        $this->bar = $bar;
    }
    
    public function withInt(int $value): self
    {
        $clone = clone $this;
    
        $clone->intProperty = $value;

        return $clone;
    }
    
    public function unionTypes(int|float $input): void
    {
        // Union types will be added in PHP 8
    }
}
```

For more visit the site [**here**](https://stitcher.io/blog/php-in-2020 "**here**")

------------

## **IHateRegex**
The code for iHateregex.io 😈 - a regex cheat sheet for the haters

For more visit the site [**here**](https://ihateregex.io/ "**here**")

------------

## **Gradientify**
An interactive free SVG icons pack specially made for gradient lovers!

Visit the site [**here**](https://www.iconshock.com/svg-icons/ "**here**")

------------

If you have found this blog very helpful then please feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Lastly, we have another series of weekly updates about the backend's technology. Do follow that as well.

[https://dev.to/weekly/weekly-trending-links-for-backend-developers-1-3719](https://dev.to/weekly/weekly-trending-links-for-backend-developers-1-3719)

Till then,
**Keep on Hacking, Cheers**