n5321 | 2024年9月29日 23:24

Tags:

Bootstrap

最近越来越觉得这个编程的工作就是在做阅读理解。

那写东西的套路，自己还是稍微懂一点的。

目标：

  1. 搞清楚这个sidebar的东西。为了给自己的那几个软件写教程。也包括了给自己的idea写教程。

  2. 做一个类似seth‘s blog的漂亮blog

当前状态

  1. blog在细微的地方还需要做一些改善。

  2. sidebar的逻辑还没有完全搞清楚。

学习

  1. 方式总还是边看边试边忘的套路。

  2. 资源：

    1. bootstrap/bootstrap-sidebar-menu。Bootstrap本身的example就是最好的。

    2. https://getbootstrap.com/docs/5.3/forms/input-group/#basic-example，这个里面有很多的砖瓦，可以直接拿过来砌墙。

      1. 5.3版本跟4.2版本好像差异还不小。同样的code在4.2下面的效果跟5.3下的效果完全不同。

      2. 新版本实现同样的效果代码量小很多。

Sidebar

现在的sidebar有两个套路，一个是chatgpt给我的，一个是mdo的。

暂时是想blog用chatgpt的，然后教程用mdo的。

先把mdo的搞清楚一点。

关于图标ICON的问题

在mdo的example之中很多widget都有提示性的icon。问题：这些icon是从哪里来，从哪里设置的。

从example看，它用的是

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

如果用这个，它应该有一个gallery。于是找到：Bootstrap 官方图标库https://icons.getbootstrap.cn/?q=home

<a href="#" class="nav-link active" aria-current="page">
  <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
  Home01
</a>

在调用的时候，它的完整code如上。

逻辑应该是在这个home这里。它要使用一个link，把id为home的icon插在这个地方，具体的高、宽，margin都在class那里设定好了。OK，问题是home的icon在Bootstrap 官方图标库找不到。

它有一个home的类，里面有很多house做根的icon，然后icon id完全不同。

奇怪？！！！

看它自己介绍的用法：

Sprite：利用 SVG sprite 和 <use> 元素即可插入任何图标。使用图标的文件名作为片段标识符（例如 toggles 就是 #toggles）。SVG sprites 允许你像 <img> 元素一样引用外部文件，并支持 currentColor 的功能以便主题化。

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>

把以上代码拷贝，无效。做了好几个尝试，都无效，直接放弃。

改用图标字体的方式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<i class="bi bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

这样子好像代码量都要少一些，为什么大佬喜欢用svg呢？

Sidebar的对比

官方给了5个版本的Sidebar，我大概觉得有三个可用。

然后考虑对比版本1和版本2的区别。总体的思路和框架应该是差不多的，所以考虑看那些细节的地方实现的不一样是怎么出来的。找了一个网站来做对比:https://www.diffchecker.com/text-compare/

image-20240921112557978

大概得效果如图示，确实是比较牛逼的一个东西。备用。

前端的东西在那时就搞到这里了。ready把blog的东西搞起来。

Blog页面

  1. 当前mySiteT2.html的页面效果觉得勉强合适，需要添加几个response effect。

  2. 复制粘贴用mySiteT3页面(mySiteT2.html备用)

  3. 参考学习https://djangocentral.com/building-a-blog-application-with-django/，里面的动态效果。

参考Bootstrap的官方example

id="navbarSupportedContent"，这个id具有隐藏效果。

没那么好用。

总结

html还真的是比想象中的逻辑要麻烦复杂一点。尤其是在尝试做一些精细控制的时候，可能确实是需要好一段时间才能搞定这个问题了。

一时半会搞不定，暂时放一边，不管他算了。

回头改自己blog project

card text-center md-4
<!--<a href="{% url 'post_new' %}">+ New Blog Post</a>-->

  1. 把template切换成自己的template

    1. 整个界面跟seth的相似度有了八成。

    2. 东西太多，好像自己也没有完全理解清楚。都在一知半解之间，只是东西能够跑起来。感觉还是有点危险。按道理是要完全搞清楚，按李泽厚的台词 ，要 和目的性与规律性的统一的。总的来看，那还是相关的几个东西内化的不够，没有成为本能的一个思维方式。

    3. 问题：要怎么改善呢？关键点之一 ，是要增加代码的可读性！？！！！

    4. 暂时看，好像deploy的东西也忘得七七八八的。操。这个web programming的东西还真的是随学随用随忘啊！！！麻烦！！！

    5. 安慰一下，搞Web application的东西时间也不久，才五个月？！！！

  2. 要把那个debug的工具插进来！

总结

感觉最近弄的东西太多，在思想上可能还是需要更新一下，开始看https://course.ccs.neu.edu/cs5010f18/index.html

Computer code in any language consists of only two aspects: representation of relevant data and ways of manipulating that data. That is, nouns (things) and verbs (actions).

https://course.ccs.neu.edu/cs5010f18/lecture1.html

这个台词太牛逼了。

Programming languages often better support some types of design than others, but the design has a profound impact (often independent of the programming language used to implement it) on what can or cannot be done easily and elegantly.

1.3.1Design 1: data and functions operating on data (externally)编程本质上就是处理这个问题。

We see that although possible, supporting an additional type of publication creates substantial changes to existing code (a new case inside existing functions). It is reasonable to expect newer forms of data to be supported as an application evolves, so making extensive changes each time seems like a major limitation of this design.

Design 1 (functions external to data) separates the data from functions that manipulate it.

intuitive的模式，readable完美，robust and changing的地方有局限。

