-
Notifications
You must be signed in to change notification settings - Fork 0
/
journal.html
78 lines (77 loc) · 8.79 KB
/
journal.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width initial-scale=1'>
<link rel="stylesheet" href="styles/main.css">
<title>Journal</title>
</head>
<body>
<h1 id='journal'>Journal</h1>
<h2 id='2022'>2022</h2>
<h3 id='winter-1'>Winter</h3>
<h4 id='9-feb-☀︎'>9 Feb ☀︎</h4>
<h5 id='experimental-web-development'>Experimental web development</h5>
<p>I’ve been experimenting with my test website these past few days. I had in mind:</p>
<p><strong>Implementing local live weather icons through an API</strong></p>
<p>Way too complicated for me right now.</p>
<p><strong>Reducing image sizes</strong></p>
<p>I remember feeling drawn to the image on LOW←TECH MAGAZINE, so I checked their <a href='https://homebrewserver.club/low-tech-website-howto.html#image-compression'>Image compression</a> process. It seemed promising but the actual way of doing it was obscured to me, so I looked for simple <em>drag and drop</em> options. I think <a href='https://doodad.dev/dither-me-this/'>Dither Me This</a> was the first option I found. It looked awesome! But the size values I was getting were all over the place. I felt like I was missing some basic understanding of how these image transformations work.</p>
<p>I read a few articles about why we <a href='https://endtimes.dev/why-you-should-dither-images/'>should</a> and <a href='https://www.simplethread.com/why-your-website-should-not-use-dithered-images/'>shouldn’t</a> use dither images and a <a href='https://opguides.info/posts/lowbandwidthimages/'>guide</a> with some extra insights. </p>
<blockquote><p>I guess for illustrations, no dithering + jpeg compression or using the <a href='https://developers.google.com/speed/webp/'>WebP</a> format are the best options.</p>
</blockquote>
<p>For a simple conversion to .webp I’m using the following code based on the <a href='https://developers.google.com/speed/webp/docs/cwebp'>relevant documentation</a>.</p>
<pre><code class='language-shell' lang='shell'>cwebp -q 75 input_file -o output_file.webp</code></pre>
<p>It was a fun afternoon!</p>
<p><strong>Choosing a font family</strong></p>
<p>Yesterday I was checking Practical Typography and after considering some of their <a href='https://practicaltypography.com/free-fonts.html'>points</a> I think I’ll start with <a href='https://bboxtype.com/typefaces/FiraSans/#!layout=cascade'>Fira Sans</a>. Plus, I’m starting to understand how to use CSS <strong><code>font-variant</code></strong> to enable OpenType features like small caps.</p>
<h4 id='8-feb-☀︎'>8 Feb ☀︎</h4>
<h5 id='a-handmade-web'>A handmade web</h5>
<p>Read an <a href='http://luckysoap.com/statements/handmadeweb.html'>evocation for the <em>handmade web</em></a>, a personal and historical journey through mid-1990s web. I feel like I have enough interest on the practical side of making a website – I just lack experience. Enough examples and references have been linked on the relevant Are.na channel.</p>
<h4 id='2-feb'>2 Feb</h4>
<h5 id='resting-and-learning'>Resting and learning</h5>
<p>I left the Champalimaud Foundation 2 days ago. These next few days will be for resting and finding balance in the domestic routines of my life. Next week I want to return to my portfolio and start contacting studios.</p>
<h5 id='creative-coding-with-p5js'>Creative coding with p5.js</h5>
<p>I’ve tried coding many times in the past, including creative coding with Processing. This time feels different because I have a clear goal, recreating a simple gif. I imagine myself being able to apply what I learn to flexible visual systems. </p>
<h2 id='2021'>2021</h2>
<h3 id='winter-2'>Winter</h3>
<h4 id='21-dez'>21 Dec</h4>
<h5 id='identity-crisis'>Identity crisis</h5>
<p>I watched the video <a href='https://www.youtube.com/watch?v=if5YMnNKcNw'>3 Types of Identity Crisis</a> by Tom van der Linden which made me feel safer about all these disjointed thought on my path as a person that creates visual things. It was also a reflection of difficult but revealing conversation I had with Pietro about my relationship with empathy</p>
<h5 id='more-design-books'>More design books!</h5>
<p>I got enumerated with a book about <a href='https://flexiblevisualsystems.info/'>flexible design systems</a>. It’s a way of thinking about visual communication that seems fantastic to me. I really want to learn more about it.</p>
<h5 id='my-future-on-the-web'>My future on the Web</h5>
<p>Pietro showed me <a href='https://thewebisfucked.com'>The Web is Fucked</a> website. I never experienced those “golden ages” of web 1.0 but I enjoy the kinds of ideas and spaces these people share and build. I want to learn how to be part of that. I think I’m missing a community.</p>
<h3 id='autumn'>Autumn</h3>
<h4 id='2-dez'>2 Dec</h4>
<h5 id='new-books-on-learning-and-design'>New books on learning and design</h5>
<p>A few days ago I started reading the book <a href='https://sites.utexas.edu/lsjcs/files/2018/02/Teaching-to-Transcend.pdf'>Teaching to Transgress</a>. It’s one of the pdf books I have just standing around on my devices. I’m curious about how it connects to my experience of learning illustration and design.</p>
<p>Today I started reading <a href='https://www.cooperhewitt.org/publications/design-and-social-impact/'>Design and Social Impact</a>, I’m hoping it will explore examples of how to use visuals and design thinking to solve social problems. I’m getting more and more invested in this topic as time goes by. It feels like the obvious mix between my interests and practical skills.</p>
<h4 id='25-nov'>25 Nov</h4>
<h5 id='revisiting-digital-gardening'>Revisiting digital gardening</h5>
<p>I had a conversation about making a company website builder from scratch, one that took Markdown files as content. It made me remember all the resources I had <a href='https://www.are.na/diogo-matias/a-digital-space'>saved</a> on the topic, which I revisited. This lead me to the idea of web gardening again and so here I am taking notes. I guess I would like to add them to a <em>journal</em> subdomain eventually. For now it can serve as English practice.</p>
<p>Most of my gardening has been done on Are.na, but those are just seeds with little context. I can create context by adding notes on the seed here.</p>
<h4 id='30-oct'>30 Oct</h4>
<h5 id='learning-english-and-design-as-a-social-tool'>Learning english and design as a social tool </h5>
<p>I’m starting english classes soon, the goal is to leave the plateau. </p>
<p>Learning more about design, illustration and animation will make more sense if it’s for me but also for a cause I believe in.</p>
<p>A few days ago I read a conversation about a <a href='https://partnerandpartners.com/'>design studio</a> that operates with no hierarchy. I want that for myself one day, it contrasts so much with what I experience.</p>
<h3 id='spring'>Spring</h3>
<h4 id='22-april'>22 Apr</h4>
<h5 id='a-web-surfing-session-on-plants'>A web surfing session on plants</h5>
<p>A while ago I read a <a href='https://manuelmoreale.com/the-internet-game'>blog post</a> that talked about keeping track of our link paths when surfing the web. It posed like game:</p>
<ul>
<li>Step 1: find a site you like as your starting point;</li>
<li>Step 2: browse it until you find a link that spikes your interest;</li>
<li>Step 3: follow that link to a new site;</li>
<li>Step 4: repeat the process until you've connected x sites.</li>
</ul>
<p><a href='https://www.theatlantic.com/culture/archive/2021/04/dark-side-houseplant-boom-nature-empathy/618638/'>The Dark Side of the House Plant Boom</a> → <a href='https://www.penguinrandomhouse.com/books/667161/the-nation-of-plants-by-stefano-mancuso/'>The Nation of Plants</a> → <a href='http://www.linv.org'>International Laboratory of Plant Neurobiology</a></p>
<h2 id='2019'>2019</h2>
<h4 id='unknown-date'>Unknown date</h4>
<h5 id='thoughts-on-drawing-and-colour-changes'>Thoughts on drawing and colour changes</h5>
<p>The natural feel of pencil on paper as a starting point is important, it is still the faster way for me to get ideas out and I should do it more often. The trace and line are different according with the type of drawing I’m making—from the mind or observational.</p>
<p>Having the creamy white of the page already there to play with. I like to start with the shapes and 2–3 levels of greys, maybe a dark pen for the black.</p>
<p>Color is still a challenge, the sunsets and rises interest me because it feels like the color of the air itself changes, as a volume. I guess this is part of what the atmosphere as a whole does to light and color. Learning how that works in a physical sense and practicing illustrating it from pictures or real life should help me understand some of the rules.</p>
</body>
</html>