前端社群 - 第一周

这是一个精心挑选的、由优秀的人和社区创作的优秀作品集。

精彩片段

• 一些虚构的 CSS
• 一些难以记忆的 CSS 选择器
• 每日开发者笑话
• 煎锅
• 2020年的PHP
• 我讨厌正则表达式
• 渐变

一些虚构的 CSS

这是一些在不久的将来可能实现的奇特的虚构 CSS 代码集合。

截至撰写本文时，这些例子都不是真实的……它们纯属虚构！

容器查询

举个例子：仅当元素宽度小于视口宽度时才将其边角设为圆角。

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

作者：泰勒·斯蒂卡

更多信息请访问此网站。

一些难以记忆的 CSS 选择器

以下是适用于我们用例的选择器列表。请享用！

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

p::first-line {}

article + p {}

article ~ p {}

更多信息请访问此网站。

每日开发者笑话

精彩笑话集锦。“每日开发者笑话”机器人每天都会在“每日开发者笑话”网站和“每日开发者笑话”开发者个人资料页面上发布程序员幽默笑话。

由弗雷德·亚当斯创作

更多信息请访问此网站。

煎锅

Griddle 是一个基于 CSS Grid 和 Flexbox 构建的 CSS 框架。如果您熟悉其他 CSS 框架的工作原理，那么使用 Griddle 入门会非常容易。其核心是 CSS Grid，这个 CSS 规范正迅速成为创建 UI 布局和网格的新标准。

安装

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

进口

import '@daveberning/griddle;

更多信息请访问此网站

2020 年的 PHP

如今，PHP 是一种相当独特的语言：它仍然允许你编写完全动态的弱类型代码，但同时也拥有一个更强大的可选类型系统。结合静态分析工具，例如 Psalm、Phan 和 PHPStan，你可以编写安全、强类型且经过静态分析的代码。

一段现代的 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
    }
}

更多信息请访问此网站。

我讨厌正则表达式

iHateregex.io 的代码😈——一个给喷子的正则表达式速查表

更多信息请访问此网站。

渐变

专为渐变爱好者打造的交互式免费 SVG 图标包！

点击此处访问网站。

如果您觉得这篇博客对您很有帮助，请随时分享您的想法和意见；如果您有任何问题或疑问，请给我留言。

最后，我们还有一系列关于后端技术的每周更新，也请大家关注。

https://dev.to/weekly/weekly-trending-links-for-backend-developers-1-3719

在此之前，
继续破解吧，干杯！