This repository was archived by the owner on May 26, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfeed.xml
413 lines (266 loc) · 45.8 KB
/
feed.xml
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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="http://jekyllrb.com" version="3.4.2">Jekyll</generator><link href="https://www.runarkristoffersen.com/feed.xml" rel="self" type="application/atom+xml" /><link href="https://www.runarkristoffersen.com/" rel="alternate" type="text/html" /><updated>2018-05-08T21:47:12+02:00</updated><id>https://www.runarkristoffersen.com/</id><title type="html">Runar Kristoffersen</title><subtitle>A work-in-progress portfolio for Runar Kristoffersen, electrician by trade, computer- and sciencegeek by desire.
</subtitle><entry><title type="html">Building an auctionsite with React</title><link href="https://www.runarkristoffersen.com/projects/2018/05/08/Reptile.html" rel="alternate" type="text/html" title="Building an auctionsite with React" /><published>2018-05-08T10:40:20+02:00</published><updated>2018-05-08T21:46:32+02:00</updated><id>https://www.runarkristoffersen.com/projects/2018/05/08/Reptile</id><content type="html" xml:base="https://www.runarkristoffersen.com/projects/2018/05/08/Reptile.html"><p>Recently, I’ve been working on an auction site specifically for reptiles. As of writing, it is available only to the Norwegian market, but international expansion is in the works. You can have a look at it here: <a href="https://reptilauksjonen.no">Reptilauksjonen.no</a></p>
<p>Technically, this project had a few challenges, but in my opinion, some good solutions came out of it. In this post, I will highlight some of the features and solutions, and what I learned working on this.</p>
<hr />
<p><a href="https://res.cloudinary.com/reptilesofnorway/image/upload/reptil_auksjonen_logo">
<img src="https://res.cloudinary.com/reptilesofnorway/image/upload/c_scale,f_auto,q_auto,w_800/reptil_auksjonen_logo" alt="Reptilauksjonen" class="center" srcset=" https://res.cloudinary.com/reptilesofnorway/image/upload/c_scale,f_auto,q_auto,w_1600/reptil_auksjonen_logo 1600w, https://res.cloudinary.com/reptilesofnorway/image/upload/c_scale,f_auto,q_auto,w_800/reptil_auksjonen_logo 800w, https://res.cloudinary.com/reptilesofnorway/image/upload/c_scale,f_auto,q_auto,w_400/reptil_auksjonen_logo 400w, https://res.cloudinary.com/reptilesofnorway/image/upload/c_scale,f_auto,q_auto,w_300/reptil_auksjonen_logo 300w, https://res.cloudinary.com/reptilesofnorway/image/upload/c_scale,f_auto,q_auto,w_100/reptil_auksjonen_logo 100w, " sizes="(min-width: 800px) 80vw, 100vw" />
</a></p>
<h2 id="money-and-legal">Money and legal</h2>
<p>As we started, the goal was to create a marketplace where the owners would receive a fixed percentage of each sale on the site, sort of like the App Store. Initially, we started working with <a href="https://www.braintreepayments.com/">Braintree</a> for the payment solution, since they have a really nice implementation. Considering this was my first project involving payment, I actually found implementing Braintree surprisingly easy.</p>
<p>In just a few lines, on both the client and the server-side, we were ready to go. It just worked, and it was easily expandable. What more could we dream about?</p>
<p>Well, as it turns out, the Marketplace of Braintree was not yet available in Norway. Oh, what a bummer.</p>
<p>So after some talks with the client, we agreed to change the model so that instead of customers paying a fixed percentage per sale, they would instead pay a monthly subscription.</p>
<p>Legally, this was far easier. Braintree however, also don’t permit the sale of live animals, so we had to drop that implementation.</p>
<p>Therefore, we went with <a href="https://stripe.com/">Stripe</a>. They are also awesome. Best documentation I’ve ever seen. We were up and running in no time.</p>
<p><strong>Lesson learned:</strong>: Read the fine-print.</p>
<h2 id="react-and-errors">React and errors</h2>
<p>Errors? Why do we need to talk about that? My code is incredible, I’ve tested it thoroughly, there are no errors. Yeah, right!</p>
<p>Errors will always happen. We need a way to detect them, not only when we are testing it locally, but detecting real errors from other users. Also, how do we handle errors? Users should be presented with some subtle, honest message about it, instead of just a crashing app or site. How do we make sure that after a crash, the site will not only continue to crash?</p>
<p>For instance, the redux-store could be corrupted by an error, and since we persist the store each time the user refreshes, the error might raise again and again for the user, rendering the site wholly broken for that user. Updating the code might not even work for that user, or they will not even come back to the site if it only shows a blank page with no content.</p>
<p>One thing I like about the recent releases of React is the <code class="highlighter-rouge">ErrorBoundaries</code>. It enables you to replace a component that for some reason, throws an uncaught exception.</p>
<blockquote>
<p>Oh no! Something went wrong</p>
</blockquote>
<p>is a much better error for a user to encounter, than the default, which is just a blank, unresponsive page. I also added automatic error-reporting with <a href="https://sentry.io">Sentry</a>, both in the client and server-side, so I get an excellent little report of every error. This is very important on a newly developed site, as it is much easier to find any bugs that you were unable to test for locally.</p>
<p>Another nice addition to using Sentry is that on an error, you can also add just a simple button that a user can use to add some context into what happened when the user encountered this error. This is automatically attached to the error-report, which nicely also submits the users redux-store, using a middleware.</p>
<p>All of this is best explained, with some very nice examples, in the <a href="https://docs.sentry.io/clients/javascript/integrations/react/">React-part of Sentry-documentation</a></p>
<p>Of course, you don’t have to have an ErrorBoundary for every component. You add them where it is natural. I would suggest adding them per route so that users still will be able to use the nav-bar for navigation, even after the application has errored out.</p>
<p>I also added a nice little button that clear the users redux-store. Since we only use this for caching and remembering some minor settings, clearing the redux-store for a user is not a big deal.</p>
<p>Example of error-message, sorry for only having this available in norwegian:</p>
<p><a href="/images/reptile_error.png">
<img src="/images/reptile_error-800.png" alt="Reptilauksjonen error" srcset=" /images/reptile_error-1600.png 1600w, /images/reptile_error-800.png 800w, /images/reptile_error-400.png 400w, /images/reptile_error-300.png 300w, /images/reptile_error-100.png 100w, " sizes="(min-width: 800px) 80vw, 100vw" class="center" />
</a></p>
<h2 id="images-and-their-impact-on-loading">Images, and their impact on loading</h2>
<p>It is no secret that the vast majority of most websites traffic is images. As developers, we have been told to use responsive images. Using <code class="highlighter-rouge">srcset</code> and displaying the right sized image instead of a monster-image to a small mobile is a big waste. Of course, generating images for multiple sizes can be time-consuming, even if you have some tremendous automated tools for it.</p>
<p>Enter <a href="https://cloudinary.com/">Cloudinary</a>, which automatically can resize any image on the fly. It has a ton of other features and transformations, but for now, lets only talk about resizing. You can generate any size of any image, by just changing the URL-path. For instance, the top-logo for Reptilauksjonen has an URL like this:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>https://res.cloudinary.com/reptilesofnorway/image/upload/c_scale,dpr_1.0,f_auto,q_auto,w_150/reptil_auksjonen_logo
</code></pre>
</div>
<p>So, changing the <code class="highlighter-rouge">w_150</code> to <code class="highlighter-rouge">w_500</code> will get us an image with a width of 500px. Here, <strong>q</strong>uality and <strong>f</strong>ormat are both set the auto, <strong>c</strong>rop-method is set to <em>scale</em>, and the <strong>dpr</strong> is <em>1.0</em>.</p>
<p>You don’t have to add all these parameters by yourself. For instance, using the <a href="https://github.com/cloudinary/cloudinary-react">react-cloudinary</a>-plugin, the <strong>dpr</strong> and <strong>width</strong> are automatically added, based on the current users dpr, and the size of the div.</p>
<p>This is only scratching part of the features of Cloudinary, but on this site, we saved a lot of data for the user, and also, since all of the images on Cloudinary are on a CDN, we don’t even have to serve the images ourselves.</p>
<p>The free plan of Cloudinary is also quite good, so serving small websites with it, you will likely not need anything more.</p>
<h2 id="uploads">Uploads</h2>
<p>Uploading files to your server can be a risk, and it can ruin your data-quote quite fast. You need to keep track of them somehow, and scale the images appropriately, cropping them as needed and a bunch more. At first, I did precisely this. A full implementation, handling it all on our server. I thought I’d save the client some money. However, adding nice features to it, like automatic removal of adult-rated images, and in-browser-cropping was not something I wanted to do. Especially considering that Cloudinary already has all these features, and a ton more.</p>
<p>So guess what, I threw away all that, and just used their API instead. It works a lot better. Using their upload-widget is great, even though it feels a bit outdated.</p>
<p><strong>Lesson learned</strong>: Don’t do everything yourself.</p>
<hr />
<p>Looking back at this project, I learned a ton. It was really exciting to get my hands dirty on a wide project like this. Of course, there is a ton of stuff I haven’t touched upon in this post. I might revisit this topic in a future post, but I don’t want to throw a wall of text at your face. Therefore, I leave you here, for now.</p></content><author><name></name></author><category term="projects," /><category term="react," /><category term="flas" /><summary type="html">Recently, I’ve been working on an auction site specifically for reptiles. As of writing, it is available only to the Norwegian market, but international expansion is in the works. You can have a look at it here: Reptilauksjonen.no</summary></entry><entry><title type="html">Thoughts on how to finish personal project</title><link href="https://www.runarkristoffersen.com/web-development,/software/2017/08/27/Finishing_projects.html" rel="alternate" type="text/html" title="Thoughts on how to finish personal project" /><published>2017-08-27T23:47:20+02:00</published><updated>2017-09-06T11:32:36+02:00</updated><id>https://www.runarkristoffersen.com/web-development,/software/2017/08/27/Finishing_projects</id><content type="html" xml:base="https://www.runarkristoffersen.com/web-development,/software/2017/08/27/Finishing_projects.html"><p>Like most developers, I love personal projects. As I’ve had my shares of projects in the past which I got tired off, I’ve had to take some steps to keep me from wasting time on projects that don’t see the light of day, and instead focus my energy on the right project.</p>
<p>I’m not alone as a developer struggling with this problem. It is entirely reasonable to be hyped beyond thought by a project for the first few days, and then getting into a bit of a struggle. Either with the solution itself or just time-management.</p>
<p>Developers are doing this on their spare time, between work, chores, obligations and social events. Unless solving the struggle within about a week or two, interest in the project might fast decline, leaving only a graveyard of GitHub projects in its wake.</p>
<p><a href="/images/startup-photos.jpg">
<img src="/images/startup-photos-800.jpg" alt="Project" srcset=" /images/startup-photos-1600.jpg 1600w, /images/startup-photos-800.jpg 800w, /images/startup-photos-400.jpg 400w, /images/startup-photos-300.jpg 300w, /images/startup-photos-100.jpg 100w, " sizes="(min-width: 800px) 80vw, 100vw" class="center" />
</a></p>
<p>To combat this, I show restraint in actually starting a project. I think it over thoroughly. I try to think critically about whether or not my project would be as good as I am hyped to believe. How many people will it be useful to or appreciated by? How much work would an MVP need? I let the project sit for a few days or weeks more, just to let the hype sink in, or withdraw.</p>
<p>Don’t feel bad for abandoning your project. You are not failing it. There are a thousand bad ideas for every good one. Look at it this way, if you follow all the ideas you think of as good, you are most likely wasting your time, or not spending as much time as you should on that one idea that is honestly great. Finish most projects by trashing them after giving them some thought, finish the great ones by investing heavily.</p>
<h2 id="minimal-non-viable-prototype">Minimal <strong>Non</strong>-Viable Prototype</h2>
<p>I then start creating what I call a Minimal <strong>Non</strong>-Viable Prototype. An MNVP (my term) is like a stripped-down version of an MVP or a proof-of-concept. It is, however, for my eyes only. I tackle whatever problem entices me most about the project, which is most often the main-functionality. I don’t address anything more at this point. A useful tool should be able to show its benefits and potential at this stage, even if it requires a fair deal of imagination.</p>
<p>This helps me see if this is a project I still believe in, and whether I should keep at it for a real MWP. I then take another break. After all, I have just tackled the most intriguing problem in my project. Going straight to the boring stuff now would seem like a chore after all that fun.</p>
<h2 id="bridging-to-mwp">Bridging to MWP</h2>
<p>So I’ve tackled the biggest problem and let the project sit to excite me up again. I now generally look forward to bringing the project to life with a working GUI, bells and whistles, and all that is needed to make an MWP.</p>
<p>However, depending on how big the project is, I might need another booster. Luckily, I’ve had a few days off to let fresh takes and ideas step in. These mostly happen while idling,</p>
<p>At this point, getting the project out the gate is more or less just a matter of time. I’ve already had a chance to think it thoroughly over, with multiple low-cost opportunities to trash the whole project.</p>
<h2 id="conclusion">Conclusion</h2>
<p>Personal projects should be fun. Of course, we want to start the next big thing, but that rarely happens. Most projects end up in the trash. With this technique, I hope that trashing projects occur at an earlier stage, with less time spent, and more time left for what matters; family and friends, Xbox, fun, and fulfilling our dreams.</p></content><author><name></name></author><summary type="html">Like most developers, I love personal projects. As I’ve had my shares of projects in the past which I got tired off, I’ve had to take some steps to keep me from wasting time on projects that don’t see the light of day, and instead focus my energy on the right project.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://www.runarkristoffersen.com/startup-photos.jpg" /></entry><entry><title type="html">Key-configuration</title><link href="https://www.runarkristoffersen.com/software/2017/04/08/Karabiner.html" rel="alternate" type="text/html" title="Key-configuration" /><published>2017-04-08T12:47:20+02:00</published><updated>2017-09-06T11:09:08+02:00</updated><id>https://www.runarkristoffersen.com/software/2017/04/08/Karabiner</id><content type="html" xml:base="https://www.runarkristoffersen.com/software/2017/04/08/Karabiner.html"><p>This is my third post in the series concerning keyboards and increasing the productivity with them. If you haven’t read the others yet, here are some links to them:</p>
<ul>
<li><a href="/hardware/2017/03/14/Advantage.html">The weird and productive keyboard</a>, my recommended keyboard for anybody wanting to increase their productivity, comfort level, or simply how to write the correct way.</li>
<li><a href="/hardware/2017/03/16/Key-modifications.html">Keyboard remapping gone mad</a>, a post going through some ideas for how the keyboard can be remapped to get more functionality while at the same time avoiding painful key-combinations.</li>
</ul>
<p>Below is a recap-video from the last post, of some of the features of this remap:</p>
<figure>
<video width="960" controls="">
<source src="/media/karabiner.mp4" type="video/mp4" />
<source src="/media/karabiner.webm" type="video/mp4" />
Your browser does not support the video tag.
</video>
<figurecaption>Video showcasing some of the remappings.
</figurecaption>
</figure>
<p>In this post, I will dive into the technical aspect of how to remap the keyboard. Many software lets you do this, but most will not do this at a low enough level to actually remap the keys. Some just try it’s best to cancel out the effect of the key you want it to remap, and then emulating the target key.</p>
<h2 id="karabiner-to-the-rescue">Karabiner to the rescue</h2>
<p>As a disclaimer, I would just like to point out that I am not sponsored or in any way involved with Karabiner. I simply recommend it, as many others do.</p>
<p>Karabiner has a history of doing this remapping at the level we need to do our remapping of the modifier keys, so that the OS doesn’t even see what key you pressed physically, but the key you tell it to see through Karabiner.</p>
<p>What makes Karabiner extra useful, is that you can not only configure it through a graphical user interface, but also by just editing a <code class="highlighter-rouge">.json</code>-file. This is great for those who are used to editing text files, as most developers and programmers are.</p>
<p>It is no also possible to share and import complex key-modification-rules, which is a very handy and welcome feature.</p>
<h3 id="macos-sierra">macOS Sierra</h3>
<p>macOS Sierra brought some changes to the generic keyboard and mouse drivers, and this broke earlier versions of Karabiner. Luckily, the developers are currently rewriting Karabiner, which is now called Karabiner Elements, to work with the updated OS.</p>
<p>New features are added quite often, and it is very stable. I have not had a single issue with the program at all.</p>
<blockquote>
<p>Because Karabiner Elements is not yet released and actively worked on, big changes are happening fast.</p>
<p>I will keep this page updated as progress continues so that the correct information is always available here.</p>
</blockquote>
<h2 id="downloading-karabiner-elements">Downloading Karabiner-Elements</h2>
<p>You can download the application from <a href="https://github.com/tekezo/Karabiner-Elements/">Karabiner-Elements GitHub-Page</a>.</p>
<h2 id="configuring-karabiner-elements">Configuring Karabiner-Elements</h2>
<p>Looking back at my previous post about what remapping I wrote that there were a few different kinds of remappings I found the most helpful, and my recommended setup.</p>
<p>Karabiner-Elements has made the process of sharing and importing comples key-modifications really easy. The rules can now be created and stored in simple <code class="highlighter-rouge">.json</code>-files, and imported via a regular internet-browser. A collection of rules is available from the developer’s site, and also inside the application itself.</p>
<h3 id="hyper-key">Hyper-key</h3>
<p>To remap the <code class="highlighter-rouge">caps-lock</code> into another working modifier-key, which often is called the <code class="highlighter-rouge">hyper</code>-key, we need to add just a few lines into the config. But as I mentioned, macOS does not have a <code class="highlighter-rouge">hyper</code>-key, so we emulate on with a combination of all modifier keys. That would be <code class="highlighter-rouge">ctrl + shift + option + cmd</code>, a crazy key-combination. I highly doubt you actually are using that, and if you are, please stop it before the pain sets in.</p>
<p>In the latest release, 0.91.5 as of writing, this configuration is included, and you can simply import it from the <em>Complex Modifications</em>-tab.</p>
<ul>
<li>Press <em>Add Rule</em></li>
<li>Press <em>Import more rules from the internet</em></li>
</ul>
<p>A list of rules should follow. One of them should be named <em>Change caps_lock key</em>. Simply press <em>Import</em>, and select the rules you would like to enable from that import. If you ever change your mind, just disable the rule.</p>
<h2 id="tapping-modifier-key-for-f-key">Tapping modifier-key for F-key</h2>
<p>Tapping a key is different that holding it. Modifier keys are by default only useful for holding and then applying a key-combination. On their own, they do nothing. But we can add functionality when tapping the modifier keys to do something a lot more useful. We can also do combinations, for instance holding <code class="highlighter-rouge">ctrl</code> and tapping <code class="highlighter-rouge">cmd</code>.</p>
<p>The target-keys you need here should be unused keys. My keyboard does not have F-keys beyond F13, so that means I can use these keys are a target. You can, of course, configure this to any key, but really, it should be a key that is not used at all.</p>
<p>I have created a pull-request to get this configuration into the main server, so you can add them from there. In the meantime, you can import it directly from my site. Just follow link below and allow it to import into Karabiner.</p>
<p><a href="karabiner://karabiner/assets/complex_modifications/import?url=https://www.runarkristoffersen.com/media/modifiers_to_f-keys.json">import-file for Karabiner-Elements</a></p>
<h2 id="extra-ctrl-and-option-keys">Extra ctrl and option keys</h2>
<p>Since I want extra modifier keys, available on both sides of my keyboard, I did the same technique as for tapping modifier keys but applied it to a regular key.</p>
<p>You can do this on the <em>Simple Modifications</em>-tab inside the Karabiner-Elements-GUI, from the simple drop-down-menu. Or, if you are are more comfortable with pure text, in your <code class="highlighter-rouge">json</code>, add these elements.</p>
<div class="language-json highlighter-rouge"><pre class="highlight"><code><span class="s2">"simple_modifications"</span><span class="err">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nt">"close_bracket"</span><span class="p">:</span><span class="w"> </span><span class="s2">"right_option"</span><span class="p">,</span><span class="w">
</span><span class="nt">"grave_accent_and_tilde"</span><span class="p">:</span><span class="w"> </span><span class="s2">"left_control"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre>
</div></content><author><name></name></author><category term="productivity" /><category term="tips" /><summary type="html">In this post, I will dive into the technical aspect of how to remap the keyboard. Many software lets you do this, but most will not do this at a low enough level to actually remap the keys. Some just try it's best to cancel out the effect of the key you want it to remap, and then emulating the target key.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://www.runarkristoffersen.com/Karabiner.png" /></entry><entry><title type="html">Keyboard remapping gone mad</title><link href="https://www.runarkristoffersen.com/hardware/2017/03/16/Key-modifications.html" rel="alternate" type="text/html" title="Keyboard remapping gone mad" /><published>2017-03-16T22:47:20+01:00</published><updated>2017-04-08T21:07:12+02:00</updated><id>https://www.runarkristoffersen.com/hardware/2017/03/16/Key-modifications</id><content type="html" xml:base="https://www.runarkristoffersen.com/hardware/2017/03/16/Key-modifications.html"><p>Remapping the keyboard is highly useful, especially if you find that there currently is not enough keys on your keyboard. Instead of slaving though remembering cumbersome key-combinations to get your work done, why not add some extra keys on your keyboard? Of course, we are not physically adding keys, but using the ones we have a bit smarter.</p>
<figure>
<video width="960" controls="">
<source src="/media/karabiner.mp4" type="video/mp4" />
<source src="/media/karabiner.webm" type="video/mp4" />
Your browser does not support the video tag.
</video>
<figurecaption>Video showcasing some of the remappings.
</figurecaption>
</figure>
<p>Like on your touch phone or pad, you can tap, hold, swipe as you navigate through the interface. Yet, you are only interacting with a single surface.</p>
<p>Our current keyboards have not evolved very much since their birth. Sure, you can get keys with tiny screens on them, or fancy light. But this doesn’t really help productivity much. What we need are multiple ways to interact with each key. Ergo, we need more ways to press a button.</p>
<p>Of course, we already press buttons in different ways. Some you hold and use in addition to other keys, some you only tap. Other keys, you hold and repeat. But currently, there is no keyboard that defaults to assign different keys depending on whether you tap or hold the key.</p>
<p>Steve Losh, wrote a great article, called <a href="http://stevelosh.com/blog/2012/10/a-modern-space-cadet/">A Modern Space Cadet</a>, where he wrote about a smarter use of the keyboard. Even though the article is a few years old now, and the software he suggests to remap the keyboard is outdated, the article is well worth a read. I have taken great inspiration from the article.</p>
<p class="float-right"><img src="https://imgs.xkcd.com/comics/borrow_your_laptop.png" alt="XKCD: Borrow Your Laptop" /></p>
<h2 id="caps-lock">Caps-lock</h2>
<p>Caps-lock is arguably the most remapped key on the keyboard. It doesn’t do anything very useful. Unless you like to post angry comments on various news sites, you probably don’t use the key. If you find yourself to be on of those who do, you probably shouldn’t be using the internet. For everybody else, remap it to something else. I do it for the <code class="highlighter-rouge">Hyper</code>-key. Well, that is on macOS, the <code class="highlighter-rouge">hyper</code> key doesn’t exist, so I remapped it to <code class="highlighter-rouge">Ctrl-Cmd-Alt-Shift</code>. So now I have more of the easily-hit key-combos than I can think of.</p>
<h2 id="tap-keys-and-hold-keys">Tap-keys and hold keys</h2>
<p>Some keys you use differently than others. You hold your modifier keys while you tap other keys. Why not double the usage of some of these keys?</p>
<p>Especially the modifier keys seem to be good candidates for using as tapping as well as their regular hold-behaviour.</p>
<p>We do however need a target key to remap to. It is not too important which key you choose to remap to, but it should be an unused key.</p>
<p>I don’t use my F-row too much, especially F12 and above. Therefore I decided to use these keys as a target for remapping. Now my modifier keys does something useful while tapping, especially in Atom.</p>
<table>
<thead>
<tr>
<th>Physical key</th>
<th>Tap</th>
<th>Action in Atom</th>
</tr>
</thead>
<tbody>
<tr>
<td>Left Shift</td>
<td>F12</td>
<td>expand-region</td>
</tr>
<tr>
<td>Left Command</td>
<td>F13</td>
<td>toggle-line-comments</td>
</tr>
<tr>
<td>Left Alt</td>
<td>F14</td>
<td>wrap-with-abbreviation</td>
</tr>
<tr>
<td>Right Ctrl</td>
<td>F15</td>
<td>outdent-selected-rows</td>
</tr>
<tr>
<td>Right Command</td>
<td>F16</td>
<td>indent-selected-rows</td>
</tr>
<tr>
<td>Right Shift</td>
<td>F17</td>
<td>preview</td>
</tr>
</tbody>
</table>
<p>Combine these keys with regular modiefier keys, and you have a whole lot of new keyboard-shortcuts you can easily use. <code class="highlighter-rouge">Ctr+Command(tap)</code> will now actually be a command, and vise-versa, <code class="highlighter-rouge">Command+Ctrl(tap)</code> will be wholly different.</p>
<h3 id="missing-control-key">Missing Control-key</h3>
<p>The <code class="highlighter-rouge">Ctrl</code>-key is not to be found on the left side of my current keyboard, which I find frustrating. For this reason, I remapped my <code class="highlighter-rouge">§</code>-key to be <code class="highlighter-rouge">Ctrl</code> when held, and when tapped it functions as a regular <code class="highlighter-rouge">§</code>-key. Other alternatives would be using the <code class="highlighter-rouge">Caps-lock</code> as <code class="highlighter-rouge">Ctrl</code>, But I have other uses for that.</p>
<h2 id="special-keys-and-compromises">Special keys and compromises</h2>
<p>To accommodate the need in Norwegian for special characters, like <code class="highlighter-rouge">æ, å, ø</code>, I use a small toggle on the keyboard. Under the hood, I have set some keys whose placements matches the Norwegian-layout to output that character, but only when the <code class="highlighter-rouge">Macro</code>-function on the keyboard is enabled.</p>
<table>
<thead>
<tr>
<th>Physical key</th>
<th>Macro</th>
<th>Output</th>
</tr>
</thead>
<tbody>
<tr>
<td>’</td>
<td>alt-‘</td>
<td>æ</td>
</tr>
<tr>
<td>shift-‘</td>
<td>alt-‘</td>
<td>Æ</td>
</tr>
<tr>
<td>;</td>
<td>alt-o</td>
<td>ø</td>
</tr>
<tr>
<td>shift-;</td>
<td>alt-o</td>
<td>Ø</td>
</tr>
<tr>
<td>\</td>
<td>alt-a</td>
<td>å</td>
</tr>
<tr>
<td>shift-\</td>
<td>alt-a</td>
<td>Å</td>
</tr>
</tbody>
</table>
<p>But isn’t this just the same as changing the keyboard layout to Norwegian in the OS? Well, no. The Norwegian keyboard layout has quite a few differences compared to the US-layout. It switches many of the characters on the keyboard, which makes for unnecessary adjustments if one is using two layouts. In my view, it is better to just switch a few of the most needed keys, instead of all of them.</p>
<p>Of course, when the macro is enabled, I am unable to use their normal key. I find this an okay compromise. With just a tap, I can disable the <code class="highlighter-rouge">Macro</code>–function, and I can again access those keys. After all, when I am writing Norwegian, I am generally not writing code, but emails, or chatting and such. I can, for the most part, do without those keys then.</p>
<p>In my next post in the series, I will dive into how to remap the keyboard to achieve these goals discussed here. You can find the post here: <a href="/software/2017/04/08/Karabiner.html">Key-configuration</a></p></content><author><name></name></author><category term="hardware" /><category term="keyboard" /><category term="productivity" /><category term="tips" /><summary type="html">Remapping the keyboard is highly useful, especially if you find that there currently is not enough keys on your keyboard. Instead of slaving though remembering cumbersome key-combinations to get your work done, why not add some extra keys on your keyboard? Of course, we are not physically adding keys, but using the ones we have a bit smarter.</summary></entry><entry><title type="html">The weird and productive keyboard</title><link href="https://www.runarkristoffersen.com/hardware/2017/03/14/Advantage.html" rel="alternate" type="text/html" title="The weird and productive keyboard" /><published>2017-03-14T22:47:20+01:00</published><updated>2017-04-08T15:02:12+02:00</updated><id>https://www.runarkristoffersen.com/hardware/2017/03/14/Advantage</id><content type="html" xml:base="https://www.runarkristoffersen.com/hardware/2017/03/14/Advantage.html"><p>For quite some time I’ve been using just regular flat keyboards, mostly because as a student I used my laptop a lot. When working on my desktop I wanted a similar keyboard, so I went with a flat Logitech-keyboard.</p>
<p>However, I did not realise how the non-existing ergonomics of keyboards like these were until I started coding again. This fact was not helped by the fact that the Norwegian-keyboard-layout is not very programmer-friendly. To make a simple square-brace, I would do <code class="highlighter-rouge">Shift+8</code>, instead of just hitting the dedicated key. This holds true for a number of keys. Of course, we do have a dedicated <code class="highlighter-rouge">&lt;</code>, <code class="highlighter-rouge">&gt;</code> and <code class="highlighter-rouge">@</code> -keys for some reason, but I think we can all agree that the US-keyboard is more optimized for programming than the Norwegian version.</p>
<p>I tried switching to the US-layout, but as I was writing quite a bit of Norwegian too, this was not an optimal solution. Of course, I could change layouts on the fly, but there are a lot of the keys that change between layouts, this neither was a reliable option.</p>
<p>For a while, I tried to remap some keys to make this easier. <code class="highlighter-rouge">Caps-lock</code> is a pretty useless key, so I used that in combination with other keys for brackets and such. I remapped all my modifier keys to behave differently while just tapping them so that I could tap <code class="highlighter-rouge">Ctrl</code> for parentheses, and also do stuff like <code class="highlighter-rouge">Shift-Ctrl</code> (hold shift, tap Ctrl) to close parentheses.</p>
<p>I was happy for a while, but after spending hours coding, I noticed some beginning fatigue in my hands. No pain yet, but I knew I needed to do something before I got any lasting damage. The flat keyboard would have to go.</p>
<h2 id="advantage">Advantage</h2>
<p>After poking around the internet, I found a weird looking keyboard made by a company called Kinesis. The Advantage 2. A huge, split keyboard with contoured wells for my hands, with modifier keys for both my thumbs. In all these years I found it strange that the strongest finger (albeit not technically a finger) would be assigned only to hitting the spacebar. Now it would do many different tasks. This was a strange new world.</p>
<p><a href="/images/advantage2.jpg">
<img src="/images/advantage2-800.jpg" alt="Kinesis Advantage2" srcset=" /images/advantage2-1600.jpg 1600w, /images/advantage2-800.jpg 800w, /images/advantage2-400.jpg 400w, /images/advantage2-300.jpg 300w, /images/advantage2-100.jpg 100w, " sizes="(min-width: 800px) 80vw, 100vw" class="center" />
</a></p>
<!-- ### First impressions: Terrible, utterly terrible -->
<p>The keyboard felt huge but surprisingly light. So many keys have been moved around. I decided to also change to US-layout, while I’m at it. It meant I would have to spend more time adjusting.</p>
<p>My typing speed was horrible. I couldn’t understand how I was ever going to relearn how to type. I kept hitting the wrong key or two keys at once. Why was I hitting two keys? Well, a regular keyboard does not arrange their keys in straight rows, but semi-diagonally. But here, since the keys are curved, I guess they figured it was better to keep the keys in straight rows.</p>
<p>Writing emails was a pain. I was just about done with this keyboard.</p>
<h3 id="no-more-fatigue">No more fatigue</h3>
<p>It has been a few days. The fatigue was gone. And I was starting to get used to the strange beast of a keyboard. Even though my writing speed was still much slower than before, it took a lot less effort. Now it feels smooth. I hardly ever move my hands, nor do I stretch my fingers. My keys are right where I need them to be.</p>
<p>My writing speed is improving every day, to the point where I am not concerned about not writing fast enough. After all, a programmer doesn’t actually need to write fast, but smart. And if I need to write quicker, I am sure that in the coming weeks, I will be a lot faster than I ever was with my flat keyboard. Of course, I am comparing two very different keyboards here, at very different prices and targeted at different audiences.</p>
<h3 id="special-features">Special features</h3>
<p>The keyboard has some more advanced features. It can be programmed on the keyboard itself so that if you switch computers, your layout, settings and macros are with you. You can even store snippets on there, for often typed phrases. You can change your layout from Qwerty to Dworak with the push of a button, enable or disable a <em>click</em>-tone for you key-presses, to let you know when a key-press is detected to hinder bottoming the keys.</p>
<p>All of these settings and more can be set either on the keyboard as explained, but also from your computer. The keyboard actually shows up as a removable disk, with a few folders and files. Here you can do firmware updates without any installation files at all. Nothing is installed on your computer. Changing of settings is done through editing regular text files. You could create multiple profiles for your layouts if you were to need that.</p>
<p>I do like that I can change the keys and settings from a regular text file, very programmer-friendly.</p>
<p>No software required (or even supplied), means I can just take my keyboard and plug it into any computer, and all my settings, remapped keys, snippets and such are right there with me. No pesky notifications about updates waiting to install, at least for the keyboard. I never understood why so many products insist on installing some proprietary software just to manage their product.</p>
<p>The keyboard also comes with some extra keycaps, so you can PC- or Mac modifier keys.</p>
<h3 id="verdict">Verdict</h3>
<p>I like this keyboard. It has only been a few weeks, and I am typing a lot more consistent than I used to, if not faster.</p>
<p>I do not like using other keyboards if I have to, but I find that I am typing faster on them also. I think that is because the Advantage forces you to keep your hands where they should be, your index fingers naturally fall on F and J as a professional typist would have it.</p>
<p>I don’t use my mouse as much, and I am a lot quicker than I was before. Because the modifier keys are so much more accessible and closer to my hands, doing key-combos are easier. Before I was mostly just doing combos with my left-hand. This I believe was because the flat little keyboard was not wide enough so my hands would not naturally rest at writing position. My hands were almost cramped together. See the image below for a clear difference.</p>
<figure>
<a href="/images/hands_on_Logi.jpg">
<img src="/images/hands_on_Logi-800.jpg" alt="Image of Logitech-keyboard in use" srcset=" /images/hands_on_Logi-1600.jpg 1600w, /images/hands_on_Logi-800.jpg 800w, /images/hands_on_Logi-400.jpg 400w, /images/hands_on_Logi-300.jpg 300w, /images/hands_on_Logi-100.jpg 100w, " sizes="(min-width: 800px) 50vw" class="" />
</a>
<a href="/images/hands_on_advantage2.jpg">
<img src="/images/hands_on_advantage2-800.jpg" alt="Image of Advantage2 in use" srcset=" /images/hands_on_advantage2-1600.jpg 1600w, /images/hands_on_advantage2-800.jpg 800w, /images/hands_on_advantage2-400.jpg 400w, /images/hands_on_advantage2-300.jpg 300w, /images/hands_on_advantage2-100.jpg 100w, " sizes="(min-width: 800px) 50vw" class="" />
</a>
<figcaption>Comparison of usergript on the Advantage2 vs a generic keyboard. <br />Notice the much wider grip, matching my shoulder-width.</figcaption></figure>
<h2 id="beyond">Beyond</h2>
<p>Some modifications are needed. I would like a <code class="highlighter-rouge">ctrl</code>-key on the left, as well as a <code class="highlighter-rouge">alt</code>-key on the right. I can see that there really isn’t room to add them, without needing to stretch my fingers a lot. Therefore, it is not as easy as just remapping the keys. I’ll have to do something a bit more clever. I’ll dive into this in my next post, as well as how to remap keys, not just for this keyboard, but for any keyboard.</p>
<p>You can find the post here: <a href="/hardware/2017/03/16/Key-modifications.html">Keyboard remapping gone mad</a></p></content><author><name></name></author><category term="hardware" /><category term="keyboard" /><category term="productivity" /><category term="tips" /><summary type="html">For quite some time I’ve been using just regular flat keyboards, mostly because as a student I used my laptop a lot. When working on my desktop I wanted a similar keyboard, so I went with a flat Logitech-keyboard.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://www.runarkristoffersen.com/advantage2.jpg" /></entry></feed>