-
Notifications
You must be signed in to change notification settings - Fork 0
/
done.html
158 lines (143 loc) · 7.46 KB
/
done.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
<title>an@nsi: done</title>
<link href="/styles.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="57x57" href="/Favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/Favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/Favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/Favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/Favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/Favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/Favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/Favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/Favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/Favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/Favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/Favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/Favicons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script src="/highlightjs/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
</head>
<body>
<div id="content">
<div id="title">
<p><span style="color:fuchsia;">anansi@kimileta</span><span style="color:white;">:~$ cat done</span><br><span style="color:fuchsia;">anansi@kimileta</span><span style="color:white;">:~$ <blink>❚</blink></span>
</p>
</div>
<p><a href="/index.html">← back</a></p>
<h2>11.13.18</h2>
<ul>
<li>Spent exactly 2 hours fixing a bunch of Cafepress' bullshit within the constraints of how awful their site and shop editor are, getting to practice combinators, attribute selectors, coping with badly styled HTML tables, and the only acceptable usecase for force overriding styles:</li>
<pre><code>
td {
vertical-align: top !important;
}
#bodyContentTD nobr > a {
font-weight: 900;
font-size: 1em !important;
line-height: 1em;
padding: 0px 0px 5px 0px;
}
a[href*="AutSelfAdvocacy." i] {
font-size: 1.3em !important;
border-bottom: none !important;
}
.jcarousel-skin-pdp .jcarousel-clip-horizontal {
width: 440px;
height: 175px !important;
}
.jcarousel-skin-pdp .jcarousel-item {
width: 125px;
height: 150px !important;
}
#cropDialog, #miscNotes {
display: none !important;
}</code></pre></ul>
<h2>11.12.18</h2>
<ul>
<li>Learned how cool
<pre><code><kbd> </kbd></code></pre> is: All problems can be solved by pressing <kbd>Alt</kbd> + <kbd>F4</kbd></li>
<li>Configured git push via brackets</li>
<li>Solved issue of HTML code snippets displaying incorrectly by swapping < and > in the code to &lt; and &gt; </li>
<li>Notes on MDN CSS through <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors">Combinators and groups of selectors</a></li>
</ul>
<h2>11.10.18</h2>
<ul>
<li>Took notes on <a href="http://learnlayout.com/float.html">learnlayout pages 1-9</a> </li>
<li>Notes on MDN CSS through <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors">Simple selectors</a></li>
<li><a href="https://www.interaction-design.org/literature/article/feature-creep-the-bane-of-our-existence">Feature Creep, the Bane of Our Existence</a></li>
<li><a href="https://www.careerfoundry.com/en/blog/ux-design/what-is-information-architecture/">What is Information Architecture?</a></li>
<li><a href="https://www.builtinchicago.org/blog/full-stack-ux-designers-what-they-do-and-how-they-make-difference">Full Stack UX Designers: What They Do and How They Make a Difference</a></li>
</ul>
<h2>10.28.18</h2>
<ul>
<li>Finished FCC: Technical Documentation (~20min)</li>
<li>Finished FCC: Portfolio</li>
<li><strong>Finished <a href="https://www.freecodecamp.org/certification/yawnty/responsive-web-design">FCC Responsive Web Design Certification</a></strong></li>
</ul>
<h2>10.25.18</h2>
<ul>
<li>Forms need action attributes and inputs need name attributes to properly use a submit input</li>
<pre><code class="html"><form action="URL">
<input type="email" name="email">
<input type="submit"> </code></pre>
<li>Videos need a controls attribute to properly display</li>
<li>Finished FCC product landing page project (~1hr)</li>
</ul>
<h2>10.24.18</h2>
<ul>
<li><strong>Problem:</strong> Embedded Google Form dropdown displays fucked up on mobile, but removing the embedded form entirely poses an accessibility issue. <br><strong>Solution:</strong> Add
<pre><code>
#content-desktop {display: block;}
#content-mobile {display: none;}
@media screen and (max-width: 768px) {
#content-desktop {display: none;}
#content-mobile {display: block;}
}</code></pre>to CSS, wrap embed in content-desktop div. (work)</li>
<li>Learned to properly style pseudo-classes of specific link classes. For example, to style the hover state of all links with a class of "new", write selector as:
<br>
<pre><code>a.new:hover {}</code></pre>
<br>
To select the hover state of all links with a class of "new" with a parent class of "main":
<br>
<pre><code>.main a.new:hover {}</code></pre>
</li>
<li>Learned why/how to generate minified CSS. (Why = optimization, compression, faster load time. How = easy extension in Brackets.) Generates filename.min.ext.</li>
<li>Added <a href="https://highlightjs.org">highlight.js</a></li>
<li>Combined main, highlight.js, Google Fonts stylesheets to reduce call time</li>
<li>Various styling nonsense on this page
<ul>
<li>Added width constraints using vmax</li>
<li>Added space between list items using padding
<pre><code>ul li,
ol li {
margin: 0;
padding-bottom: 1.5em;
color: cyan;
}
</code></pre>
</li>
<li>Fixed title color - span doesn't break lines</li>
<li>Added blinking character using @keyframe animation</li>
<li>Reminded myself how to nest lists</li>
</ul>
</li>
<li>Learned difference between ftps and ftpes</li>
</ul>
<h3>To-Do</h3>
<ul>
<li><s>Add width constraints to this site</s></li>
<li><s>Make org shop page direct to books & merch. (work)</s></li>
<li>Set h2, h3, h4 font size using vmax/vw</li>
<li>Come back to <a href="https://learnlayout.com/clear.html">learnlayout.com/clear.html</a> because it doesn't make sense to me rn (8:21pm 11.10.18)</li>
</ul>
</div>
</body>
</html>