H2S2: The state of web design in ’22

H3S1: WordPress | themes #

In order to understand the state of web design in ’22, we have to, necessarily, due to the increase disciplinary | inter-connectedness, not only in the IT field, but in the broader global | intellectual community, the number of connections between the design decisions that a web designer have to make, and the decisions that a web developer, are increasing. One such point of connection is in WordPress | themes, a technical | feature that is unique to communitydriven dev-platforms<r: WP.MIC-Blog,H3S1>, and the complexity of which is analogous to plugin installation #

The problem # with WordPress themes, as of 9/22, is that there is insufficient | differentiation in the functionality coverage # of this feature, with plugin functionality, as well as post and page | functionality, and, in addition, there is problematic | ambiguity in the scope, and rules, of implementation, such that different themes may encroach, causing redundancies, to different | degrees. From my experience, even official | WordPress themes are not spared from these issues. For this reason, I stick to, by default, the Blank Canvas theme, which comes with minimal | functionality, but with no restrictions on flexibility, as in, you can still create an unlimited number of posts and pages, customize each page, and change the site menu, header, and footer.

Certain websites # may benefit from the installation of paid, special | themes; if the theme is not particularly important, and the product owner is fine with the free | tier, then Blank Canvas is the only | option. Case study: while working on https://www.maccsp.com/, formerly kccsp.com, for Dr. Jaswinder Singh, a Missouribased oncologist, we decided to use MediCenter, a $69 WordPress theme that is specific to the medical specialty, a responsive, hospital-styled theme, with patient | timetable functionality built-in. Generally, this theme fit Dr. Singh’s product requirements # well, and did cut down on the time curve; moreover, the cost of acquisition was reasonable, given his $1,200 budget.

H4S1: WordPress theme, #defd:

WordPress<a-r>: In WordPress, the (X)HTML structure and the CSS style sheet are present but the content is generated “behind the scenes” by various template files. The template files and the style sheet are stored together as a WordPress ThemeHu: Therefore, any changes that one makes, to custom | CSS, on any page, or in | general, are made, also, to the WordPress theme.

H4S2: File path to WP-templates:

WPbeginner.com<a-r>: [your-domain].com/wp-content/themes/[theme-name]/templates Hu: This is likely our most-used file path, since wp-posts is our most edited db-table, and templates, the rendering | mechanism<WP.MIC-H2S10>

H4S3: WP.template-retrieval,hierarchy #:

Via WP.dev-template,hierarchy

H3S2: Aesthetic | preferences:

The modern | state of web design, 2007-2022, has been heavily | influenced by the work of Steve Jobs: Isaacson<a-r, 2012>: Steve Jobs’ interest in design began with his love for his childhood home. It was in one of the many working-class | subdivisions between San Francisco and San Jose that were developed by builders who churned out inexpensive modernist | tract houses in the 1950s for the postwar suburban migration. Inspired by Frank Lloyd Wright’s vision of simple modern homes for the Americaneveryman,” developers such as Joseph Eichler and his imitators built houses that featured floor-to-ceiling glass walls, open floor plans, exposed post-and-beam construction, concrete slab floors and lots of sliding glass doors. “Eichler did a great thing,” Jobs told me on one of our walks around his old neighborhood, which featured homes in the Eichler style. “His houses were smart and cheap and good. They brought clean | design and simple taste to lower-income people.” His appreciation for Eichler-style homes, Jobs said, instilled his passion for making sharply designed products for the mass market.

Hu: An obvious misconception about Jobs that his enamorment with design somehow superseded, or even replaced, his commitment to either 1) the technical | aspects of development, or 2) underlying meaning of the content; after all, Jobs himself was the founder of Pixar, which makes him not only one of the most influential | designers in the 20th century, but also, one of the most | influential media executives # Moreover, in viewing over 10 hours of interview footage, that is freely available on YouTube <Mossberg, Swisher> in the D-series, hosted by Recode, one can ascertain that Jobs was intimately | concerned, as a consummate totalitarian, also, with every | aspect of architectural | decisions, and was familiar with all of the important programming languages and frameworks # of his day; his 4th competency # was a worldclass understanding of marketing psychology; put these 4 together, and you, too, can be worth about $3 trillion dollars.

