-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (93 loc) · 6.74 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
135
136
137
138
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Elze.github.io : Elze's GitHub Page" />
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=2721969;
var sc_invisible=1;
var sc_security="5cfe5782";
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="free hit
counters" href="http://statcounter.com/free-hit-counter/"
target="_blank"><img class="statcounter"
src="http://c29.statcounter.com/2721969/0/5cfe5782/1/"
alt="free hit counters"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->
<!-- Matomo -->
<script type="text/javascript">
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//www.piw.geekitude.com/matomo/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<title>Elze.github.io</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/elze">View on GitHub</a>
<h1 id="project_title">Elze.github.io</h1>
<h2 id="project_tagline">Elze's GitHub Page</h2>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<h2>
<a name="these-are-some-of-my-personal-projects" class="anchor" href="#these-are-some-of-my-personal-projects"><span class="octicon octicon-link"></span></a>These are some of my personal projects.</h2>
<!-- <p><a href="https://github.com/elze/DBImport">DBImport: a program to import website visit log into a database, and extract some data from it.</a></p> -->
<h3>Angular 8 application with .NET Core 3 backend</h3>
<p><a href="https://github.com/elze/SiteVisitsNetCore2020Web"><b>Site Visits</b></a>, an Angular 8 application with .NET Core 3 backend that displays tabular data in an Angular Material table. It's built with:</p>
<ul>
<li>Angular 8</li>
<li>ngrx (state, store, effects, actions, reducers)</li>
<li>Angular Material Table</li>
<li>Angular Material Paginator with server-side pagination</li>
<li>routed pagination, i. e. each page is accessible by a route <resource_collection>/<page_number>/size/<page_size></li>
</ul>
<p>The data this application displays is a log of website visits, collected by StatCounter, my favorite website statistics tracking application. For a long time I have been downloading visit statistics for my various websites from StatCounter as .csv files. I have imported those CSV files into a database (I wrote a separate program for that), and I wrote this application to read from the database and display that data in ways that are convenient and interesting to me.</p>
<p>The application is currently running at <a href="http://elzecode.com/visitsnc3ng/flat-visits">http://elzecode.com/visitsnc3ng/flat-visits</a> . It is pretty barebones at this point, but I'm adding more features to it.</p>
<p>I wrote a couple of blog articles about the problems I overcome while building and deploying it:</p>
<p><a href="https://blog.geekitude.com/2020/07/05/the-mysterious-angular-couple-base-href-and-deploy-url/">Deployment issues that arise if your application runs in a subdirectory, and how to fix them.</a></p>
<p><a href="https://blog.geekitude.com/2020/07/07/angular-base-href-and-parametrized-routes/">A sequel to above: additional gotchas with parameterized Angular routes when your application runs in a subdirectory.</a></p>
<hr/>
<h3>Angular 11 application with Angular Material Tree</h3>
<p><b>SkillClusters</b> with Angular 11, Angular Material Tree and @ngrx/data. The data this application displays doesn't make much sense at the moment. It's a work in progress. For now, its purpose is to demonstrate how to get Angular Material Tree to work with @ngrx/data. It uses Angular 11 and @ngrx/data 10.</p>
<p>One of the first challenges you encounter in working with <code>@ngrx/data</code> is that it assumes what your backend API URLs are. It makes an assumption that your URLs use the singular version of the entity name for single entity routes, and plural version of entity names for collection routes. So, it will call <code>GET /user/1</code> if you want to get a single user, and <code>GET /users/</code> if you want to get all the users. It also appends a trailing slash. But your backend API routes could be named differently and that might be out of your control as a frontend developer. So as soon as you start working with <code>@ngrx/data</code> you are likely to run into this problem.</p>
<p>There are a couple of similar ways to solve it, and this application shows one of them. </p>
<p><a href="https://stackblitz.com/edit/angular-ngrx-data-custom-api-urls">It is deployed here on StackBlitz</a>.
<p><a href="https://github.com/elze/angular-ngrx-data-custom-api-urls">The source code is here</a>.
<hr/>
<h3>Applications I wrote for the Women Who Code Austin, TX React.js meetup to demonstrate some React.js concepts</h3>
<p><b>Application that demonstrates React.js routes.</b> <a href="https://zeit-buttons-serverless-elze.vercel.app/allskills">It is deployed on Vercel here</a>. Its backend runs Express.js. <a href="https://github.com/elze/zeit-buttons-serverless">The source code is here.</a></p>
<p><b>An application with React.js hooks and <code>redux-thunk</code> that demonstrates how to perform side effects, such as call the backend API, from within the Redux pattern. <a href="https://weather-usedispatch-thunk-elze.vercel.app">It is deployed on Vercel here</a>. Its backend runs Express.js. <a href="https://github.com/elze/weather-usedispatch-thunk">The source code is here.</a></p>
<hr/>
<!-- <p><a href="https://github.com/elze/elzeslides">Slides from my lightning talk on Powershell</a></p> -->
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
</footer>
</div>
</body>
</html>