ARTS_202207W1

ARTS 第 2 周

每周完成一个ARTS： Algorithm：每周做一个 leetcode 的算法题 Review：阅读并点评写作一篇英文技术文章 Tip：学习至少一个技术技巧 Share：分享一篇有观点和思考的技术文章。

image.jpg

Table of Contents

• Algorithm 排序链表
• Review 不错的CSS教程
• Tip 浏览器插件google translate
• Share 分享文章：GO语言、DOCKER 和新技术

Algorithm

leetcode148. 排序链表

题目描述：给你链表的头结点head，请将其按 升序 排列并返回 排序后的链表。

输入：head = -1,5,3,4,0 输出：-1,0,3,4,5

package com.haowang.leetcode;

import com.haowang.TestUtils.UseCase_LinkedList.ListNode;
import com.haowang.TestUtils.UseCase_LinkedList;

/**
 * Definition for singly-linked list.
 * public class ListNode {
 *     int val;
 *     ListNode next;
 *     ListNode() {}
 *     ListNode(int val) { this.val = val; }
 *     ListNode(int val, ListNode next) { this.val = val; this.next = next; }
 * }
 */
public class 排序链表_148 {
    public static void main(String[] args) {
        排序链表_148 func = new 排序链表_148();
        System.out.println("用例1  排序前");
        int[] nums1 = new int[]{-1,5,3,4,0};
        ListNode head = UseCase_LinkedList.createLinkedList(nums1);
        UseCase_LinkedList.printLinkedList(head);
        System.out.println("排序后");
        head = func.sortList(head);
        UseCase_LinkedList.printLinkedList(head);
    }

    public ListNode sortList(ListNode head) {
        ListNode temp = sortList(head, null);
        return temp;
    }
    public ListNode sortList(ListNode head, ListNode tail) {
        if (head == null) {
            return head;
        }
        if (head.next == tail) {
            head.next = null;
            return head;
        }
        ListNode slow = head, fast = head;
        while (fast != tail) {
            slow = slow.next;
            fast = fast.next;
            if (fast != tail) {
                fast = fast.next;
            }
        }
        ListNode mid = slow;
        ListNode list1 = sortList(head, mid);
        ListNode list2 = sortList(mid, tail);
        ListNode sorted = merge(list1, list2);
        return sorted;
    }

    public ListNode merge(ListNode head1, ListNode head2) {
        ListNode dummyHead = new ListNode(0);
        ListNode temp = dummyHead, temp1 = head1, temp2 = head2;
        while (temp1 != null && temp2 != null) {
            if (temp1.val <= temp2.val) {
                temp.next = temp1;
                temp1 = temp1.next;
            } else {
                temp.next = temp2;
                temp2 = temp2.next;
            }
            temp = temp.next;
        }
        if (temp1 != null) {
            temp.next = temp1;
        } else if (temp2 != null) {
            temp.next = temp2;
        }
        return dummyHead.next;
    }
}

这里采用归并排序，采用自顶向下的递归实现
  * 时间复杂度：O(nlogn)，其中n是链表的长度。
  * 空间复杂度：O(logn)，其中n是链表的长度。空间复杂度主要取决于递归调用的栈空间。

这里为了方便本地IDEA调试，参考了一些资料，可通过方法createLinkedList()本地生成链表结构，printLinkedList()打印链表。

题目链接

Review

Learn CSS! 谷歌出品的CSS教程，地址：https://web.dev/learn/css/

内容很丰富全面，目前一共29节课。本课程是为初学者和高级 CSS 开发人员创建的。您可以从头到尾浏览本系列，从头到尾大致了解 CSS，也可以将其作为特定样式主题的参考。对于 Web 开发的新手，请查看 MDN 的 HTML介绍，了解如何编写标记和链接样式表。

课程内容：

• 001 Box Model CSS显示的所有内容都是一个框。因此，了解CSS盒模型的工作原理是CSS的核心基础。

image.png