One of Jobsgreatest | influences, all of this historical | context #v-t, is necessary, to understanding the original | intent, of the originators of these ideas, Frank Lloyd Wright, who worked primarily in the author’s hometown of Buffalo, NY, was one of America’s first functional designers: Kaufmann<a-r>: Throughout his career, Wright retained the use of ornamental detail, earthy colors, and rich textural effects. His sensitive use of materials helped to control and perfect his dynamic expression of space, which opened a new era in American architecture. He became famous as the creator and expounder of “organic architecture,” his phrase indicating buildings that harmonize both with their inhabitants and with their environment. The boldness and fertility of his invention and his command of space are probably his greatest achievements.

Fallingwater, designed by Frank Lloyd Wright in 1935 and completed in 1937; near Mill Run, southwestern Pennsylvania. Image courtesy Gene J. Puskar/AP Images, via Britannica.

And now, to go beyond Jobs, and even Wright, by establishing a 5th connection, scaling ourselves to the multitrillion | range #, to academic | neuroscience: Fisher et al<’22>: In healthy individuals, such unnatural stimuli generate both visual discomfort and a large hemodynamic response, Hu: where “hemodynamic” means a rush of blood to the head<Coldplay, a-r>.

The 5th connection brings about a new | conclusion: functional | designs minimize the proportion of cognitive load, the excess of which, causes discomfort, excessive burn and E-expenditure, necessitating | recovery, and, at the extremes, even seizure activity, that is allocated to processing the design decisions, and allows users, instead, more mental space, to consume the content. Moreover, the neuroscience connection, means that the quality of a functional design, can be measured | objectively, by the level of neural | activity that it induces.

Not understanding these fundamental | principles, because they 1) haven’t studied the history, and 2) they don’t understand media, like Jobs, and 3) they don’t understand neuroscience, and 4) they don’t understand geometry, or forms, most modern | web designers, operating at the level of Mr. Bellis’s 2nd grade art class, copy only the colors, pictures, the metallic, sleek | look, of the iPhone’s original interface<Apple, a-r>, but do not replicate, to any meaningful extent, any of the original | purpose, of Jobsstated | intentions, in his motions to revolutionize modern design in the direct of ease of use. As a result, users are no less confused, than before | Jobs, when most websites, looked like newspapers: [D, Murphy a-r]