A beautiful program is one that is readable, understandable, and modifiable by people

这个标准牛逼。

1.3.3Design 2: Combining data and functions

An alternative organization of data and functions is to pair the data with all the relevant manipulations to it. In other words, we assign the responsibility to a publication to cite itself.

That’s it! No changes to any existing code is required.（这个就是面向对象的价值）所以软件的维护就变成了一个加object的过程。没有refactoring！！！

Design 2 is "classic object-oriented design."

data and its functions are encapsulated (in a class)，写过了，就不改了。 The resulting objects are self-contained and capable: they represent data (as attributes, often referred to as state) and offer relevant operations (as functions, often referred to as behavior).

Which design is better? In the above situation, we see that incorporating a new publication required isolated changes in Design 2. It is tempting to conclude that Design 2 is superior to Design 1. However consider another situation: adding a new citation style. In Design 1, this would require writing another cite method for the new citation style that supports all existing type of publications. No changes to existing code would be required. However in Design 2, one would have to add a new method to each existing publication class. In real-life situations, new features are often demanded after a design and implementation are complete. Moreover, they cannot always be anticipated accurately. Thus which design is "better" depends on which future changes it is able to support more easily. There is no one universally superior design paradigm. Consequently one must be aware of and open to using different design paradigms as suitable, possibly within the same application. Most modern programming languages support multiple design paradigms to varying degrees, as illustrated by the Python code. So the choice of design paradigm is not solely determined by the language chosen for implementation. This fact makes program design both complicated and interesting.

1.5Testing

How do we know that our implementation works? One could write a program that creates several instances of this class and then have it print useful information. Running this program and reading what is printed could be taken as evidence that this code works. In this case as we want to test a class (a unit), these tests are unit tests.

Such manual testing, although conceptually correct, becomes cumbersome when the number of classes and their complexity increases. Printed information becomes verbose quickly and one can easily make a mistake in reading. If the program is interactive, then manual testing includes manually typing inputs which is error-prone and slow. Good tests are automatic so that they are easy to run multiple times, and verification of correctness is part of the test instead of relying on manual verification. Such automation requires methodical test design and a framework to facilitate the automation. We use the JUnit framework to write tests in Java.

1.6.3Documentation

Documentation is critical to making code understandable, readable and usable. As programmers we are both producers and consumers of documentation. Any good code base comes with copious and helpful documentation.

一直在考虑这个问题。

Expressing design in UML

这个还没怎么用啊。它本质上就是这个：class diagramimg

数据结构设计的好坏，就定义了program的elegant，robust，efficient等等。

Therefore the objective of writing software should not only be a program that (somehow) spits out the correct answer, but also one that can stand inevitable changes in the future. Thus whatever we design needs protection from variations, and this is inherently a design problem.

牛逼台词。

有新时代的《人月神话》的感觉。

2024/9/25

看它的ppt！

目标，帮助用户更好的完成工作，帮助用户更好的实现目的。完成工作本质上是替换，工具的替换。做同样的事情，用不同的工具。实现目的，则包含另外一个层次的意思。能够收集全过程的信息，能够采集所有用户的信息，提供information。

软件的价值是提供工具价值。写出漂亮的软件。

什么是漂亮？

关于软件的标准：It’s not calculus. Getting the right answer is not enough. The goal is to write beautiful programs. A beautiful program is one that is readable, understandable, and modifiable by people.

principles：

1. Always remember: Programming is a People Discipline
2. Represent Information as Data; Interpret Data as Information
3. Programs should consist of functions and methods that consume and produce values
4. Design Functions Systematically
5. Design Systems Iteratively
6. Pass values when you can, share state only when you must.

Everything we do can be traced back to one or more of these principles.

We will expand on each of them as we go along.

Write these down, in your own handwriting. Writing things down will help you remember them.

Some Slogans
1. Stick to the recipe!
2. You don't understand it until you can give an example.
3. One function, one task.
4. The Shape of the Data Determines the Shape of the Program.
5. Practice makes perfect.

The Function Design Recipe
1. Data Design
2. Contract and Purpose Statement
3. Examples and Tests
4. Design Strategy
5. Function Definition
6. Program Review

This is important. Write it down, in your own handwriting. Keep it with you at all times. Put it on your mirror. Put it under your pillow. I’m not kidding!

Bootstrap 24-9-28

常规的编程总体来看就是在做一个结构设计。不过是一个隐形的结构设计。我是那个能够把编程解释给制造业工程师的码农。

对于browser来说，其实就是那几块。

<!doctype html> 定义文件类型

  1. head 定义framework

    1. <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">那个media就没必要了。
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
      rel="stylesheet">
      <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
      <title>Bootstrap Example</title>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    2. 编码类型

    3. 分辨率（view的大小）

    4. 备用资源

      1. css <style>

      2. js <script>

  2. body_下面要切割出div

    1. header

    2. main

    3. footer

https://www.onlineittuts.com/responsive-sidebar-menu-in-html-css-and-javascript.html

One important aspect of responsive design is the use of media queries. Media queries are a CSS technique that allows designers to specify different styles for different screen sizes and devices.

Once the basic HTML structure of the menu has been created, designers will then use CSS to define the styles and positioning of the menu. This typically involves using the Flexbox or Grid layout techniques to create a flexible and responsive layout that adapts to different screen sizes and devices. They will also add styles to the button or icon that will be used to toggle the menu, ensuring that it is easy to find and use.有一点像SW 画装配体的感觉。