-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
235 lines (223 loc) · 12.4 KB
/
blog.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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blog - jupekett</title>
<meta name="description" content="My blog" />
<meta name="author" content="jupekett" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" type="image/png" href="favicon.ico" />
</head>
<body>
<header>
<h1>Blog</h1>
<nav>
<a href="index.html">Home</a>
<a href="portfolio.html">Portfolio</a>
<a href="blog.html">Blog</a>
</nav>
</header>
<div class="content--blog">
<main>
<article>
<section class="blog-post">
<h2>Translating source code? Madness</h2>
<p><span class="blog-timestamp">7.1.2023 11:06</span></p>
<h3>Local vs global</h3>
<p>
So, I decided to translate the UI for one of my old portfolio applications, <a href="portfolio.html#react">Othello</a>,
to english.
Like most of my programming exercises from JYU, this game was coded entirely in finnish.
Previously I felt somewhat awkward presenting that application to an unknown audience, knowing that the UI
was not created with future observers in mind.
</p>
<p>
Aaand done! End of blog post. But when I saw the recently translated interface elements in between all the finnish variables, I was torn:
bilingual source code <em>really</em> doesn't look good!
Then I knew I had to do the unthinkable: <strong>translate all the source code</strong>, for my own
sake...
and hopefully to the benefit of the occasional non-finnish reader.
</p>
<h3>Into the fray</h3>
<p>
<a href="https://gitlab.jyu.fi/jupekett/othello-react/-/blob/e0fe5c00ebb40dc1cc185e9d1fd1dbee5f030b2a/js/scripts.js">1700 lines of JS</a> in total.
At first the task didn't seem so bad. Just let IDE do the heavy lifting, right?
<strong>JetBrains WebStorm</strong> has convenient refactoring capabilities after all.
But at some point I noticed that not every necessary change is detected out of the box:
</p>
<ul>
<li>React prop names that are passed between components</li>
<li>React state object properties for state updates</li>
<li>inline <code>cssText</code> in JavaScript files</li>
<li>any string interpolation shenanigans</li>
</ul>
<p>
This resulted in the application breaking entirely maybe 20% of the way in. Woe is me!
But that point was kind of liberating. Now I could - with good conscience - use oldschool regular
expressions and search-replace with wild abandon.
</p>
<p>
<em>...<a href="https://gitlab.jyu.fi/jupekett/othello-react/-/commit/c8c1152fc448e90e08075a9c678a64a5276dc0da">hacking away</a> trying not to chop off any major limbs...</em>
</p>
<p>
And finally the application springs back to life! A moment of relief, for sure.
</p>
<h3>Polishing. Polerowanie? Almost un-finnished...</h3>
<p>
After first translation pass I came across and fixed some bugs I had introduced by altering string
templates and typo'ed variable names.
CSS style usage was pretty minimal, so <a href="https://gitlab.jyu.fi/jupekett/othello-react/-/commit/6f9910d99f7ee40f07846d97d1fed5e76d4e6c67">that part</a> was fast.
Although it felt like a slog, revisiting
<a href="https://gitlab.jyu.fi/jupekett/othello-react/-/commit/10ce60b0922c18eca776638559f8baa00cf06574">documentation</a>
<a href="https://gitlab.jyu.fi/jupekett/othello-react/-/commit/fb405e44dd8fa900781a8f2750cb8c6f0acafd2b">comments</a>
was also a nice reminder of what was going through my mind back in 2020 during the exercise.
</p>
<p>
Some of my troubles could probably have been avoided with proper IDE configuration, usage of <strong>React
PropTypes</strong>, a suite of unit tests, etc. But at least now this old project is more presentable than before.
It was a great opportunity for minor improvements, such as adding specificity to ambiguous variable names.
</p>
<p>
<em><strong>If it works, don't touch it</strong></em>.
I've understood that these are usually the words to live by when working with large production codebases.
I would be hard-pressed to repeat this same translation exercise to one of those.
Addressing technical debt through thoughtful refactoring is another story.
Even if non-physical, software requires care and maintenance to ensure its value in the long term.
Speaking of which, another portfolio project has (again) stopped working after a 3rd party data source became unavailable...
</p>
<h3>Closing thoughts</h3>
<p>
When I first began learning the basics of programming, I found that using my native tongue is useful in maintaining a
mental distinction between programming language keywords and my own definitions.
These days I appreciate international cooperation more, though, thanks to working in
multinational software teams at <a href="https://nordcloud.com/">Nordcloud</a>.
</p>
<p>
This application's UI is still rudimentary, React idioms outdated, and structure constrained
by the CDN version of React not allowing modularization.
Still, I'm proud that I figured out the core logic back then.
I especially enjoyed dialing in the game loop and calculating legal moves for each turn.
Maybe I'm more backend kind of guy than a frontend maestro?
</p>
<p>
Some old portfolio projects remain fully finnish, but I likely won't touch them at this point.
I'll rather create new works with modern tech, fresh insights and updated skills.
I have some ideas brewing.
Maybe this very site will finally receive a frontend framework as its core...
</p>
<h3>PS</h3>
<p>
I introduced a small frontend improvement to portfolio page by adding fade-in-n-out for image previews.
Cheers!
</p>
</section>
</article>
<article>
<section class="blog-post">
<h2>Settling in the public cloud</h2>
<p><span class="blog-timestamp">12.12.2021 23:07</span></p>
<p>
The past 6 months at Nordcloud Oy have been a great learning experience. I've heard people say things like
"a year in working life equals <code>${multiplier}</code> years of studying", but that isn't wholly
accurate. Yes, there are a plethora of technologies, processes and facets of customer work that cannot fit
in a curriculum. Here are some things I've faced in the wild for the first time:
</p>
<ul>
<li>Production codebases</li>
<li>
Deployment technologies, such as Serverless Framework, Cloudformation, CDK, Terraform
</li>
<li>
AWS serverless tech: Lambda, DynamoDB, SQS, SNS, API Gateway, Route53, Cloudfront
</li>
<li>Azure stuff: App Service, WebJobs</li>
<li>
Cloud debugging tools: AWS CloudWatch & X-Ray, Azure App Insights
</li>
<li>Jira, service desks</li>
<li>Recurring meetings with customers</li>
</ul>
<p>
On the other hand, touchpoints to some of these technologies might temporarily be narrow and driven by
necessity and practicality. University courses often handle a subject at a more fundamental level than
skimming through documentation and "learning as you go" during everyday tasks. I've laid my groundwork
there, and now I am able to put my skills to practice while making a difference as a part of my team.
</p>
<p>
Luckily, my expertise will only grow over time. We are also encouraged to study the cloud giants at a
certificate level by giving access to learning platforms, and setting growth plans. I anticipate an
exciting near future for me, and will do my best to be worth the expectations.
</p>
</section>
</article>
<article>
<section class="blog-post">
<h2>To the clouds and beyond</h2>
<p><span class="blog-timestamp">5.3.2021 21:02</span></p>
<p>
The coming summer will be one of constant learning and brand new exciting challenges, as I received a new
job! I won't disclose the position quite yet, but I will once I start working officially. That said, the
title of this blog post might be a subtle hint about the branch of IT I will be focusing on. I'm humbled
and relieved, because then I can put to test everything I have learned so far, and "conquer some new
frontiers".
</p>
<p>
This being the case, I'm taking some of my portfolio projects on AWS offline in order to save money. The
fees have not been substantial, but any savings are good.
</p>
<p>I wish you an inspiring and warm spring!</p>
</section>
</article>
<article>
<section class="blog-post">
<h2>Renovation madness vs. inspiring studies</h2>
<p><span class="blog-timestamp">22.1.2021 17:03</span></p>
<p>
Being able to continue studying and working from home like normal even during Corona is something I'm
thankful about. I feel that I haven't had to compromise my course choices or work performance at all. To
add to the mix, our apartment is currently in the middle of a two-week renovation project. Luckily that
hasn't had much impact either, aside from being "moving house in-place" kind of a maneuver. After this
mild ordeal the boxes can finally be
unpacked and spring enjoyed in an updated environment.
</p>
<p>
Speaking of spring: plans for this semester's courses are looking great so far! Programming web-servers
with python, learning DevSecOps practices, and dipping my toes in machine learning sure sound fascinating
and useful. Can't wait to apply those future skills to practice.
</p>
</section>
</article>
<article>
<section class="blog-post">
<h2>Maybe visually out-of-date, but functional</h2>
<p><span class="blog-timestamp">10.1.2021 23:30</span></p>
<p>
For the moment, these stylesheets will do. The result is definitely not industry-worthy, but functional
and personal enough for the time being. CSS always has some tricks I need to shake out of it's sleeve, but
they start sticking once you stick around trying long enough. And thus my first personal general-use home
page is out there for others to see.
</p>
</section>
</article>
<article>
<section class="blog-post">
<h2>Here we go...</h2>
<p><span class="blog-timestamp">10.1.2021 17:37</span></p>
<p>
First version of the site is up. It has barebones front and portfolio pages. Next step is probably to
neaten this up with CSS. But now, I think a walk with our dog Nano is in order. Some fresh air and
recreation for both of us :)
</p>
</section>
</article>
</main>
</div>
<footer>
<address>
<a href="mailto:[email protected]">[email protected]</a>
</address>
</footer>
<script type="module" src="js/main.js"></script>
</body>
</html>