H3S3: 10 principles of cognitive-sensitive func-design:

  1. Cognitive-sensitive functional design, or cognitive | design, for short, is based on a fundamental understanding of the 3 | functional components of the human brain in cognition<ch-20, 42, MIC, a-r>: visual perception, retrieval, and working memory, introducing information in a hierarchical | way that engages each system equally in proportion, and neither overloads any individual system, nor the entire system #
  2. Scientific readability: Strasburger : d=0.5 φ, where d is critical distance—the minimum | distance between target and flanker below which crowding occurs—and φ is eccentricity in degrees | visual angle. Hu: Tips for optimal | readability, from Harvard Accessibility: For optimal readability: a) Use visual and semantic space. Space is an important | visual design tool that helps us identify groups of related content and delineate unrelated content. Non-visual users benefit from “space” that is created using semantic | markup (see Solid Structure). b) Provide the right amount of space between lines of text. For most content work, the interline spacing (line-height) is applied automatically. c) Use clean typography. Avoid changing the typeface from that specified by the website. d) Avoid using all caps. Readability is reduced with all caps because all words have a uniform rectangular shape, meaning readers can’t identify words by their shape. e) Don’t underline text. Reserve underlining for identifying links. f) Use left-aligned text. A consistent left margin makes reading easier. g) Don’t put two spaces after a period. Period. h) Support text resizing. Check how your content responds to enlarged text. Avoid using narrow columns of content because they will not respond well to scaling.
  3. Reasoned decisions: Cognitive design is driven by reasoned | decisions made not only from a “design perspective“, but also, to concretely, in a quantified | manner, support principles of customer service, marketing, and financial | accounting. Segments of design, as well as interactive | click-throughs #, need to be defined through a financial | vector, such that it is known # which financial | vector is expected to be Ed when that segment is changed, and this definition, for granularity in a/b testing. Gallo<2017, a-r>: To run the test, you show two sets of users (assigned at random when they visit the site) the different versions (where the only thing different is the size of the button) and determine which influenced your success | metric the most. In this case, which button size caused more visitors to click? Hu: Each | implementation decision comes down to 2 factors: 1) engineering time, and 2) business value; in both cases, a reasoned decision can only be made, if the engineering time is quantified, in man-hours, and the business value, in financial | dollars. A nightmare product owner is one who insists on features, based purely on their own preference, and the best developers, tend to run away from this biased | irrationality. Gallo<a-r>: “The A/B test can be considered the most basic kind of randomized controlled experiment,” Fung<applied analytics program at Columbia University> says. “In its simplest form, there are two treatments and one acts as the control for the other.” Fin.v-1
  4. Branding coherence: MIC<ch.19-H2S2,H3S3.H4S1>: When a business is thought of as an individual and the term “branding” made to be analogous to the idea of “reputation”, one may be triggered to think about the concept that an individual’s own social circle accounts for about half of that individual’s reputation, independently of the individual’s own actions. Hu: Design must be coherent with branding, and, by not introducing any novel elements, this also minimizes the cognitive | load for users. MIC: Regardless of the style and organization of the business, customers will, for the sake of an efficiency reduction in their own mind, categorize the brand that they are doing business with #defd as a singular entity, and therefore it is useful for the business to think of themselves in the customer’s | mind, that singular | entity, as an individual. == This style of thinking is associated with | | human-centric | design |, a hot | topic of research in 2018-22 product design, but was originally launched and developed by Apple Computers Inc. back and before #defd the 1980s. The Wikipedia primer <ref: Human-centered design a-r> on the topic traces the academic history of this concept all the way back to the 1950s and 60s. The delineation between human-centric design and its alternatives is that it posits the design of an entire | product or an organization around the | | experience | of the end customer | of that organization, rather than thinking first about various internal issues within the organization, based on the understanding that the purpose of an organization is to provide useful value to the society that surrounds it. == A human-centered | business will base its decision | making and product pipeline around what is currently the biggest pain point for customers, and such pain points can be discovered through various implementations of feedback cycles and reporting pipelines. In contrast, a non-human-centered business will either ignore customer complaints completely and / or have a detached system of calculating what it perceives as beneficial to its top and bottom lines and make decisions with respect to that calculation with no regard for the customer experience. This approach is, obviously, fallacious and will always be exposed by the marketplace in the long run because ultimately, it’s customers’ input in sales #defd that provides the funding for the company’s operations. == The most convenient form of a business’s identity is to act as a singular, coherent unit to customers and to align the internal operational algorithms of all employees to that identity, such that a single, coherent personality can be presented and experienced by the end user. In contrast, companies in which internal vision is not aligned will come across to the customer as disjointed, sloppily organized, and insecure, which devalues the business in the eyes of the customer. In the presence of an | | economy | with competition |, a misbranded business is at risk of being replaced by a competitor that offers an analogous service but provides a better overall customer experience. Fin.v-1
  5. Modularity, responsiveness, and scalability: While I do not with free themes, I am willing, at the rate of 3 elements per page, copy, with respect to copyright law, specific | elements of existing | themes, at the client’s request, from high-quality | curated websites, such as Theme Forest<a-r>. The elements must be easily | replicated with Gutenberg<H3S4>, because, if not, then, it’s quite likely, that that feature, even if it’s “just-design“, in addition to the time to implement, will cause architectural | issues, and limit the overall scalability. Fin.v-1
  6. Facilitation of retrieval pathway triggering: MIC: Brown <a-r>: Whichever theories science eventually | tells us are correct about how repeated retrieval strengthens | memory, empirical research shows us that the testing effect is real – that the act of retrieving a memory changes | the memory, making it easier to retrieve again later. Hu: The main reason to have a website is marketing, and marketing is a form of pedagogy; the idea, under the linear | progression of logic<a-r>: if we believe our product is a good idea, and we ourselves are the users #, then, naturally, our users, will, eventually, come around to the same | idea, if they understand what we know. Therefore, marketing is the process of teaching users why our product is valuable, useful, and necessary, and design is designed to | maximize the rate of this pedagogy, allowing us to onboard | users at the lowest | cost and time. Brown<a-r, #v-t>: Effortful retrieval makes for stronger learning and retention. We’re easily seduced into believing that learning is better when it’s easier, but the research shows the opposite: when the mind has to work, learning sticks better. The greater the effort to retrieve learning, provided that you succeed, the more that learning is strengthened by retrieval. Fin.v-1
  7. Limitations enable creativity: this article is probably the most negative | piece of writing that you’ve read on WordPress, but it’s in line, with the opinion, of most qualified | WordPress developers, and the team itself. My credentials speak for themselves, and one the secrets behind the immense | scalability of Distractify.com<45-mil visitors, April-2014!> is our realistic | view of what is possible, with each | technology; by understanding what is possible, what is extraneous, and what is not | possible, one can prime one’s psychology to look for opportunities, rather than be paralyzed | by indecision; over time, you’ll be a mile ahead of your competitors, who are still sinking their time, and millions of dollars, into wasteful, ad-hoc | features; in this paradigm, you will never start a project, that is not finished; this is a 600 year old chess technique, of the mind. Fin.v-1
  8. //cont.v-2

