-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathCodeBits.html
More file actions
416 lines (405 loc) · 18.7 KB
/
CodeBits.html
File metadata and controls
416 lines (405 loc) · 18.7 KB
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
414
415
416
<!DOCTYPE html>
<html>
<!--
CodeBits.html
-->
<head>
<title>Code Bits</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/StylesPageFrameDefaults.css" />
<link rel="stylesheet" href="css/StylesPageFrameStructure.css" />
<link rel="stylesheet" href="css/StylesPageFrameMenus.css" />
<link rel="stylesheet" href="css/StylesPageFrameThemeDefault.css" />
<link rel="stylesheet" href="css/StylesWebComponents.css" />
<script src="js/ScriptsWebComponents.js"></script>
<script src="js/ScriptsPageFrameOtherRepos.js"></script>
<script src="js/ScriptsPageFramePagesOtherRepos.js"></script>
<script src="js/ScriptsPageFrameKeyboard.js"></script>
<style>
#github .darkItem {
background-color: var(--dark);
color: var(--light);
}
#github .darkItem a {
color: var(--light);
}
#github summary {
padding: 3px 0px 5px 0px;
}
#github ul.tight > li {
margin-bottom: 2px;
}
#github .undefined {
opacity: 0.4;
}
#github hr {
margin-top: 0.5em;
margin-bottom: 0.25em;
margin-left: -2em;
}
#github div ol > li { /* white-space: nowrap;*/
}
#github menu-item {
display: inline-block;
width: 12em;
font-weight: normal;
}
menu-right {
display: inline-block;
}
</style>
</head>
<body id="github" onload="initialize()">
<a id="Next" href="IdiomsAndPatterns.html">Next</a>
<a id="Prev" href="DesignBites.html">Prev</a>
<page-frame>
<frame-header>
<nav id="navbar"></nav>
</frame-header>
<main>
<div id="about" onclick="this.style.display = 'none'">about</div>
<div id="modified">9/18/2022</div>
<div id="page">CodeBits Repo</div>
<div id="hlp"></div>
<a id="top"></a>
<content>
<header>
<a target="_blank" class="repoLink" href="https://github.com/JimFawcett/Bits">Bits github Repo</a>
<hgroup id="pagetitle">
<h1 id="title">Code Bits Repository</h1>
<h3 style="font-weight:normal;" class="indent">organized bits of syntax, idoms, and patterns</h3>
</hgroup>
<div class="quickStatusContainer" onmouseleave="closeQuickStatus()">
<details>
<summary class="darkItem quickStatus">Quick Status</summary>
<status-grid class="lightItem border">
<status-itemLeft>
Short Bits
</status-itemLeft>
<status-itemRight>
Enable easy comparison of languages
</status-itemRight>
<status-itemLeft>
Demonstration code
</status-itemLeft>
<status-itemRight>
Demos in C++, Rust, and C#
</status-itemRight>
<status-itemLeft>
Documentation
</status-itemLeft>
<status-itemRight>
yes
</status-itemRight>
<status-itemLeft>
Test cases
</status-itemLeft>
<status-itemRight>
NA
</status-itemRight>
<status-itemLeft>
Static library
</status-itemLeft>
<status-itemRight>
NA
</status-itemRight>
<status-itemLeft>
Build requires
</status-itemLeft>
<status-itemRight>
Rust, C++, C# installed
</status-itemRight>
<status-itemLeft>
Planned changes
</status-itemLeft>
<status-itemRight>
Add more bits
<div style="height:0.5em;"></div>
</status-itemRight>
</status-grid>
</details>
</div>
</header>
<spacer-15></spacer-15>
<!--<div style="display:flex;">
<indent-block style="position:relative; z-index:10; background-color:#fefefa; display:inline; padding:0px 10px; max-width:70%;">
"Try to learn something about everything and everything about something."
<br />
- Thomas Huxley
</indent-block>
</div>
<hr class="spread" />-->
<div>
<a id="cont"></a>
<h3>Contents:</h3>
<!--<t-b>
<a href="#code">Code List</a>, <a href="#bites">Bite List</a>
</t-b>-->
<t-b>
The purpose of Code Bits is to present a sequence of compileable code snippets that illustrate the syntax,
idioms, and small patterns, for each of a set of languages. With these a user can learn a new language
by looking at a sequence of small codes in the new language and directly compare each of those with snippets
from a familiar language. At this time we provide code for three programming languages: C++, Rust, and C#
</t-b>
<t-b>
<a href="CppBits.html#hello">C++ Hello</a>,
<a href="RustBits.html#hello">Rust Hello</a>,
<a href="CSharpBits.html#hello">C# Hello</a>,
</t-b>
<h3>User Interface</h3>
<t-b>
Making that comparison in an ergonomic fashion is challenging. It isn't obvious how to move back and forth
between code fragments in two languages and also allow navigation among the codes in one language,
illustrating different bits of syntax,
especially in a way that users will find easy to grasp.
</t-b>
<t-b>
The idea behind the UI adopted for Code Bits is to support horizontal navigation between languages and vertical navigation
between the various code snippets in a single language. I've used a wooden barrel analogy. Each stave
in the barrel holds a series of code fragments in a single language. The bands that hold the barrel together
hold navigation buttons allowing rotation of the barrel to show another language. The space between bands
has three panels for (Left) brief statement of what this fragment is, (Middle) implementing code, (Right) commentary and
output generated by the implementing code.
</t-b>
<t-b>
This is illustrated in the diagrams, below:
<!--</t-b>
<t-b>-->
<div style="display:flex; flex-wrap:wrap; width:90vw;">
<photosizer-block src="Pictures/BitsBarrelMetaphor.jpg" width="300" class="photoSizerBlock left" style="width:max-content;">
<span style="font-family:'Comic Sans MS';">Figure 1. Barrel Metaphor</span>
</photosizer-block>
<photosizer-block src="Pictures/BitsUIScreenShot.jpg" width="550" class="photoSizerBlock left" style="width:max-content;">
<span style="font-family:'Comic Sans MS';">Figure 2. Code Bits UI</span>
</photosizer-block>
</div>
</t-b>
<t-b class="clear">
The cross-hatched region in Firgure 1. holds the contents of Figure 2., from the Rust stave. The bands hold
buttons that rotate the barrel and present the same view for another language, e.g., the left button in the hello world
section will rotate the C++ stave into view at the hello world level. Lower levels do the same thing, rotating to
another language at the same level.
</t-b>
<t-b>
To navigate vertically, click the Sections button on the bottom menu as shown in Figure 3.
<div style="display:flex">
<photosizer-block src="Pictures/CodeBitsVerticalNav.jpg" width="550" class="photoSizerBlock left">
<span style="font-family:'Comic Sans MS';">Figure 3. Code Bits Vertical Navigation</span>
</photosizer-block>
</div>
<t-b>
Each one of the menu items: hello, objects, data, ... is a link to the corresponding level in the current language.
So clicking each of the links in the Sections menu will walk vertically down the stave for that language.
Alternately, you can simply scroll down to see levels in sequence.
</t-b>
<t-b>
If you have a very wide screen or dual monitors you can right click on either of the show buttons
and select "Open Link in New Window" to compare the Bits for two languages side-by-side.
</t-b>
</t-b>
<div class="clear"></div>
<h3>Snippets:</h3>
<t-b>
Here are the currently planned code snippets.
The ordering of some of these may change. Ordering so that each code snippet depends only on its
predecessors doesn't necessary provide a good logical ordering. I'll be thinking about this
as the list gets completed.
</t-b>
<div class="indent">
<ol class="tight">
<li>
<hr />
<menu-item><a target="_blank" href="Resources/IdiomsAndPatterns/Tooling.html">Tooling</a></menu-item>
<menu-right>Tools to develop C#, C++, and Rust on both Windows and Linux</menu-right>
</li>
<li>
<hr />
<menu-item><a target="_blank" href="RustBits.html#hello">Hello World</a></menu-item>
<menu-right>use C# with dotnet CLI, C++ with CMake, and Rust with cargo to build Hello World</menu-right>
</li>
<li>
<hr />
<menu-item><a target="_blank" href="RustBits.html#objects">Hello Objects</a></menu-item>
<menu-right>Declare Classes/Structs and create instances.</menu-right>
</li>
<li>
<hr />
<menu-item><a target="_blank" href="RustBits.html#data">Hello data</a></menu-item>
<menu-right>Explore types. Consider bind, copy, assign, and move operations</menu-right>
</li>
<li>
<hr />
<menu-item><a target="_blank" href="RustBits.html#iter">Iteration</a></menu-item>
<menu-right>Demonstrate iteration through strings, slices, and byte arrays</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a target="_blank" href="RustBits.html#datastr">Data Structures</a></menu-item>
<menu-right>Demonstrate standard data structures</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a target="_blank" href="RustBits.html#func">Functions</a></menu-item>
<menu-right>Demonstrate function syntax</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a target="_blank" href="RustBits.html#genfunc">Generic functions</a></menu-item>
<menu-right>Demonstrate syntax for generic functions</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a target="_blank" href="RustBits.html#dip">Basic DepInverPrinc</a></menu-item>
<menu-right>Demonstrate basic Dependency Inversion Principle</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a target="_blank" href="RustBits.html#gendip">Generic DIP</a></menu-item>
<menu-right>Demonstrate Dependency Inversion Principle using Generic Trait</menu-right>
</li>
<!--<li class="undefined">
<hr />
<menu-item><a href="Resources/IdiomsAndPatterns/IaP_Libs.html">Create static libraries</a></menu-item>
<menu-right>Explore projects with library and console executive</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">Explore performance</a></menu-item>
<menu-right>use timers written in each language to compare performances</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">Explore ownership</a></menu-item>
<menu-right>implement simple graphs using C# references, C++ (smart) ptrs, and Rust indexes</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">Sharing with Rc<T> and Arc<T></a></menu-item>
<menu-right>Shared data</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">Explore strings</a></menu-item>
<menu-right>C#, C++, and Rust all use different string types</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">Iterations</a></menu-item>
<menu-right>Iterating over byte arrays and strings</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">More strings</a></menu-item>
<menu-right>Creating, mutating, converting</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">Functions</a></menu-item>
<menu-right>Syntax, passing by value and reference, return types</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">User defined types</a></menu-item>
<menu-right>Declaring, instantiating, methods, access, state mutation</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">Generics</a></menu-item>
<menu-right>Parameterization, Policies, lifetimes</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">Traits</a></menu-item>
<menu-right>Bounds on generic types, Static and dynamic dispatching</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">Lambdas</a></menu-item>
<menu-right>Syntax, data capture, transporting across scopes</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">Liskov Substitution Principle </a></menu-item>
<menu-right>Inheritance, dynamic dispatch, trait objects</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">Dependency Inversion Principle</a></menu-item>
<menu-right>Interfaces, object factories, trait objects</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">Decorator Pattern</a></menu-item>
<menu-right>Structure, application flow</menu-right>
</li>
<li class="undefined">
<hr />
<menu-item><a href="javascript:;">Observer Pattern</a></menu-item>
<menu-right>Structure, application flow</menu-right>
</li>-->
</ol>
</div>
<s-1Em></s-1Em>
<spacer-15></spacer-15>
<a id="build"></a>
<h3>Build:</h3>
<t-b>
The three languages have different tool chains, but the <a target="_blank" href="Resources/IdiomsAndPatterns/Tooling.html">Tooling</a>
link, above, shows that build processes can be very similar. Our goals are to build on both Windows and Linux.
We do that using Visual Studio Code as a text editor and building from its terminal.
<ul class="tight">
<li>
C# code was built from the command line with dotnet.
</li>
<li>
C++ code was built from the command line using CMake.
</li>
<li>
Rust code was built from the command line using the rust cargo tool.
</li>
</ul>
All of these builds work in nearly identical ways on both OS platforms.
</t-b>
<a id="status"></a>
<h3>Status:</h3>
<t-b>
The UI is stable and seems to work well, once users understand how it works. The analogy discussion is intended to
make the operation scheme easy to grasp for new users. User testing is starting, and you can supply feedback
<a target="_blank" href="https://github.com/JimFawcett/Bits/discussions/1">here</a>.
</t-b>
<t-b>
Code snippets and discussion are being added and should be complete by the end of Fall 2022.
</t-b>
</div>
<div style="height:20em;"></div>
<!--<img class="strip-photo" src="Pictures/CampusAtNight.jpg" alt="campus at night" />-->
</content>
<a id="bottom"></a>
<page-TOC id="pages" style="display:none;">
</page-TOC>
<page-sections id="sections" style="display:none;">
<sec-elem style="width:0.0em"> </sec-elem>
<menu-elem class="secElem"><a href="#bottom">bottom</a></menu-elem>
<menu-elem class="secElem"><a href="#status">status</a></menu-elem>
<menu-elem class="secElem"><a href="#build">build</a></menu-elem>
<menu-elem class="secElem"><a href="#cont">contents</a></menu-elem>
<menu-elem class="secElem"><a href="#top">top</a></menu-elem>
<div class='darkItem popupHeader' style="padding:0.25em 2.0em;" onclick="this.parentElement.style.display='none'">Sections</div>
</page-sections>
</main>
<frame-footer>
<menu-item style="width:1.0em;"> </menu-item>
<menu-elem id="nextLink2" onclick="bottomMenu.next()">Next</menu-elem>
<menu-elem id="prevLink2" onclick="bottomMenu.prev()">Prev</menu-elem>
<menu-elem id="pgbtn" onclick="bottomMenu.pages()">Pages</menu-elem>
<menu-elem onclick="bottomMenu.sections()">Sections</menu-elem>
<menu-elem onclick="bottomMenu.about()">About</menu-elem>
<menu-elem id="kysbtn" onclick="storyHlpMenu.keys()">Keys</menu-elem>
<!--<menu-item style="width:1.0em;"> </menu-item>
<menu-elem style="font-size:0.75em;" onclick="storyHlpMenu.decrZoomScreen()">Zout</menu-elem>
<menu-elem style="font-size:0.75em;" onclick="storyHlpMenu.normZoomScreen()">Zdef</menu-elem>
<menu-elem style="font-size:0.75em;" onclick="storyHlpMenu.incrZoomScreen()">Zin</menu-elem>-->
</frame-footer>
</page-frame>
</body>
</html>