• 002 Selectors 选择器 要将 CSS 应用于元素，您需要选择它。 CSS 为您提供了许多不同的方法来执行此操作，您可以在本模块中探索它们。
• 003 The cascade 级联 有时两个或多个相互竞争的 CSS 规则可能适用于一个元素。在本模块中，了解浏览器如何选择使用哪个，以及如何控制此选择。
• 004 Specificity 这个模块更深入地研究了特异性，这是级联的关键部分。
• 005 Inheritance 继承，如果您不为它们指定值，则某些 CSS 属性会继承。在本模块中了解它是如何工作的，以及如何利用它来发挥自己的优势。
• 006 Color 在 CSS 中有几种不同的方法来指定颜色。在这个模块中，我们来看看最常用的颜色值。
• 007 Sizing Units 在本模块中，了解如何使用 CSS 调整元素大小，并使用 Web 的灵活媒体。
• 008 Layout 概述在构建组件或页面布局时必须选择的各种布局方法。
• 009 Flexbox Flexbox 是一种布局机制，设计用于在一维中布局元素组
• 010 Grid CSS Grid Layout 提供了一个二维布局系统，控制行和列的布局。在这个模块中发现网格所提供的一切。
  

  image.png
• 011 Logical Properties 逻辑、流相关属性和值与文本流相关联，而不是与屏幕的物理形状相关联。了解如何利用这种更新的 CSS 方法。
• 012 Spacing 间距 了解如何选择间隔元素的最佳方法，同时考虑您正在使用的布局方法和您需要构建的组件。
• 013 Pseudo-elements 伪元素就像添加或定位一个额外的元素，而无需添加更多的 HTML。他们有多种角色，您可以在本模块中了解他们。
• 014 Pseudo-classes 伪类允许您根据状态更改应用 CSS。这意味着您的设计可以对用户输入做出反应，例如无效的电子邮件地址。
• 015 Borders 边框为您的盒子提供了一个框架。在本模块中了解如何使用 CSS 更改边框的大小、样式和颜色。
• 016 Shadows 有多种方法可以在 CSS 中为文本和元素添加阴影。在本模块中，您将学习如何使用每个选项以及它们的设计任务。
• 017 Focus 了解焦点在您的 Web 应用程序中的重要性。您将了解如何管理焦点，以及如何确保通过页面的路径适用于使用鼠标和使用键盘进行导航的用户。
• 018 Z-index and stacking contexts 了解如何通过使用 z-index 和堆叠上下文来控制事物相互叠加的顺序。
• 019 Functions CSS 有一系列内置函数。在本模块中，您将了解一些关键功能以及如何使用它们。
• 020 Gradients 在本模块中，您将了解如何使用 CSS 中可用的各种类型的渐变。渐变可用于创建大量有用的效果，而无需使用图形应用程序创建图像。
• 021 Animations 动画是突出交互元素并为您的设计增添趣味和乐趣的好方法。在本模块中了解如何使用 CSS 添加和控制动画效果。
• 022 Filters CSS 中的过滤器意味着您可以应用您可能认为只能在图形应用程序中实现的效果。在此模块中，您可以发现可用的内容。
• 023 Blend Modes 混合模式 通过混合两个或多个图层来创建合成效果，并在此模块中学习如何在混合模式下隔离具有白色背景的图像。
• 024 Lists 从结构上讲，列表由一个列表容器元素组成，其中填充了列表项。在本模块中，您将学习如何为列表的所有部分设置样式。
• 025 Transitions 在本模块中，学习如何定义元素状态之间的转换。通过向用户交互提供视觉反馈，使用过渡来改善用户体验。
• 026 Overflow 溢出是您处理不适合设定的父大小的内容的方式。在本模块中，您将跳出框框思考，并学习如何设置溢出内容的样式。
• 027 Backgrounds 在本模块中，学习使用 CSS 设置框的背景样式的方法。
• 028 Text and typography 文字和排版，在本模块中，学习如何在 Web 上设置文本样式。
• 029 Conclusion and next steps 结论和后续步骤

Tip

chrome浏览器安装翻译插件：google translate，方便浏览英文网页

实现效果如下：

image.png

Share

分享coolshell上的一篇文章，GO语言、DOCKER 和新技术