H3S4: WYSIWYG=”What you see is what you get”:

WYSIWYG was a buzzy | paradigm in the 2010s era of design, heralded as a simple | paradigm that could enable even non-technical users, such as the doctor owner, to himself make changes to a website. However, it must be remembered # that all website | changes, from text | edits to block | additions, make reflected | changes in code, and, therefore, one will always benefit, from foundationlevel technical knowledge. In short, one must be aware # of the magnitude of the change that is making, because there is not always # a 1:1 correspondence between the magnitude of the visual change, and the magnitude of E on the architecture; most design | conflicts occur, between product owners and developers, when a subtle | change requires massive changes, or breaks the architecture, and also, breaks the efficiency principle. In such cases, it is recommended that the feature is valuated in $<H3S3>, and only in cases in which the value is justified, should the avantegarde feature be deployed.

H4S1: WordPress Gutenberg:

H5S1: Introducing Patterns<’22>, a novel | merger of a) modular | design, b) WYSIWYG, and c) open | source. WordPress<a-r>: Patterns are collections of pre-arranged | blocks you can assemble to make your content impactful, meaningful and appealing. In the block editor, block patterns are predefined groups of blocks that you can insert into posts, pages, or custom post types. Block patterns include individual blocks – like the paragraph block, button block, or image block – that are then grouped together into a predefined layout. You can use block patterns with individual blocks when writing a post or page for your site. Hu: Patterns can be found in a galleried | view on WordPress’s official | website, in a WYSIWYG | presentation, to insert a pattern into one’s website, open a post, or page, as they use the same | editor #, copy the pattern from the gallery, and simply CTRL+V, with the cursor selected, on the insertion point. Below is an example, from WordPress.org:

An illustration of white flowers and insects.


