How to Learn CSS ✳
In Rachel Andrew's How to Learn CSS, she writes about terminology and tips on how to learn CSS in a proper and organized way. I've narrowed down three skills that would be helpful for learning and using CSS. The first is to stay
organized. CSS literally stands for a cascading style sheet. This means there is a natural flow of elements by default. One attribute I have always been using was position: absolute. Now although I have been using This as my main positioning
attribute for all of last semester, I never really understood how once it is applied, the element it is applied to is immediately immune to the natural flow of html.
Another thing I would recommend for learning CSS from this website is to learn terminology. I still don't quite understand the parent/child examples she provided within the text via codepen. I understand the basics of appending a child
element to a parent container in javascript, however the usage in CSS might be different. Hence, why I think learning the terminology and how those systems work is extremely important. Another term she mentions is "block flex". She refers to
these attributes for a display tag to explain how block refers to the relationship of the element with other elements on the page, while flex refers to the elements within that element. This is good for when you need to carefully position
elements on a page and preferably make it responsive.
The last thing I think is an essential skill to help use CSS is understanding a grid or flex box system. I am unsure of how properly I have been using a grid system in my Creative Computing class last semester, but we used many divs within a
div labelled container. I know of websites that offer flex box templates such as frameworks or bootstraps, but I have yet to use them for my own work. I think positioning is much easier when you make yourself aware of these concepts Andrews
mentions in her article. She specifically says ”CSS is all about boxes”. Positioning becomes much easier when it adheres to a grid system.
Another tip to add in CSS grids and flex boxes is that margins and padding add to how much space an element takes up on the page. A way to be more aware of this is with a tool she mentions I have not known about before. Andrews recommends
DevTools. This is accessible when you inspect elements and it helps see the anatomy of a page in relation to space and grids.
The Web's Grain ✳
In Frank Chimero's The Web's Grain, he writes generally about the discouraging atmosphere enveloping the people working in technology today. Constantly being surrounded by “attention-greedy services” and the rise of surveillance
technology, everything seems to be stressful. In particular, I heavily agree with what he said about how systems now reinforce existing inequalities rather than working against them. The rise of technology, in my opinion, should encourage
liberation rather than oppression.
Due to this, Chimero writes about how he wants to step back, and re-engage with this craft of web design. Chimero mentions a concept that John actually had talked about yesterday: “The beginner’s mind”. Everything is what it is on the
surface. And it holds just as deep of a significance and important than if you were to practice for a very long time. In fact, John said he liked the naivety of the designs that you produce when you first dip your feet into web design.
Based on what Chimero wrote revolving around the web’s natural functions, I would describe the materiality of the web to be forgiving, and always evolving. I think it is highly manipulative, and I agree halfway with Chimero. As an example,
Chimero looked down upon Apple’s Mac Pro websites. Although I use Apple Products, I’m not the biggest fan of the corporation and what they stand for, making me the biggest hypocrite in the world-- But I digress. I still think the Mac Pro
website is beautiful, informative, incredible responsive in a way that is different than Chimero’s ideal concept of responsiveness. I can agree that the web was created with a natural function in mind, but I do not consider the evolution of
its materiality as technology advances to be “bad taste” in the way Chimero seems to be doing with the Mac Pro website. He claims that Apple’s work counters the inclinations of the web. However, I understand that he has been around since the
public internet had been introduced, but I think the materialy and grain can change over time and accordingly with the public.
What We Mean When We Say "Responsive" ✳
In reading “What we mean when we say “responsive” by Lyza Danger Gardner, I find that she opens up a conversation about the definition and controlling of the definition of “responsive”. I think we can all agree that responsive, in general
terms of web design, means the process of making something adaptable across multiple platforms. I agree that many people end up using the term “responsive” synonymously to accessible, adaptive, and device-appropriate. I also see her point in
having the ability to ‘control’ the word and its definition. I feel like with anything related to technology, as these are relatively new ideas and concepts in the world, should still be able to adapt as we curate this relationship with web
design for longer.
In other words, it makes sense to keep the definition of the term “responsive” to be, well, responsive. It should adapt to the technology of coding and web design, and continue to be morphed by users to what we seem fit. Until then, and with
the background of this reading, it seems clear to me that we all have a similar understanding of the word and the direction of its definition to be going.
What Happens When you Create a Flexbox Flex Container ✳
In “What Happens When you Create a Flexbox Flex Container?” By Rachel Andrew, she starts to introduce the use of a flex box, and unpacks many properties that come with changing the ‘display’ to ‘flex’. This was particularly helpful to
read about this week, as I was thinking of reorganizing my reading responses in the form of a scrolling blog post. The ‘column-reverse’ flex direction was the perfect layout option for me to consider. I am still unsure about the concept of
flex boxes, are they their entirely own part of css? I think I am still not clear on the differences between a responsive grid vs. flexboxes, or if a flexbox is just simply that. In what times would you not use flex boxes, then? If what we
are striving for in this curriculum is to make responsive, accessible design, why would we not use a flex box?
Rachel Andrew’s pieces on css properties are way more in-depth than a quick google search and getting codepen, w3schools, and css-tricks results. However in this depth, I find answers to get lost in her words. I find that the purpose of her
readings are to learn something new about css, but I find more to-the-point sources to be more helpful. Even having read two articles by her, I’m still lost in the vocabulary of pseudo-selectors and cross-axis alignments. I will say that this
one, because it is more specific, compared to the first week’s reading, was easier to grasp. I understand now how flex boxes can be manipulated: in order, in orientation, how the text inside the boxes align with the orientations, and so on.
Strategies for Energy Efficient Websites ✳
1. Resize image if needed, to be the maximum size you’d want it to be on the web.
2. Black and white halftones store least amount of data.
3. Maybe no custom fonts, default sans-serif, serif, cursive, etc., would work best.
4. Have images load as you scroll to it instead of while the whole page loads (using javascript).
5. Logo can be made typographically with default settings.
6. Dithered images.
7. No third party tracking.
8. No cookies.
9. No advertisements.
10. Run on a self hosted server.