Frontend Collective - Week #1

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

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

Written by Tyler Sticka

For more visit the site here

---

Some hard to remember CSS Selectors

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

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

p::first-line {}

article + p {}

article ~ p {}

For more visit the site 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, and on the Daily Developer Jokes DEV Profile.

Created by Fred Adams

For more visit the site 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

$ yarn add @daveberning/griddle
# or
$ npm install @daveberning/griddle

Import

import '@daveberning/griddle;

For more visit site 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

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

---

IHateRegex

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

For more visit the site here

---

Gradientify

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

Visit the site 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

Till then,
Keep on Hacking, Cheers