Bees are some of nature’s most adept pollinators. They collect pollen in small sacs near their legs, dropping some along the way to help fertilize flowers.

An illustration of yellow flowers and insects.


Bees aren’t the only pollinators. Insects such as butterflies, moths, bee flies, mosquitoes, and even ants fertilize flowers as they travel around your yard.

Gutenberg as a G-doc:

Bees are some of nature’s most adept pollinators. They collect pollen in small sacs near their legs, dropping some along the way to help fertilize flowers. Hu: Gutenberg, by my estimation is a glorified Google doc, with a few more frills, presets, slightly less autonomy to adjust text properties and line spacing, and with clickable | images. [D], ch.19-CM,H3S1.H4S4

Hu: Clicking a block within the pattern, and selecting the vertical | dots on the right | edge of the popup | toolbar, then additional | settings will, on desktop, bring up # customization | parameters, that edit, only, that block.


Hu: Clicking a block within the pattern, and selecting the vertical | dots on the right | edge of the popup | toolbar, then additional | settings will, on desktop, bring up # customization | parameters, that edit, only, that block.

Hu: Two patterns are included above, one from the template, and the second, edited, with custom | images # and text. WordPress<a-r>: We can extract a few key principles from this:

  • Authoring rich posts is a key strength of WordPress.
  • Blocks will unify features and types of interaction under a single interface. Users shouldn’t have to write short-codes, custom | HTML, or paste URLs to embed. Users only need to learn how the block works in order to use all of its features.
  • Make core features more discoverable, reducing hard-to-find Mystery meat.” WordPress supports a large number of blocks and 30+ embeds. Let’s increase their visibility.

H4S2: Limitations of WYSIWYG:

Contrary to folk | belief, WYSIWYG does not mean “anything is possible“; WYSIWYG editors are, themselves, hard-coded, generally, by some of the best | engineers at WordPress, because WYSIWYG itself, is an extreme | technical challenge. One can assume, therefore, that any WYSIWYG editor has already been pushed to its contemporary | technical limit, and, therefore, any stretching of its limitations, without an adequate-size engineer-team, at least within an order of magnitude of $3-bn Automattic’s, is unrealistic.

H3S5: CSS=Cascading Style Sheets:

H4S1: Compensatory CSS workflow:

1) Use Inspect to add or modify the relevant | CSS class, and confirm, that the resulting page, looks, as desired 2) Use the detective | path <WordPress, a-r> to find the correct file, if not Additional CSS in Appearance==>Customize, to insert the class. In WordPress, the style.css under use is stored in the /wp-content/theme/[theme-name] folder. H5S1: The brute | delete | method: mass delete entire categorical lines, in Inspect, until your style disappears, then you know, it was there.

H4S2: Additional CSS: WordPress:

The additional CSS menu in Admin==>Appearance==>Customize


CSS is theme-specific, so all of your CSS is moved to a revision when you change themes. To review or restore past CSS, use CSS Revisions.

H4S3: A sad example of CSS in themed | WordPress:

Hu: In WordPress, CSS is inseparable from the concept of a theme, such that # all CSS, on your website, is tied to the theme. ZANDY<a-r>: footer.entry-meta {visibility: hidden;} ==> The “footer.entry-meta” piece specifies what content we’re talking about, while the “visibility: hidden;” piece tells the theme not to display the content. The “visibility: hidden;” part of the CSS is a general command and would be useful in almost any theme, but the first part (footer.entry-meta) will vary depending on your own theme; every theme is slightly different. womp womp 🙁

H4S4: Site Editor, the Messiah of broken WordPress CSS “implementation”:

