aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--content/2020-03-22-simple-sse-based-pubsub-server.md8
-rw-r--r--content/2020-03-27-create-placeholder-images-with-sharp.md4
-rw-r--r--static/alert.svg99
-rw-r--r--static/style.css23
4 files changed, 128 insertions, 6 deletions
diff --git a/content/2020-03-22-simple-sse-based-pubsub-server.md b/content/2020-03-22-simple-sse-based-pubsub-server.md
index 945b4dd..d7bd451 100644
--- a/content/2020-03-22-simple-sse-based-pubsub-server.md
+++ b/content/2020-03-22-simple-sse-based-pubsub-server.md
@@ -23,7 +23,7 @@ The easiest way to explain this is with diagram bellow. Basic function is simple
23 23
24![How PubSub works](/assets/simple-pubsub-server/pubsub-overview.png) 24![How PubSub works](/assets/simple-pubsub-server/pubsub-overview.png)
25 25
26**ⓘ** These are some naive characteristics we want to achieve: 26**These are some naive characteristics we want to achieve:**
27 27
28- producer is publishing messages to subscribe topic, 28- producer is publishing messages to subscribe topic,
29- consumer is receiving messages from subscribed topic, 29- consumer is receiving messages from subscribed topic,
@@ -35,7 +35,7 @@ The easiest way to explain this is with diagram bellow. Basic function is simple
35- producer can publish to multiple topics, 35- producer can publish to multiple topics,
36- each message has a messageId. 36- each message has a messageId.
37 37
38**ⓘ** Known drawbacks: 38**Known drawbacks:**
39 39
40- messages will not be stored in a persistent queue or unreceived messages like [DeadLetterQueue](https://en.wikipedia.org/wiki/Dead_letter_queue) so old messages could be lost on server restart, 40- messages will not be stored in a persistent queue or unreceived messages like [DeadLetterQueue](https://en.wikipedia.org/wiki/Dead_letter_queue) so old messages could be lost on server restart,
41- [Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) opens a long-running connection between the client and the server so make sure if your setup is load balanced that the load balancer in this case can have long opened connection, 41- [Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) opens a long-running connection between the client and the server so make sure if your setup is load balanced that the load balancer in this case can have long opened connection,
@@ -103,7 +103,7 @@ Connection: keep-alive
103 103
104Google Chrome provides build-in debugging and exploration tool for [Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) which is quite nice and available from Developer Tools under Network tab. 104Google Chrome provides build-in debugging and exploration tool for [Server-Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) which is quite nice and available from Developer Tools under Network tab.
105 105
106**ⓘ** You can debug only client side events that get received and not the server ones. 106> You can debug only client side events that get received and not the server ones. For debugging server events add `console.log` to `server.js` code and print out events.
107 107
108![Google Chrome Developer Tools EventStream](../assets/simple-pubsub-server/chrome-debugging.png) 108![Google Chrome Developer Tools EventStream](../assets/simple-pubsub-server/chrome-debugging.png)
109 109
@@ -318,7 +318,7 @@ Subscriber is responsible for receiving new messages that come from server via p
318 318
319You can use either Developer Tools Console to see incoming messages or you can defer to Debugging with Google Chrome section above to see all EventStream messages. 319You can use either Developer Tools Console to see incoming messages or you can defer to Debugging with Google Chrome section above to see all EventStream messages.
320 320
321**ⓘ** Don't be alarmed if the subscriber gets disconnected from the server every so often. The code we have here resets connection every 15s but it automatically get reconnected and fetches all messages up to last received message id. This setting can be adjusted in `server.js` file; search for the `maxStreamDuration` variable. 321> Don't be alarmed if the subscriber gets disconnected from the server every so often. The code we have here resets connection every 15s but it automatically get reconnected and fetches all messages up to last received message id. This setting can be adjusted in `server.js` file; search for the `maxStreamDuration` variable.
322 322
323```html 323```html
324<!DOCTYPE html> 324<!DOCTYPE html>
diff --git a/content/2020-03-27-create-placeholder-images-with-sharp.md b/content/2020-03-27-create-placeholder-images-with-sharp.md
index 1386b2f..ec6fadd 100644
--- a/content/2020-03-27-create-placeholder-images-with-sharp.md
+++ b/content/2020-03-27-create-placeholder-images-with-sharp.md
@@ -49,7 +49,7 @@ All this code was wrapped inside a web service with some additional security che
49 49
50And at that point I needed to return placeholder images as a response in case key is missing or x,y are not allowed by the server etc. I could have created PNG in Gimp and just serve them but I wanted to respect aspect ratio and I didn't want to return some mangled images. 50And at that point I needed to return placeholder images as a response in case key is missing or x,y are not allowed by the server etc. I could have created PNG in Gimp and just serve them but I wanted to respect aspect ratio and I didn't want to return some mangled images.
51 51
52**ⓘ** Main problem with finding a clean solution I could copy and paste and change a bit was a task. API is changing constantly and there weren't clear examples or I was unable to find them. 52> Main problem with finding a clean solution I could copy and paste and change a bit was a task. API is changing constantly and there weren't clear examples or I was unable to find them.
53 53
54## Generating placeholder images using SVG 54## Generating placeholder images using SVG
55 55
@@ -80,4 +80,4 @@ const generatePlaceholderImageWithText = async (width, height, message) => {
80 80
81That is about it. Nothing more to it. You can change the color of the image by changing `background` and if you want to change text styling you can adapt SVG to your needs. 81That is about it. Nothing more to it. You can change the color of the image by changing `background` and if you want to change text styling you can adapt SVG to your needs.
82 82
83**ⓘ** Also be careful about the length of the text. This function positions text at the center and adds `20px` padding on all sides. If text is longer than the image it will get cut. 83> Also be careful about the length of the text. This function positions text at the center and adds `20px` padding on all sides. If text is longer than the image it will get cut.
diff --git a/static/alert.svg b/static/alert.svg
new file mode 100644
index 0000000..86658ec
--- /dev/null
+++ b/static/alert.svg
@@ -0,0 +1,99 @@
1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
4<svg
5 xmlns:dc="http://purl.org/dc/elements/1.1/"
6 xmlns:cc="http://creativecommons.org/ns#"
7 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
8 xmlns:svg="http://www.w3.org/2000/svg"
9 xmlns="http://www.w3.org/2000/svg"
10 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
11 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12 version="1.1"
13 id="Layer_1"
14 x="0px"
15 y="0px"
16 viewBox="0 0 492.804 492.804"
17 style="enable-background:new 0 0 492.804 492.804;"
18 xml:space="preserve"
19 sodipodi:docname="alert.svg"
20 inkscape:version="0.92.4 (5da689c313, 2019-01-14)"><metadata
21 id="metadata43"><rdf:RDF><cc:Work
22 rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
23 rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
24 id="defs41" /><sodipodi:namedview
25 pagecolor="#ffffff"
26 bordercolor="#666666"
27 borderopacity="1"
28 objecttolerance="10"
29 gridtolerance="10"
30 guidetolerance="10"
31 inkscape:pageopacity="0"
32 inkscape:pageshadow="2"
33 inkscape:window-width="782"
34 inkscape:window-height="480"
35 id="namedview39"
36 showgrid="false"
37 inkscape:zoom="0.47889223"
38 inkscape:cx="246.40199"
39 inkscape:cy="246.40199"
40 inkscape:window-x="1970"
41 inkscape:window-y="125"
42 inkscape:window-maximized="0"
43 inkscape:current-layer="g4" />
44<g
45 id="g6">
46 <g
47 id="g4">
48 <path
49 d="M482.592,381.614L288.863,69.966c-11.22-18.044-26.348-27.96-42.656-27.96c-16.32,0-31.456,9.924-42.672,27.976 L10.267,381.142c-11.216,18.04-13.316,35.268-5.94,48.564c7.432,13.38,23.36,20.728,44.864,20.752l394.608,0.3h-0.336v0.04 c19.272,0,37.56-7.316,44.984-20.652C495.824,416.89,493.808,399.666,482.592,381.614z M256.96,388.59 c-2.868,2.86-6.736,4.484-10.792,4.484c-4.048,0-7.988-1.64-10.868-4.5c-2.856-2.86-4.476-6.852-4.472-10.932 c0.008-4.056,0.956-8.024,3.82-10.86c2.924-2.888,5.404-4.54,9.26-4.54l0.72-0.008c4.04,0,8.84,1.66,11.744,4.564 c2.872,2.856,4.932,6.812,4.924,10.876C261.292,381.762,259.852,385.742,256.96,388.59z M246.216,331.398 c-4.12,0-7.94-1.6-10.852-4.512c-2.912-2.916-4.488-6.792-4.484-10.92l-1.616-139.068c0.016-8.512,5.972-15.416,13.684-15.416 h1.772c4.124,0,8.88,1.604,11.788,4.52c2.916,2.92,4.932,6.788,4.928,10.916l0.1,139.068 C261.528,324.482,254.724,331.398,246.216,331.398z"
50 id="path2"
51 style="fill:#000000" />
52 </g>
53</g>
54<g
55 id="g8">
56</g>
57<g
58 id="g10">
59</g>
60<g
61 id="g12">
62</g>
63<g
64 id="g14">
65</g>
66<g
67 id="g16">
68</g>
69<g
70 id="g18">
71</g>
72<g
73 id="g20">
74</g>
75<g
76 id="g22">
77</g>
78<g
79 id="g24">
80</g>
81<g
82 id="g26">
83</g>
84<g
85 id="g28">
86</g>
87<g
88 id="g30">
89</g>
90<g
91 id="g32">
92</g>
93<g
94 id="g34">
95</g>
96<g
97 id="g36">
98</g>
99</svg> \ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 6c6d5e5..c855b6d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -27,6 +27,29 @@ header {
27 margin-block-end: 40px; 27 margin-block-end: 40px;
28} 28}
29 29
30blockquote {
31 position: relative;
32 margin-block-start: 30px;
33 margin-block-end: 30px;
34
35 border: 1px solid red;
36}
37
38blockquote:before {
39 content: ' ';
40 background-image: url('/static/alert.svg');
41 background-size: 30px 30px;
42 height: 30px;
43 width: 30px;
44 position: absolute;
45 left: -40px;
46 top: 6px;
47}
48
49blockquote p {
50 padding-left: 10px;
51}
52
30h1 { 53h1 {
31 font-size: 280%; 54 font-size: 280%;
32 line-height: initial; 55 line-height: initial;
generated by cgit v1.2.3 (git 2.46.0) at 2026-05-01 04:14:40 +0000