-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (133 loc) · 19.2 KB
/
index.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
<!doctype html>
<html lang="en-US">
<head>
<title>Watcher Joshua</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Kalam:400,700" rel="stylesheet">
</head>
<body>
<div id="logo">
<a href=""><span>Watcher</span> <span>Joshua</span></a>
</div>
<main>
<h1>Journal Entries</h1>
<!-- Article Template
<article class="post">
<header>
<h2>Heading</h2>
<time datetime="2019-03-17">March 17, 2019</time>
</header>
<div class="column-group">
<p></p>
</div>
</article>
-->
<article class="post">
<header>
<h2>Updating my own 12-year-old code</h2>
<time datetime="2019-03-19">March 19, 2019</time>
</header>
<div class="column-group">
<p>Since the beginning of the year, I have been slowly updating the website of the printing company that I work for. I have wanted to update the website for many years now, and I have started redesign projects several times on my own. I was able to evaluate the analytics to make decisions about what content needed to change and how the design should be modernized. Unfortunately, despite many hours put into them, I was never able to really get the redesign projects off the ground. I came to an understanding that if the website were ever going to be updated I would need to make incremental progress instead of trying to build a complete redesign from scratch.</p>
<p>This project has been particularly interesting for me because I coded the existing website in 2007. My memory of the project is mostly negative. Specifically, there were many other team members involved who all had their own ideas about what the website should be with little agreement. So, we ended up with some arbitrary design choices that existed just to make a single person happy. Early on, I was told that there should be no scrolling, so the height was fixed. Later, I was required to include a red sidebar on every page. When I started adding the content, I was given a list of pages to include and all of the text, but a lot of it is fluff.</p>
<p>What I did not realize until recently is that the actual code was pretty solid. I knew the website was built with fixed width because it predated the iPhone and responsive web design, so I was dreading modifying the code to become responsive. This dread is a large part of what led to me want to redesign the site from scratch. Instead, what I found is that I did a pretty good job making the project maintainable for someone in the future. It just so happens that I am once again reading my own code 12 years later.</p>
<p>The site is not yet responsive. I made some changes to the header and navigation to make them more modern (though I am impressed at how well my 2007-self built the heading and navigation in the first place). After making those changes, I realized that I was not going to get any further without changing the HTML of each individual page. I did a pretty good job in 2007, but there were still some obvious mistakes. The most notable was not including a proper page title on each page. That is, when you click the "services" section of the website, the heading at the top of every page just says "services" instead of the topic of that individual page.</p>
<p>It took me a good while to get all of the pages updated, but along the way I was able to strip out a lot of extra markup and outdated (or just bad) design ideas. As of tonight, I finally have a clean design to work with and the next step will be to make it responsive.</p>
<p>I have been pleasantly surprised at how simple it was to update the 12-year-old website, but most of all I am proud (but still shocked) at the quality of the code I wrote in 2007.</p>
</div>
</article>
<article class="post">
<header>
<h2>Learning CSS multi-column layout</h2>
<time datetime="2019-03-17">March 17, 2019</time>
</header>
<div class="column-group">
<p>I have yet to make a habit out of writing on this website, but I have not given up. I was inspired to try something new with the design this past week, so I spent some time on Saturday putting it together and testing it. The design still needs plenty of work, and I will continue to chip away at it as I find time.</p>
<p>I intend to begin writing brief posts about the projects I am working on, video games I am playing, and whatever else comes to mind. In other words, I'm going to be blogging. I'm keeping these posts brief for a couple of reasons. The first is that I hope it will help motivate me to write more often. The second is that the new layout just looks prettier that way.</p>
<p>I remember first hearing about <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">CSS multi-column layout</a> more than 10 years ago, but I had never really included it on a website. This seemed like a nice way to try it, and I like the results. There are definitely some quirks while working with it, so the columns only appear at larger screen sizes. It has been an interesting learning experience. I wish multi-column layout had the ability to float images (so I could use CSS shapes to wrap the text around them), and I wish I could make content fill multi containers automatically (instead of using horizontal rules to break up the longer posts). I know some other CSS specifications deal with these features, so hopefully they'll be a reality someday. Until then, I think I've made a good start.</p>
</div>
</article>
<article class="post">
<header>
<h2>I really need to focus on writing</h2>
<time datetime="2018-10-25">October 25, 2018</time>
</header>
<div class="column-group">
<p>A lot has happened since May. I certainly do not have time this evening to write about it all. Importantly, I have realized that I fell into the exact same pit I was hoping to avoid: I tried to focus on designing this website and stopped writing on it. It seems that every time I sit down to write, I end up working on the design. And when I start working on the design, I end up distracted and nothing gets done.</p>
<p>I will begin with a brief recap of what I've been up to. I did attend E3, as planned, and it was enjoyable, as usual. I met a few acquaintances and colleagues I had not met in person before; that is always nice. I had a brief memorable moment the day before the event began when I met Bill Trinen and Nate Bihldorff just outside the convention center. I shook their hands and shared a brief chat about the upcoming week.</p>
</div>
<hr>
<div class="column-group">
<p>After E3, I spent a lot of time playing video games. I finished some new games, like <em>Hollow Knight</em> and revisited some old ones, like <em>Ogre Battle 64</em>. I also <em>finally</em> returned to <em>World of Warcraft</em>, and I am still enjoying spending a couple hours a week exploring Azeroth.</p>
<p>For the last few weeks, I have been more motivated to work on my various online projects again. I just needed to take a break for a while. I have a new experiment in progress that I will add soon; it is not quite as presentable as I would like for it to be.</p>
<p>I am once again thinking about what to do with this website beyond just collecting my thoughts. I need to make a dedicated page for the experiments and the projects I am involved in or care about. I would also like to have a real layout for the front page. It's a little more difficult to make all of this work while I am coding everything by hand. I considered moving the hosting off of Github and on to something more traditional (and that costs money), but, for now, I have decided that the coding is good practice. Some weeks I do not do any other coding at all.</p>
<p>I think that is all I have to share today. Let's see if I can do better about updating more frequently this time.</p>
</div>
</article>
<article class="post">
<header>
<h2>Many new projects in the works!</h2>
<time datetime="2018-05-15">May 15, 2018</time>
</header>
<div class="column-group">
<p>Well, I did not do a great job of keeping this page updated for the past month, but I have been busy working on the website nonetheless.</p>
<p>I am working on designing a real layout for this blog. I've considered a few different ideas, but I think I finally have a specific idea nailed down. It shouldn't take me long to build it, so hopefully I can share it soon.</p>
<p>At the same time, I have already built a small "just for fun" demo. Shortly after my last update, I spent an evening recreating an old <a href="http://www.zeldauniverse.net">Zelda Universe</a> layout from 2001. It was originally designed with HTML tables, but I rebuilt it using CSS Grid and other new techniques. I quite enjoyed it. I am planning to spend a little more time making it truly responsive with a mobile layout. In the end, it's just a demo of how it could be done. You can view the demo at <a href="/zu3/index.html">www.watcherjoshua.com/zu3/index.html</a>.</p>
<p>I also began another project that I was hoping to have finished this month. It's a small <em>Zelda</em>-related project that has been planned for years, but it is finally getting off the ground. I will share more when it is ready!</p>
<p>A lot of my time the past month has been spent finishing some smaller projects for Zelda Universe. I published a review of <em>Detective Pikachu</em> earlier this month, and I am working on the oh-so-exciting job of navigating GDPR requirements. I am also working on an interview and potentially some other game reviews as well.</p>
<p>In gaming, my time has been occupied with <em>Xenoblade 2</em> recently. I think this might actually be the first <em>Xenoblade</em> game that I finish.</p>
<p>E3 is only four weeks away. I am excited to meet up with my friends again. It's always an enjoyable experience!</p>
</div>
</article>
<article class="post">
<header>
<h2>An interesting cross-browser testing situation</h2>
<time datetime="2018-04-19">April 19, 2018</time>
</header>
<div class="column-group">
<p>Well, I had intended to spend just a little bit of time tonight fixing up the styles on the site. I left a lot of things very plain, and I thought I could pretty it up a bit. Instead, I was informed that the entire layout was broken in Safari. Fixing it was pretty easy, but <a href="https://medium.com/@alSkachkov/how-to-load-the-latest-webkit-on-windows-962a9219c1e1">setting up a local copy of Webkit on Windows</a> proved to be more complicated than I expected.</p>
<p>I also got a bit lost for a few hours while I broke down the problem. I ended up building a <a href="./safari-grid-bug.html">reduced test case</a> (it will only look broken if you are running a current Safari/Webkit). The error seems to be caused by a combination of an auto width grid track, <code>writing-mode</code>, and <code>margin: 0 auto;</code>.</p>
<p>It has been many years since I had to decipher a cross-browser rendering problem. It was much easier this time than it tended to be in the past. It was an interesting detour, but it means that playing with pretty things will have to wait for another time. My weekend is looking fairly busy, so I may not get back to it until next week.</p>
</div>
</article>
<article class="post">
<header>
<h2>Reflecting on the past and beginning something new</h2>
<time datetime="2018-04-18">April 18, 2018</time>
</header>
<div class="column-group">
<p>Hi. I'm Joshua, but you probably already knew that if you're reading this.</p>
<p>I first dabbled in building websites about 18 years ago, in the year 2000. That's pretty hard to believe even as I type it. My first experience was with <a href="http://www.angelfire.com">Angelfire</a> (which I just learned still exists). They advertise "no coding required" today, but back then they had an HTML cheatsheet. My first experience with code was copy and pasting <code><img></code> and <code><a></code> tags from that page. It wasn't long before 12-year-old me was drawn to the Geocities page builder as an alternative to coding.</p>
<p>So, Geocities was where my first <em>real</em> websites were born in 2002.</p>
<p>I am fortunate to remember a lot of my web design journey from that time. Even without a stable Internet connection, I spent most of my summer designing new layouts for my small <em>Legend of Zelda</em> fansite. The whole story is quite long, and not really the focus of this post, but it would be worth revisiting in the future.</p>
<p>A combination of a rudimentary web design course in High School and the advice of a friend reintroduced me to coding in HTML, but now I could also use CSS and PHP.</p>
<p>Overall, I was mostly self-taught, but I needed assistance making big leaps in coding. I didn't understand how to use HTML tables until taking the course in High School, I didn't understand absolute positioning or PHP without a couple private lessons, and I didn't understand CSS page layout until college.</p>
<p>After college, my career mostly focused on graphic design (though working in the sign industry has a heavy emphasis on layout), and web design became more of a hobby. My only exposure was my continuing work in the online <em>Legend of Zelda</em> community.</p>
</div>
<div class="figure-group">
<figure><img src="ttot-screenshot.jpg"><figcaption>This screenshot is one of my earliest hand-coded website designs. It was done entirely with absolute positioning. Content was published with a simple PHP "content management system" that loaded plain text files into the center content area. This screenshot was pulled from <a href="www.archive.org">Archive.org</a>.</figcaption></figure>
</div>
<hr>
<div class="column-group">
<p>The web moves forward pretty quickly. I tried to stay relatively informed about major things that were happening, but I did not learn many new things for almost 10 years.</p>
<p>Unfortunately, it took me almost 10 years to realize that. So, in late 2017 I resolved to sit down and relearn. I pulled out <a href="https://abookapart.com/products/html5-for-web-designers">my old HTML5 book</a>, which was surprising still relavent 7 years after being published, and something just <em>clicked</em>. I felt very inspired to learn what I had missed. I started listening to web design lectures and podcasts during my commute. Some of them were about <a href="https://youtu.be/K9oY9Nwo1R8">progressive enhancement</a> and others were about <a href="https://youtu.be/TNhR6ol9mBc">really cool new layout tools in CSS</a>. And then I tried to learn Javascript for about a 12th time.</p>
<p>I realized something important: my knowledge really wasn't out-of-date. Everything I already knew was still relavent, and people that I knew didn't know all of the new things either. <a href="http://thewebahead.net/104">A podcast really cemented this idea for me</a>: I don't need to learn everything about web design, and it's impossible to learn everything about web design.</p>
<p>Since January, I have made web design a regular part of my routine and spent most of my efforts improving <a href="http://www.zeldauniverse.net">Zelda Universe</a>. I also started multiple small web design projects that I haven't published yet. I have a bad habit of starting personal web projects and never finishing them, but they are great learning experience either way.</p>
</div>
<hr>
<div class="column-group">
<p>Recently, I bought a few new books and started listening to lectures and podcasts again. A couple days ago, without much thought, I turned on <a href="http://thewebahead.net/110">a podcast I knew I had already heard</a>. I did not remember what it was actually about, but I have come to respect both the host and her guest over the past several months (and even more so when I realized that he had written not only the reliable HTML5 book from 2010 but also <a href="https://domscripting.com/book/">a book about Javascript</a> that has been on my shelf for years as well) so I knew it would be a worthwhile exercise.</p>
<p>The podast is more than hour long and covers a range of topics, but at the end of the conversation are a few minutes of discussion about personal websites and how so many of them never make it online because we tell ourselves they just aren't quite good enough.</p>
<p>This resonated with me. I have wanted to publish things for years and never gotten around to it. I want to write about web design and just play around with fun new CSS. I want to write about video games even when it doesn't fit the scope of what <em>Zelda Universe</em> covers. I want to write about events I attend, interesting articles I read, and just whatever else comes to mind.</p>
<p>The conversation stuck with me. It's been rather hard to focus for the last couple of days. The sign industry is a busy place, but my head was spinning with ideas for a simple layout that would help me publish <em>now</em>. And this is it. The layout is certainly not polished. There are a lot of things I hope to improve over time, but today the most important part is just having a personal place to publish.</p>
<p>This is the beginning of something new. Let's see where it goes.</p>
<p>- Joshua Lindquist</p>
</div>
</article>
<hr>
<h3>About Me</h3>
<p>My name is Joshua Lindquist. I sometimes use the alias WatcherJoshua. By day, I am a graphic designer working in the sign and printing industry. By night, I am the content director of <a href="http://www.zeldauniverse.net">Zelda Universe</a>. I like to hang out on <a href="http://www.twitter.com/WatcherJoshua">Twitter</a>.</p>
</main>
</body>
</html>