Hu: Site Editor, introduced on WordPress’s | Twenty Twenty theme series, is WordPress’s answer # to their own Gutenberg, after the ’22 revelation<fbno> that a website’s header and footer have equal | weight to its content area # WordPress: The Site Editor brings a whole new level of control when editing a WordPress site. While it’s possible to edit your site’s overall structure (i.e. the templates) as well as the content of individual pages and posts, we recommend following this advice: When you want to edit your site’s overall structure (i.e. areas like headers, footers, and the structural appearance of your pages and posts), use the Site Editor. When you want to edit the content of your pages (i.e. text, images, embeds, and more), edit those pages individually by going to your dashboard and selecting Pages. Hu: The workflow | benefit<fbno> of Site Editor, like its predecessor, Gutenberg, for posts, is that it offloads coding capacity from the WordPress developer to the platform, allowing a larger proportion of changes to be completed WYSIWYG # rather than with code snippets. H5S1: Template | editing, with site editor: Hu: the thematic | aspect of any use of Site Editor, as opposed to Gutenberg, is that any change will affect an entire | category of pages, if not the entire | site. H5S2: Templates vs template | parts: [D], via /wp-admin/site-editor.php?postType=wp_template_part #, Hu: template parts are components of templates that, if edited, will be updated, as well, in all templates, as well as pages that use those templates #, as a form of meta or component | template. Eg: header, as a template | part or component. Under this paradigm, multiple header options # can be generated, and used one per template, marking an improvement in customizability, to pre.Site-Editor.

H6S1: Swapping template | parts in templates: Hu: template | parts should be edited in the associated | category, rather than on the page, in which they are implemented #best-practice. Next, to swap in a template part, into a template, click on the area of the page in which an existing templatepart exists, or you would like to, and click “replace“; a list will be pulled up, analogous to swapping out in an image | container, from the media | library, of existing template | parts, of the same part | category [D, 2]:

H5S3: Global | changes: global | changes are made via the Site menu | item, but this feature is clearly incomplete, as there is a lack of consideration for what can be global, on customized page websites #, as of 9/22. H5S4: Styles: [D], via Bal<’22>: Hu: Coming full | circle, WordPress has recognized that # the Site Editor is best | deployed in conjunction with editing CSS styles, and this styles WYSIWYG can be accessed, by clicking on the non-sensical | half-moon icon on the top-right | corner.

H6S1: Categories of edits that can be made, with the styles editor: a) typography, including i) font size, ii) appearance | type iii) font family, iv) line height #, and v) text | color, including link | color, b) background | colors, c) margin sizes d) block | styles H5S5: Global | block styles: the only | viable menu option, deceptively, in the styles menu, presently, is the block styles, and the settings, for each type of block # that is available on the site, in general, resembles the editor for blocks, individually, in Gutenberg H6S1: Case study: using the style editor to change the global paragraph text size from 16-pt to 14-pt. Workflow: WP-admin==>Appearance==>Site Editor==>Styles==>Blocks==>Paragraphs. It’s unfortunate that paragraphs, reflecting | paragraph | text, is considered a block, rather than an aspect of typography, contrary to established | text.editor-standards #sued In the typography sub-menu, a custom | size can be set, for all | paragraph text H6S2: Additional | CSS changes can be made, on the block | level, at the bottom of the settings menu.

H5S6: Using Site Editor to change margin | settings for the site-wide | header: WP-admin==>Appearance==>Editor==>Template-parts==>Header, select the header block, and change the Dimensions==>Padding | values. H5S7: Creating and duplicating templates: in order to provide custom menus to logged-in users, we have to create a varied template part, from the template part of the logged.out-header, and this can be done, by # entering the edit window for that part, and selecting the entire header, and selecting:

This convoluted # workflow indicates suspect scalability in design, as one would expect, on the category page, a simple duplication feature, as they have, for in-page duplication. Subsequently, to create a new template, for the home-free, in which to insert # this menu-free, we have to # enter the page editor, of the page we wish to duplicate, and, in the sidebar, with the Page rt Block menu selected, click “New”, under templates, to create a template, based on this page. Again, the lack of ability # to duplicate an existing template, signals fundamental flaws, in the design.

H6S1: Insertion of the template part, to the template: we’re not done yet. Next, you need to # use the block inserter, within the Site Editor, to add the container, for your template part, and then select the correct one, from the menu, into that template. H6S2: Application of the template to the page: the last step, in order to actually propagate this change, to the page that is displayed to users, is to select the created template, from the dropdown menu, in the Template block, of the menu sidebar, in the page editor, of the page: <x-ref WordPress, a-r> H6S3: Copying the header design: it’s important to remember # that the header, and the block around it, is not the menu, which is a separate element, that is managed, independently; with the entire header block selected, we can use the copy | option, which will keep the menu on the clipboard, even when we bridge to another | page:

Copy allow us to propagate an entire block, even to another page.

H6S4: The menu | navigation | block, in the header, contains an advanced screen, in which its name can be edited:

H6S5: Total | accounting: In order to enable # the feature of custom menus, on a per-page basis, we need: 1) 3 menus, differently named, 2) 3 different header template parts, 3) 3 different page templates, for that page, in which each template part is inserted, 4) 3 different pages, in /edit.php?post_type=page, 5) separate access management, for a total of 15 elements, and +n*5 for each n menus.

H4S5: Syntax of CSS:

H5S1: History: Wikipedia<a-r>: CSS was first proposed by Håkon Wium Lie<b-1965, Norway> on 10 October 1994. At the time, Lie was working with Tim Berners-Lee<b-1955, co-founder, World Wide Web, Oxford, MIT a-r> at CERN<Conseil européen pour la recherche nucléaire>. Several other style sheet languages for the web were proposed around the same time, and discussions on public mailing lists and inside World Wide Web Consortium resulted in the first W3C CSS Recommendation (CSS1) being released in 1996. In particular, a proposal by Bert Bos was influential; he became co-author of CSS1, and is regarded as co-creator of CSS. Style sheets have existed in one form or another since the beginnings of Standard Generalized Markup Language (SGML) in the 1980s, and CSS was developed to provide style sheets for the web. One requirement for a web style sheet language was for style sheets to come from different sources on the web. Therefore, existing style sheet languages like DSSSL and FOSI were not suitable. CSS, on the other hand, let a document’s style be influenced by multiple (!) style sheets by way of “cascadingstyles. H5S2: Malan<a-r>: Malan: Inside of my style tag, it is allowed to use what’s called a CSS selector. And there’s different types of selectors, but the one we’re seeing now is what’s called the type selector. And it’s a bit arcanely named, but this just means that if you want to style <1:44:31> every instance of a certain tag, every header tag, every main tag, every footer tag, you can literally, inside of a style tag, put the name of that tag, then a pair of curly braces— apologies, they are back for CSS–and then inside of those curly braces, you just put those key value pairs, the properties separated by semicolons. And I’m stylizing it nice on separate lines just so that it’s a lot more readable. The effect is not going to be any different. H5S3: Hu: CSS is separate from HTML, but entirely dependent on it, and augments the assignment of properties by classes, such that a property does not need to be individually assigned, to every line, of that instance, under the associated | tag, in HTML code; therefore, what can be done with CSS can also be done in HTML, but more tediously H5S4: Hu: CSS can be inserted directly into a .html file, or loaded from a .css file, using a call, from an .html file.

H4S6: Directory of CSS property pairs:

H5S1: //

// import to ch-47: when done


Isaacson, Walter, for: Magazine, Smithsonian. “How Steve Jobs’ Love of Simplicity Fueled a Design Revolution.” Smithsonian.com, Smithsonian Institution, 1 Sept. 2012, https://www.smithsonianmag.com/arts-culture/how-steve-jobs-love-of-simplicity-fueled-a-design-revolution-23868877/.


Mossberg, Walter, and Kara Swisher. “Steve Jobs in 2010, at D8 Conference (Full Video).” YouTube, YouTube, 8 Feb. 2015, https://www.youtube.com/watch?v=i5f8bqYYwps&ab_channel=VideoInsider.

Kaufmann, Edgar. “Frank Lloyd Wright”. Encyclopedia Britannica, 6 Sep. 2022, https://www.britannica.com/biography/Frank-Lloyd-Wright. Accessed 24 September 2022.

Fisher, Robert S., et al. “Visually Sensitive Seizures: An Updated Review by the Epilepsy Foundation.” Epilepsia, vol. 63, no. 4, 2022, pp. 739–768., https://doi.org/10.1111/epi.17175. 



Murphy, Mike. “You Can Now Browse the Web like It’s 1999 Again.” Quartz, Quartz, https://qz.com/572992/you-can-now-browse-the-web-like-its-1999-again/.

Hu, Yakun: Material in Chess ’22.


BROWN, PETER C., and Henry L. Roediger. Make It Stick: The Science of Successful Learning. BELKNAP HARVARD, 2014. 

Linear progression of logic (n.) = a theory within logic theory that all conclusions are the premises of subsequent arguments, that all conclusions can be traced back to an original argument, and that all knowledge therefore exists within this linear progression. Deduction (n.) = Logic is a method for advancing arguments from premises.  Inevitable progression of logic (n.) = a theory within logic theory, one of the proposed conclusions of the linear progression of logic theory, an idea that all conclusions are inevitable if one follows a particular line of thinking; Ex. Agent A has been down the line of thinking that is typically required of someone before they agree that it’s a good idea to join the FBI. Agent B has been down the same path. Agent A recognizes that Agent B has, due to the inevitable progression of logic, reached all of the same conclusions that he did along this particular line of thinking to agree that it’s a good idea. <r: ch-8, Material in Chess>


Gallo, Amy. “A Refresher on a/B Testing.” Harvard Business Review, 27 Nov. 2017, https://hbr.org/2017/06/a-refresher-on-ab-testing.


Strasburger H. Seven Myths on Crowding and Peripheral Vision. i-Perception. May 2020. doi:10.1177/2041669520913052











http://www.csszengarden.com/: WordPress: “a showcase of what can be done with only CSS to change the appearance of one single HTML file.”

ZANDY: August 29, 2013: https://wordpress.com/dailypost/2013/06/21/css-intro/

https://jigsaw.w3.org/css-validator/ W3C: Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.

Official inspo: https://wordpress.org/showcase/

https://wordpress.com/support/site-editor/ WordPress: Before the Site Editor, many fundamental elements of your site’s design (like the header, sidebars, page content, and more) were all determined by your theme. With the Site Editor, you have access to a whole new level of control over how your site looks! 😛

  • https://wordpress.com/support/using-styles/
  • https://wordpress.org/support/article/styles-overview/

https://wordpress.com/themes/filter/full-site-editing Hu: So far, only 1% of themes support the Site Editor, still in Beta, but since this feature is inevitable, it’s best to jump on board the adoption | curve as early | as possible.

Bal, Mike. “How to Use Styles in Full Site Editing on WordPress.com.” WordPressdotcom, YouTube, 18 Feb. 2022, https://www.youtube.com/watch?v=JykMZ1Z8T-k&t=134s&ab_channel=WordPress.com.

https://www.w3.org/Style/CSS/Overview.en.html Wikipedia<a-r>: The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.




Malan, David J. “CS50 2020 – Lecture 8 – HTML, CSS, JavaScript.” CS50 HarvardYouTube, 31 Dec. 2020, https://www.youtube.com/watch?v=5g0x2xv3aHU&ab_channel=CS50.



https://blocks.wp-a2z.org/oik-plugins/: contains themes, that have blocks, and pattern templates: https://blocks.wp-a2z.org/about/fse-themes-summary/

https://wordpress.org/themes/tags/full-site-editing/: themes that have full site editing, or Site Editor, enabled.


Leave a Reply

Your email address will not be published. Required fields are marked *