</th>	Blue criminal</th>	Green criminal</th></tr></thead>
Witness testified Blue</td>	`P(B and WB) =</code>P(B) * (WB \| B) =</code>0.15 * 0.8</code></td>`	`P(G and WB) =</code>P(G) * P(WB \| G) =</code>0.85 * 0.2</code></td></tr>`
Witness testified Green</td>	`P(B and WG) =</code>P(B) * P(WG \| B) =</code>0.15 * 0.2</code></td>`	P(G and WG) =</code>P(G) * P(WG \| G) =</code>0.85 * 0.8</code></td></tr> </tbody></table> All of these 4 different events P(B and WB)</code>, P(B and WG)</code>, etc. are clearly disjoint</li> The sum of the “testified blue” row is equal to P(WB)</li> The sum of the “testified green” row is equal to P(WG)</li> The sum of the “blue criminal” column is equal to P(B)</li> The sum of the “green criminal” column is equal to P(G)</li> This table allows you to easily solve any of the conditional probabilities involving G or B and WG or WB</li> </ul> Bonus: Using the Bayes’ theorem🔗</a></h2> The Bayes’ theorem</a> states:</p> P(A \| B) * P(B) = P(B \| A) * P(A) </span></code></pre> Alternatively, if P(B)</code> is not zero, is:</p> P(A \| B) = (P(B \| A) * P(A)) / P(B) </span></code></pre> Using this, to compute P(B \| WB)</code> we need P(WB \| B)</code>, P(WB)</code> and P(B)</code>, which we have already computed above.</p> Bonus: Covid-19 tests🔗</a></h2> In the context of vaccines, people often talk about sensitivity</em> and specificity</em>. What are these and how do they relate to conditional probability?</p> Sensitivity🔗</a></h3> The probability that the test comes out as positive if the tested subject has the dissease. P(tests positive \| has disease)</code>.</p> Specificity🔗</a></h3> The probability that the test comes out as negative if the tested subject does not have the disease: P(tests negative \| does not have disease)</code>.</p> Sample problem🔗</a></h3> Assume that the coronavirus test has specificity of 0.85 and sensitivity of 0.95 and that 10% of the population has coronavirus at the moment.</p> What is the probability that you have coronavirus if:</p> You tested positve</li> You tested negative</li> </ul> Solution is left as an exercise to the reader.</p> Footnotes🔗</a></h2> [1] In practice, the color of the cab for each test should be selected at random. Try to think about why.</li> [2] Ideally this would be explicitly specified in the problem statement.</li> </ul> Introducing HSML 2012-08-23T00:00:00+00:00 HSML</code> (shorthand for Haskell’s Simple Markup Language</em>) is simple markup language with syntax similar to XML</code> and HTML</code>. It allows you to embed Haskell expressions and declarations in your templates.</p> </span> There are two incarnations of HSML</code></p> Classic HSML</code> (or just HSML</code>): this is the full blown templating system. These templates can contain expressions, declarations and template arguments. They are translated into record type and its instance of IsTemplate</code></a> type class.</p> </li> Simplified HSML</code>: this is a cut-down version of the full blown system, the only feature that is lacking are template arguments. Simplified HSML</code> templates are translated into expression of the type Text.Blaze.Markup</code></a>.</p> </li> </ul> Valid simplified HSML</code> is valid HSML</code>. Valid HSML</code> with its arguments removed is also valid simplified HSML</code>.</p> You can find HSML</code> on hackage</a> and follow its development on github</a>.</p> Syntax🔗</a></h2> Valid HSML</code> document starts with declarations of the template’s arguments, this is the only syntactical difference from simplified HSML</code>.</p> After that follows a list of chunks</em>, where chunk</em> is either text</em>, raw text</em>, element node</em>, element leaf</em> or haskell</em>, where haskell</em> can be either Haskell expression or Haskell declaration.</p> What follows is a brief description with examples for every HSML</code> construct.</p> Text🔗</a></h3> The most basic chunk</em> is text. Text can contain any characters, except for <</code> and {</code> which have to be escaped using \</code> (in fact, you can use \</code> to escape any character). Text is also automatically HTML</code> escaped.</p> Syntax🔗</a></h4> ? all characters except '<' and '{' which have to be escaped ? </span></code></pre>Example🔗</a></h4> This is text that ends with less-than sign and opening curly bracket \<\{ </span></code></pre>Raw Text🔗</a></h3> Raw text is similar to text, but is rendered as is, that means without HTML</code> escaping. Raw text can contain any characters, but can not contain \|}</code> as a substring (you can circumvent this by escaping).</p> Syntax🔗</a></h4> "{r\|" ? all characters, the sequence can not contain "\|}" substring ? "\|}" </span></code></pre>Example🔗</a></h4> {r\|This text is raw\|}, but this is not. Do you want "\|}" inside raw text? No problem, do it like this: {r\|foo \|\} bar\|} </span></code></pre>Element node🔗</a></h3> Element node is an element that can contain other chunks</em>. In HTML</code> it could be for example <div>...</div></code>. Element nodes can have attributes. Attributes, attribute names and attribute values can also be expressions.</p> These additional requirements have to be met:</p> The attribute expressions have to be of type Text.Blaze.Attribute</code></a>.</p> </li> The attribute name expressions have to be of type String</code>.</p> </li> The attribute value expressions have to be of a type that is an instance of Text.Blaze.ToValue</code></a> or of type Text.Blaze.AttributeValue</code></a>, depending on the template options</a>.</p> </li> </ul> Syntax🔗</a></h4> "<" element_name { attribute } ">" { chunk } "</" element_name ">" </span></code></pre>Example🔗</a></h4> <</span>ul </span>class</span>=</span>{h\|userID\|}</span>> <</span>li</span>>Name: {h\|userName\|}</</span>li</span>> <</span>li</span>>Age: {h\|userAge\|}</</span>li</span>> </</span>ul</span>> <</span>div </span>{h\|name\|}</span>="</span>static_value</span>" </span>static_name</span>=</span>{h\|value\|}</span>> This div has attribute with dynamic name and an attribute with dynamic value. </</span>div</span>> <</span>div </span>{h\|name\|}</span>=</span>{h\|value\|} </span>{h\|attribute\|}</span>> This div has attribute with dynamic name and value. </</span>div</span>> <</span>div </span>{h\|attribute\|}</span>> This div has fully dynamic attribute. This allows for optional attributes. </</span>div</span>> </span></code></pre>Element leaf🔗</a></h3> Element leaf is an element that can not contain any other chunks</em>. In HTML</code> it could be for example <br/></code>. Element leafs can also have attributes.</p> Syntax🔗</a></h4> "<" element_name { attribute } "/>" </span></code></pre>Example🔗</a></h4> Some things are just broken, <</span>br</span>/> just like this line. </span></code></pre>Haskell🔗</a></h3> The Haskell chunks</em> in your templates can be either expressions or declarations.</p> Declarations are scoped, this means that if you have a declaration inside an element node</em>, it can be used only inside that node (that also includes any nested chunks</em>). Top level declarations (those that are not inside any element node</em>) are visible in the whole template.</p> Expressions have to be of a type that is an instance of Text.Blaze.ToMarkup</code></a> or of type Text.Blaze.Markup</code></a>, depending on the template options</a>.</p> Syntax🔗</a></h4> "{h\|" expression \| declaration "\|}" </span></code></pre>Example🔗</a></h4> {h\| omnipresent = "omnipresent" \|} <</span>div</span>> {h\| local = "first local" \|} <</span>p</span>>{h\|omnipresent\|}</</span>p</span>> <</span>p</span>>{h\|local\|}</</span>p</span>> </</span>div</span>> <</span>div </span>class</span>=</span>{h\|omnipresent\|}</span>> {h\| local = "second local" \|} <</span>p</span>>{h\|omnipresent\|}</</span>p</span>> <</span>p</span>>{h\|local\|}</</span>p</span>> </</span>div</span>> </span></code></pre>Argument🔗</a></h3> Arguments get translated into fields of the record type, you can optionally specify the type of the field. If you decide to not specify the type, the type will become a parameter of the record type.</p> Syntax🔗</a></h4> "{a\|" <argument name> [ :: <argument type> ] "\|}" </span></code></pre>Example🔗</a></h4> {a\| name :: String \|} {a\| age :: Int \|} {a\| mystery \|} And the mystery was: {h\|mystery\|} </span></code></pre>Usage🔗</a></h2> If you have come this far, you might be interested in trying out HSML</code>. The Template.HSML</code> module exports all that you need and I recommend you to read the documentation</a> or ask me to improve it if you happen to find it lacking.</p> Often the most efficient way to learn is by example, so here is one:</p> Main.hs🔗</a></h4> {-# </span>LANGUAGE</span> TemplateHaskell #-} {-# </span>LANGUAGE</span> QuasiQuotes #-} {-# </span>LANGUAGE</span> RecordWildCards #-} </span>------------------------------------------------------------------------------ </span>import </span>Control.Monad </span>------------------------------------------------------------------------------ </span>import </span>Data.Monoid (</span>(<>)</span>) </span>------------------------------------------------------------------------------ </span>import qualified </span>Text.Blaze.Html5 </span>as </span>B </span>------------------------------------------------------------------------------ </span>import </span>Template.HSML </span>------------------------------------------------------------------------------ </span>data </span>User </span>= </span>User </span> { userID :: </span>Int </span>, userName :: </span>String </span>, userAge :: </span>Int </span> } </span>$(</span>hsmlFileWith (defaultOptions "</span>Default</span>") "</span>default_layout.hsml</span>") </span>homeTemplate </span>::</span> [</span>User</span>] </span>-> B</span>.</span>Markup </span>homeTemplate users = renderTemplate </span>Default </span> { defaultTitle = "</span>Home page</span>" , defaultSectionMiddle = middle , defaultSectionFooter = </span>[m\|</span> <p>Generated by HSML</p> </span>\|] </span> } </span>where </span> middle = </span>[m\| </span> <ul class="users"> {h\| forM_ users wrap \|} </span> </ul> </span>\|] </span> wrap u = </span>[m\|</span><li> {h\| userTemplate u \|} </li></span>\|] </span>userTemplate </span>:: User -> B</span>.</span>Markup </span>userTemplate </span>User</span>{..} = </span>[m\| </span> <ul class={h\| "user-" <> show userID \|}> <li>Name: {h\|userName\|}</li> <li>Age: {h\|userAge\|}</li> </span> </ul> </span>\|] </span></code></pre>default_layout.hsml🔗</a></h4> {a\| title :: String \|} {a\| sectionMiddle :: B.Markup \|} {a\| sectionFooter :: B.Markup \|} {h\| B.docType \|} <</span>html </span>lang</span>="</span>en</span>"> <</span>head</span>> <</span>meta </span>charset</span>="</span>utf-8</span>"/> <</span>title</span>>{h\|title\|}</</span>title</span>> </</span>head</span>> <</span>body</span>> <</span>div </span>class</span>="</span>section middle</span>"> {h\|sectionMiddle\|} </</span>div</span>> <</span>footer</span>> {h\|sectionFooter\|} </</span>footer</span>> </</span>body</span>> </</span>html</span>> </span></code></pre> And the prettified result of renderMarkup $ homeTemplate [User 1 "Jon Doe" 16, User 2 "Jane Roe" 17]</code> is this:</p> <!</span>DOCTYPE </span>HTML</span>> <</span>html </span>lang</span>="</span>en</span>"> <</span>head</span>> <</span>meta </span>charset</span>="</span>utf-8</span>"> <</span>title</span>>Home page</</span>title</span>> </</span>head</span>> <</span>body</span>> <</span>div </span>class</span>="</span>section middle</span>"> <</span>ul </span>class</span>="</span>users</span>"> <</span>li</span>> <</span>ul </span>class</span>="</span>user-1</span>"> <</span>li</span>>Name: Jon Doe</</span>li</span>> <</span>li</span>>Age: 16</</span>li</span>> </</span>ul</span>> </</span>li</span>> <</span>li</span>> <</span>ul </span>class</span>="</span>user-2</span>"> <</span>li</span>>Name: Jane Roe</</span>li</span>> <</span>li</span>>Age: 17</</span>li</span>> </</span>ul</span>> </</span>li</span>> </</span>ul</span>> </</span>div</span>> <</span>footer</span>> <</span>p</span>>Generated by HSML</</span>p</span>> </</span>footer</span>> </</span>body</span>> </</span>html</span>> </span></code></pre>Thoughts🔗</a></h2> Currently, nesting HSML</code> within expressions or declarations within HSML</code> (and of course deeper nesting) is not really user-friendly. That’s because neither the embedded Haskell expressions nor declarations can contain Quasi Quotes (as haskell-src-meta</code> does not support that at the moment – there is a pending ticket</a> for that). But I think that it should be possible to work around that by transforming QuasiQuote</code></a> into SpliceExp</code></a> – I will definitely try it out.</p> Epilogue🔗</a></h2> I hope you liked the article and HSML</code>. There are still few things that remain to be done, like better test coverage, measure the impact on run-time performance, consider using attoparsec</code> instead of parsec</code>, etc.</p> If you have any comments or ideas for improvement, I will gladly hear them out.</p>

Palmík

Universal server-side rendering for better SEO

2021-03-26T16:00:00+00:00

Universal approach to server-side rendering (SSR) for sites that rely on JavaScript for client-side rendering. 

Why server-side rendering?🔗</a></h2>
In short, client-side rendered pages pose a difficulty for search engines. This can harm the discoverability and ranking of your site on search engines. Checkout How client-side rendering hinders SEO</a> to learn more.
Server-side rendering approaches🔗</a></h2>
Many popular frontend JavaScript frameworks come with their own ways of implementing server ide rendering:

React</a> comes with ReactDOMServer</a>.</li>
Vue</a> comes with vue-server-renderer</a>.</li>
Angular</a> comes with Angular Universal</a>.</li> </ul>
If you are using one of these frameworks, it might be worth investigating these approaches instead of the universal approach I am going to present here.
Advantages of the universal approach:

Works with any site, regardless of framework.</li>
Does not require rewriting your code to work in Node (getting rid of `document</code>, window</code>, etc.).</li> </ul> Disadvantages of the universal approach:`More resource intensive and potentially higher latency.</li> No implicit support for hydration</a>, this means that you are going to lose interactivity and as such it’s in most cases only useful for search engine crawlers, not for regular users of your website.</li> </ul> Using Prerender for universal server-side rendering🔗</a></h2> Prerender</a> is a Node server that uses headless Chrome to render websites, much like search engines such as Google</a>. For our set-up we will use Nginx</a> as a reverse proxy and docker-compose</a> to tie it all together. Nginx set-up🔗</a></h3> How does it work? Inspect the request and decide whether we want to prerender the response This logic is based mostly on the User-Agent</code> request header.</li> </ul> </li> If prerender: Pass the request to the “prerender” service, which proxies it to the “server” service.</li> If not prerender: Pass the request directly to the “server” service.</li> </ol> The Nginx config assumes that the Prerender service is running at http://prerender:3000</code> and that your website’s server (that you want to enable server-side rendering for) is running at http://server:10080</code>. events { } http { # Handle http://example.com # - Prerender for scrapers server { listen 80; server_name example.com; location / { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; # Logic that decides whether we should use pre-render or not. # It is based mainly on the user agent, as shown here: # https://gist.github.com/thoop/8165802 set $prerender 0; # Prerender for bot user agents. if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp") { set $prerender 1; } if ($args ~ "_escaped_fragment_") { set $prerender 1; } if ($http_user_agent ~ "Prerender") { set $prerender 0; } # Do not prerender for plain resources. if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") { set $prerender 0; } if ($prerender = 1) { rewrite .* /http://server:10080$request_uri? break; proxy_pass http://prerender:3000; } if ($prerender = 0) { proxy_pass http://server:10080; } } } } </code></pre> In most cases, you will want to also handle HTTPS traffic. For that, refer to Handling HTTPS with Nginx</a>. Here’s what a config that does both prerendering as well as HTTPS handling could look like: events { } http { # Handle https://example.com # # - SSL # - Prerender for scrapers server { listen 443 ssl; server_name example.com; ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; ssl_session_timeout 1d; ssl_session_cache builtin:100 shared:SSL:10m; ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256'; ssl_prefer_server_ciphers on; location / { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; add_header Content-Security-Policy "default-src 'none';connect-src 'self' www.google-analytics.com;manifest-src 'self';style-src 'self';script-src 'self' www.googletagmanager.com;img-src 'self' www.googletagmanager.com;frame-ancestors 'self';base-uri 'none';"; add_header Strict-Transport-Security "max-age=15768000; includeSubdomains; preload"; add_header X-Content-Type-Options nosniff; add_header X-Frame-Options SAMEORIGIN; add_header X-XSS-Protection "1; mode=block"; set $prerender 0; if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp") { set $prerender 1; } if ($args ~ "_escaped_fragment_") { set $prerender 1; } if ($http_user_agent ~ "Prerender") { set $prerender 0; } if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") { set $prerender 0; } if ($prerender = 1) { rewrite .* /http://server:10080$request_uri? break; proxy_pass http://prerender:3000; } if ($prerender = 0) { proxy_pass http://server:10080; } } } # Redirect http://example.com and http://www.example.com to https://example.com server { listen 80; server_name www.example.com example.com; return 301 https://example.com$request_uri; } # Redirect https://www.example.com to https://example.com server { listen 443; server_name www.example.com; ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; ssl_session_timeout 1d; ssl_session_cache builtin:100 shared:SSL:10m; ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256'; ssl_prefer_server_ciphers on; return 301 https://example.com$request_uri; } } </code></pre>Docker-compose set-up🔗</a></h3> We use docker-compose</code> to tie it all together. It runs the Nginx service, the Prerender service and optionally also the server you want server-side rendering for: version: "3.7" services: # You would put the service for your website's server here. # If you do not use Docker for your website's server, you should remove this. server: # We assume that the "server" service is internally exposed at the port 10080. expose: - "10080" nginx: image: nginx:latest volumes: # This should be the location of the nginx.conf above. - ./nginx.conf:/etc/nginx/nginx.conf # This assumes you use Let's Encrypt for your SSL certificate. - /etc/letsencrypt/:/etc/letsencrypt ports: # The Nginx server is exposed at port 80 and 443 for HTTP and HTTPS traffic respectively. - "80:80" - "443:443" links: # Remove this if you do not use the "server" service for your website's server. - "server" # This allows you to connect to localhost of the host machine. # Only needed if your website's server runs outside of this docker-compose # (i.e. you do not use the "server" service above). extra_hosts: - "host.docker.internal:host-gateway" prerender: image: tvanro/prerender-alpine:latest environment: MEMORY_CACHE: 0 CACHE_MAXSIZE: 0 expose: - "3000" # This allows you to connect to localhost of the host machine. # Only needed if your website's server runs outside of this docker-compose # (i.e. you do not use the "server" service above). extra_hosts: - "host.docker.internal:host-gateway" </code></pre> If you do not want to use Docker for your website’s server that’s fine. Assuming it’s running on the localhost of your host machine, e.g. http://localhost:10080</code>, you have several options, but the easiest would be changing http://server:10080</code> in nginx.conf</code> to http://host.docker.internal:10080</code>. You can configure the prerender service using environment variables. In the above, I disabled caching because in my case it’s unlikely that the same page will be retrived by crawlers more than once in a short period of time. See the documentation of the Docker image</a> for details. Now you can simply run docker-compose up</code> to start up all the necessary services. Resources🔗</a></h2> Nginx guide</a></li> Docker guide</a></li> Docker-compose guide</a></li> </ul>

How to handle HTTPS with Nginx 2021-03-26T15:30:00+00:00 How to use Nginx to handle HTTPS and follow all the best practices? What do we want to handle? Redirect http://example.com</code> to https://example.com</code>.</li> Redirect https://www.example.com</code> to https://example.com</code>.</li> Use only modern protocols.</li> Use only strong ciphers.</li> Use content security policy (CSP)</a>. </li> Use HTTP strict transport policy (HSTS)</a> which can prevent downgrade (https</code> –> http</code>) attacks.</li> </ul> Here’s what the config would look like, we will unpack it section-by-section below. events { } http { # Handle https://example.com server { listen 443 ssl; server_name example.com; # Assuming you use Let's Encrypt for your SSL certificate. ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; ssl_session_timeout 1d; ssl_session_cache builtin:100 shared:SSL:10m; ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256'; ssl_prefer_server_ciphers on; # curl https://ssl-config.mozilla.org/ffdhe2048.txt > /path/to/dhparam ssl_dhparam /path/to/dhparam; location / { add_header Content-Security-Policy "default-src 'none';connect-src 'self' www.google-analytics.com;manifest-src 'self';style-src 'self';script-src 'self' www.googletagmanager.com;img-src 'self' www.googletagmanager.com;frame-ancestors 'self';base-uri 'none';"; add_header Strict-Transport-Security "max-age=15768000; includeSubdomains; preload"; add_header X-Content-Type-Options nosniff; add_header X-Frame-Options SAMEORIGIN; add_header X-XSS-Protection "1; mode=block"; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; # Pass the request to your server. proxy_pass http://server:10080; } } # Redirect http://example.com and http://www.example.com to https://example.com server { listen 80; server_name www.example.com example.com; return 301 https://example.com$request_uri; } # Redirect https://www.example.com to https://example.com server { listen 443; server_name www.example.com; ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; ssl_session_timeout 1d; ssl_session_cache builtin:100 shared:SSL:10m; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256'; ssl_prefer_server_ciphers on; ssl_dhparam /path/to/dhparam; return 301 https://example.com$request_uri; } } </code></pre>SSL Config🔗</a></h3> The Nginx documentation</a> is a great resource to underatand the different SSL config options. ssl_session_cache</code>: Allows the resue of TLS sessions. </li> ssl_session_timeout 1d</code>: Maximum recommended value from TLS RFC and from Nginx documentation. Higher value means potentially higher server-side resource use, higher chance that the same TLS session can be reused by the client (lower latency / resource use), very high value might affect forward secrecy. </li> ssl_ciphers</code>: Sets the allowlist of ciphers to only “strong” options, very old clients that do not support any of the strong ciphers might not be able to connect.</li> ssl_prefer_server_ciphers off</code>: Lets the client choose the cipher from the allowlist. The client will likely choose the fastest cipher from the allowlist above.</li> ssl_dhparam</code>: Overrides the default Diffie-Helman parameters which would by default use 1024 bit key (which is within the realm of possibility of being cracked).curl https://ssl-config.mozilla.org/ffdhe2048.txt > /path/to/dhparam </code></pre></li> </ul> Content-Security-Policy header🔗</a></h3> The header value we use in the config is very conservative, essentially only allowing the site’s origin and Google Analytics to do anything. Let’s unpact it piece-by-piece, as you will likely need to modify it yourself: default-src 'none'; </code></pre> Don’t allow anything by default. </li> </ul> connect-src 'self' www.google-analytics.com; </code></pre> Allow requests only to the website’s origin / domain and to Google Analytics. Documentation</a>.</li> </ul> manifest-src 'self'; </code></pre> Allow manifest only for the website’s origin / domain. Documentation</a>.</li> </ul> style-src 'self'; </code></pre> Allow styles only for the website’s origin / domain. Documentation</a>.</li> </ul> script-src 'self' www.googletagmanager.com; </code></pre> Allow script sources only from the website’s origin / domain and from Google Analytics. Documentation</a>.</li> </ul> img-src 'self' www.googletagmanager.com; </code></pre> Allow image sources only from the website’s origin / domain and from Google Analytics. Documentation</a>.</li> </ul> frame-ancestors 'self'; </code></pre> Allow only the website’s domain / origin itself to embed it in iframe. Documentation</a>.</li> </ul> base-uri 'none'; </code></pre> Do not allow setting any URI in the <base></code> element. The <base></code> element allows you to set the URI relative to which sources like /foo/bar.js</code> are resolved. Setting it to none</code> prevents attackers from changing the URI, which would otherwise allow them to load e.g. any JavaScript they want. Documentation</a>.</li> </ul> X-Content-Type-Options header🔗</a></h3> Prevents browsers from trying to “guess” the MIME type</a> of a resource and makes it instead rely on the explicitly specified type. This makes sure that the browser does not turn non-execuable resource into executable resource. Strict-Transport-Security🔗</a></h3> This makes sure that future requests to the domain (or its subdomains) will be done exclusivery over HTTPS and never over HTTP. The max-age</code> value determines for how long, since the last request, this should be the case. This means that if you stop serving the website over HTTPS, users will not be able to connect to it (at least not without ignoring a big fat warning first). How client-side rendering hinders SEO 2021-03-26T15:00:00+00:00 You have built the perfect website – perhaps even single-page app (SPA) – using the client-side JavaScript framework du-jour like React, Vue or Svelte. Now you want to rank highly on Google Search. What are the common pitfalls of client-rendered sites when it comes to search engine optimization (SEO)? Learn the basics of how search engines process web pages and how it’s affecting your site that relies on JavaScript for client-side rendering. SEO pitfalls of SPAs🔗</a></h2> While Google and other major search engines have some support for client-side rendering, it’s important to understand how things work under the hood. Search engines process your website in three main stages: Crawling. Site is downloaded and HTML processed. No JavaScript is executed, the search engine can’t access the HTML that would be generated by your JavaScript code.</li> New links from the HTML are potentially added to the crawling queue.</li> If JavaScript is present, the page is added to the rendering queue, otherwise it goes directly into the index queue. At this stage, different search engines might do things differently, some might send the page for early indexing even if JavaScript (that might change the HTML content of the page) is present.</li> </ul> </li> Rendering. Site is rendered using a headless browser</a>. All JavaScript is executed and the search engine can access the final HTML.</li> New links from the HTML are potentially added to the crawling queue.</li> The page is added to the indexing queue.</li> </ul> </li> Indexing. The contents of the page are indexed and eventually become discoverable by the users. </li> </ol> The following diagram from a Google article</a> summarizes the situation nicely: </figcaption> </figure> Client-side rendering slows down crawling and indexing🔗</a></h3> For sites that rely on client-side rendering, the full HTML content only becomes available after the rendering stage. That means that discovery of any new links from the page is delayed. Some search engines also slow down the crawl rate of sites that rely on the rendering stage. Client-side rendering can lead to incorrect title and snippet🔗</a></h3> The title and description of the page is also commonly handled by JavaScript. This could result in the page being indexed with a wrong title and snippet, until the rendered version of the page is reindexed. I have observed this behaviour with my own site. With server-side rendering. Everything is fine: </figcaption> </figure> Without server-side rendering. The title and the snippet in Google search results are the same regardless of the page, since I rely on JavaScript to set the title and the description to the proper values: </figcaption> </figure> Renderer might use outdated headless browser🔗</a></h3> Depending on the search engine, the browser used for the rendering stage might be outdated. For Google specifically this should no longer be an issue</a>. You can use Google’s URL inspection tool</a> to check what your site would look like to Google after rendering. Server-side rendering to the rescue🔗</a></h2> Does you website rely on JavaScript for client-side rendering? Then it probably suffers from all of the above. Don’t worry, no matter how your site works or whichever framework it’s using, you can use the approach described in Universal server-side rendering</a> to add server-side rendering on top of your website without having to rewrite any of your existing code. Conditional Probability, Fast and Slow 2021-03-20T00:00:00+00:00 Now more than ever, we’re bombarded with terms like “sensitivity” or “specificity” in relation to Covid-19 tests. It turns out that to understand these, you first need to understand conditional probability. Because common sense intuition can be often misleading, I will walk you through a conditional probablity problem about Blue and Green cabbies from the book Thinking, Fast and Slow</a>. Few weeks ago a friend reached out to me to help them with understanding the solution to a particular question about probablity from the book Thinking, Fast and Slow</a> by Daniel Kahneman</a>. The question goes like this: A cab was involved in a hit-and-run accident at night. Two cab companies, the Green and the Blue, operate in the city. You are given the following data: 85% of the cabs in the city are Green and 15% are Blue.</li> A witness identified the cab as Blue. The court tested the reliability of the witness under the circumstances that existed on the night of the accident and concluded that the witness correctly identified each one of the two colors 80% of the time and failed 20% of the time.</li> </ul> What is the probability that the cab involved in the accident was Blue rather than Green? </blockquote> Notation🔗</a></h2> Let’s introduce some useful notation for different “events”: G</code> = green caused the accident </li> B</code> = blue caused the accident </li> WG</code> = !WB</code> = witness testified green = witness did not testify blue</li> WB</code> = !WB</code> = witness testified blue = witness did not testify green</li> </ul> Understanding the problem statement🔗</a></h2> What does it mean that the court tested the reliabilty of the witness? One way to think about this is that the court performed 100 tests where they recreated the situation of the accident (like weather and light conditions), in 85 of those tests the cab was Blue and in 15 the cab was Green [1]. This allows the court to compute: P(WB | B)</code> – the probability that the witness says the cab was Blue given that it was really Blue. In other words, the probability that the witness is right if the culprit is Blue.</li> P(WB | G)</code> – the probability that the witness says the cab was Blue given that it was really Green. In other words, the probability that the witness is wrong if the culprit is Green.</li> Similary for P(WG | G)</code> and P(WG | B)</code>.</li> </ul> Based on the problem statement: P(WB | B)</code> = P(WG | G)</code> = 0.8</li> P(WB | G)</code> = P(WG | B)</code> = 0.2</li> </ul> We will also need to make an assumption [2], which is that drivers of the two companies are equally likely to commit hit-and-run accidents. Based on the problem statement, since 85% of cabs are Green and 15% of them are Blue and each cab is equally likely to cause an accident: P(B)</code> = 0.85</li> P(G)</code> = 0.15</li> </ul> Using our notation, the task is to compute P(B | WB)</code> – the probability that the cab involved in the accident was Blue given that the witness identified the cab as Blue. Solving the problem🔗</a></h2> We are to find P(B | WB)</code>. We are given: P(G) = 0.85</code></li> P(B) = 0.15</code></li> P(WB | B) = P(WG | G) = 0.8</code></li> P(WB | G) = P(WG | B) = 0.2</code></li> </ul> To solve this, we will refer to the definition of conditional probability</a>: P(A | B) * P(B) = P(A and B) </code></pre> Applying this to our problem: P(B | WB) * P(WB) = P(B and WB)</code> therefore P(B | WB) = P(B and WB) / P(WB)</code></li> P(WB | B) * P(B) = P(B and WB)</code></li> </ol> Based on (1), to compute P(B | WB)</code> we need to know P(B and WB)</code> and P(WB)</code>. To compute P(B and WB)</code> we use (2). We already know P(WB | B)</code> and P(B)</code>, so we simply substitute: P(WB | B) * P(B) = 0.8 * 0.15</code>. To compute P(WB)</code> we need to consider when WB</code> can occur (i.e. the witness says that the car is Blue). Either: The car is Blue and the witness is right: P(B) * P(WB | B)</code> = 0.15 * 0.8</code></li> The car is Green and the witness is wrong: P(B) * P(WB | G)</code> = 0.15 * 0.2</code></li> </ul> Given that these two options are exclusive, we can sum up these two probabilities to obtain P(WB)</code>. Now that we know both P(B and WB)</code> and P(WB)</code>, we simply substitue into (2): P(B | WB) = P(B and WB) / P(WB) = (0.8 * 0.15) / P(WB) = (0.8 * 0.15) / (0.15 * 0.8 + 0.15 * 0.2) = 0.41379... </code></pre> And voila! This is the answer. Bonus: Using the “tabular” method🔗</a></h2> </th> Blue criminal</th> Green criminal</th></tr></thead> Witness testified Blue</td> P(B and WB) =</code>P(B) * (WB | B) =</code>0.15 * 0.8</code></td> P(G and WB) =</code>P(G) * P(WB | G) =</code>0.85 * 0.2</code></td></tr> Witness testified Green</td> P(B and WG) =</code>P(B) * P(WG | B) =</code>0.15 * 0.2</code></td> P(G and WG) =</code>P(G) * P(WG | G) =</code>0.85 * 0.8</code></td></tr> </tbody></table> All of these 4 different events P(B and WB)</code>, P(B and WG)</code>, etc. are clearly disjoint</li> The sum of the “testified blue” row is equal to P(WB)</li> The sum of the “testified green” row is equal to P(WG)</li> The sum of the “blue criminal” column is equal to P(B)</li> The sum of the “green criminal” column is equal to P(G)</li> This table allows you to easily solve any of the conditional probabilities involving G or B and WG or WB</li> </ul> Bonus: Using the Bayes’ theorem🔗</a></h2> The Bayes’ theorem</a> states: P(A | B) * P(B) = P(B | A) * P(A) </code></pre> Alternatively, if P(B)</code> is not zero, is: P(A | B) = (P(B | A) * P(A)) / P(B) </code></pre> Using this, to compute P(B | WB)</code> we need P(WB | B)</code>, P(WB)</code> and P(B)</code>, which we have already computed above. Bonus: Covid-19 tests🔗</a></h2> In the context of vaccines, people often talk about sensitivity and specificity. What are these and how do they relate to conditional probability? Sensitivity🔗</a></h3> The probability that the test comes out as positive if the tested subject has the dissease. P(tests positive | has disease)</code>. Specificity🔗</a></h3> The probability that the test comes out as negative if the tested subject does not have the disease: P(tests negative | does not have disease)</code>. Sample problem🔗</a></h3> Assume that the coronavirus test has specificity of 0.85 and sensitivity of 0.95 and that 10% of the population has coronavirus at the moment. What is the probability that you have coronavirus if: You tested positve</li> You tested negative</li> </ul> Solution is left as an exercise to the reader. Footnotes🔗</a></h2> [1] In practice, the color of the cab for each test should be selected at random. Try to think about why.</li> [2] Ideally this would be explicitly specified in the problem statement.</li> </ul> Introducing HSML 2012-08-23T00:00:00+00:00 HSML</code> (shorthand for Haskell’s Simple Markup Language) is simple markup language with syntax similar to XML</code> and HTML</code>. It allows you to embed Haskell expressions and declarations in your templates. There are two incarnations of HSML</code> Classic HSML</code> (or just HSML</code>): this is the full blown templating system. These templates can contain expressions, declarations and template arguments. They are translated into record type and its instance of IsTemplate</code></a> type class. </li> Simplified HSML</code>: this is a cut-down version of the full blown system, the only feature that is lacking are template arguments. Simplified HSML</code> templates are translated into expression of the type Text.Blaze.Markup</code></a>. </li> </ul> Valid simplified HSML</code> is valid HSML</code>. Valid HSML</code> with its arguments removed is also valid simplified HSML</code>. You can find HSML</code> on hackage</a> and follow its development on github</a>. Syntax🔗</a></h2> Valid HSML</code> document starts with declarations of the template’s arguments, this is the only syntactical difference from simplified HSML</code>. After that follows a list of chunks, where chunk is either text, raw text, element node, element leaf or haskell, where haskell can be either Haskell expression or Haskell declaration. What follows is a brief description with examples for every HSML</code> construct. Text🔗</a></h3> The most basic chunk is text. Text can contain any characters, except for <</code> and {</code> which have to be escaped using \</code> (in fact, you can use \</code> to escape any character). Text is also automatically HTML</code> escaped. Syntax🔗</a></h4> ? all characters except '<' and '{' which have to be escaped ? </code></pre>Example🔗</a></h4> This is text that ends with less-than sign and opening curly bracket \<\{ </code></pre>Raw Text🔗</a></h3> Raw text is similar to text, but is rendered as is, that means without HTML</code> escaping. Raw text can contain any characters, but can not contain |}</code> as a substring (you can circumvent this by escaping). Syntax🔗</a></h4> "{r|" ? all characters, the sequence can not contain "|}" substring ? "|}" </code></pre>Example🔗</a></h4> {r|This text is raw|}, but this is not. Do you want "|}" inside raw text? No problem, do it like this: {r|foo |\} bar|} </code></pre>Element node🔗</a></h3> Element node is an element that can contain other chunks. In HTML</code> it could be for example <div>...</div></code>. Element nodes can have attributes. Attributes, attribute names and attribute values can also be expressions. These additional requirements have to be met: The attribute expressions have to be of type Text.Blaze.Attribute</code></a>. </li> The attribute name expressions have to be of type String</code>. </li> The attribute value expressions have to be of a type that is an instance of Text.Blaze.ToValue</code></a> or of type Text.Blaze.AttributeValue</code></a>, depending on the template options</a>. </li> </ul> Syntax🔗</a></h4> "<" element_name { attribute } ">" { chunk } "</" element_name ">" </code></pre>Example🔗</a></h4> <ul class={h|userID|}> <li>Name: {h|userName|}</li> <li>Age: {h|userAge|}</li> </ul> <div {h|name|}="static_value" static_name={h|value|}> This div has attribute with dynamic name and an attribute with dynamic value. </div> <div {h|name|}={h|value|} {h|attribute|}> This div has attribute with dynamic name and value. </div> <div {h|attribute|}> This div has fully dynamic attribute. This allows for optional attributes. </div> </code></pre>Element leaf🔗</a></h3> Element leaf is an element that can not contain any other chunks. In HTML</code> it could be for example </code>. Element leafs can also have attributes. Syntax🔗</a></h4> "<" element_name { attribute } "/>" </code></pre>Example🔗</a></h4> Some things are just broken, <br/> just like this line. </code></pre>Haskell🔗</a></h3> The Haskell chunks in your templates can be either expressions or declarations. Declarations are scoped, this means that if you have a declaration inside an element node, it can be used only inside that node (that also includes any nested chunks). Top level declarations (those that are not inside any element node) are visible in the whole template. Expressions have to be of a type that is an instance of Text.Blaze.ToMarkup</code></a> or of type Text.Blaze.Markup</code></a>, depending on the template options</a>. Syntax🔗</a></h4> "{h|" expression | declaration "|}" </code></pre>Example🔗</a></h4> {h| omnipresent = "omnipresent" |} <div> {h| local = "first local" |} <p>{h|omnipresent|}</p> <p>{h|local|}</p> </div> <div class={h|omnipresent|}> {h| local = "second local" |} <p>{h|omnipresent|}</p> <p>{h|local|}</p> </div> </code></pre>Argument🔗</a></h3> Arguments get translated into fields of the record type, you can optionally specify the type of the field. If you decide to not specify the type, the type will become a parameter of the record type. Syntax🔗</a></h4> "{a|" <argument name> [ :: <argument type> ] "|}" </code></pre>Example🔗</a></h4> {a| name :: String |} {a| age :: Int |} {a| mystery |} And the mystery was: {h|mystery|} </code></pre>Usage🔗</a></h2> If you have come this far, you might be interested in trying out HSML</code>. The Template.HSML</code> module exports all that you need and I recommend you to read the documentation</a> or ask me to improve it if you happen to find it lacking. Often the most efficient way to learn is by example, so here is one: Main.hs🔗</a></h4> {-# LANGUAGE TemplateHaskell #-} {-# LANGUAGE QuasiQuotes #-} {-# LANGUAGE RecordWildCards #-} ------------------------------------------------------------------------------ import Control.Monad ------------------------------------------------------------------------------ import Data.Monoid ((<>)) ------------------------------------------------------------------------------ import qualified Text.Blaze.Html5 as B ------------------------------------------------------------------------------ import Template.HSML ------------------------------------------------------------------------------ data User = User { userID :: Int , userName :: String , userAge :: Int } $(hsmlFileWith (defaultOptions "Default") "default_layout.hsml") homeTemplate :: [User] -> B.Markup homeTemplate users = renderTemplate Default { defaultTitle = "Home page" , defaultSectionMiddle = middle , defaultSectionFooter = [m| Generated by HSML |] } where middle = [m| <ul class="users"> {h| forM_ users wrap |} </ul> |] wrap u = [m|<li> {h| userTemplate u |} </li>|] userTemplate :: User -> B.Markup userTemplate User{..} = [m| <ul class={h| "user-" <> show userID |}> <li>Name: {h|userName|}</li> <li>Age: {h|userAge|}</li> </ul> |] </code></pre>default_layout.hsml🔗</a></h4> {a| title :: String |} {a| sectionMiddle :: B.Markup |} {a| sectionFooter :: B.Markup |} {h| B.docType |} <html lang="en"> <head> <meta charset="utf-8"/> <title>{h|title|}</title> </head> <body> <div class="section middle"> {h|sectionMiddle|} </div> <footer> {h|sectionFooter|} </footer> </body> </html> </code></pre> And the prettified result of renderMarkup $ homeTemplate [User 1 "Jon Doe" 16, User 2 "Jane Roe" 17]</code> is this: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Home page</title> </head> <body> <div class="section middle"> <ul class="users"> <li> <ul class="user-1"> <li>Name: Jon Doe</li> <li>Age: 16</li> </ul> </li> <li> <ul class="user-2"> <li>Name: Jane Roe</li> <li>Age: 17</li> </ul> </li> </ul> </div> <footer> <p>Generated by HSML</p> </footer> </body> </html> </code></pre>Thoughts🔗</a></h2> Currently, nesting HSML</code> within expressions or declarations within HSML</code> (and of course deeper nesting) is not really user-friendly. That’s because neither the embedded Haskell expressions nor declarations can contain Quasi Quotes (as haskell-src-meta</code> does not support that at the moment – there is a pending ticket</a> for that). But I think that it should be possible to work around that by transforming QuasiQuote</code></a> into SpliceExp</code></a> – I will definitely try it out. Epilogue🔗</a></h2> I hope you liked the article and HSML</code>. There are still few things that remain to be done, like better test coverage, measure the impact on run-time performance, consider using attoparsec</code> instead of parsec</code>, etc. If you have any comments or ideas for improvement, I will gladly hear them out.

Using Prerender for universal server-side rendering 🔗</a></h2>
Prerender</em></a> is a Node server that uses headless Chrome to render websites, much like search engines such as Google</a>. For our set-up we will use Nginx</a> as a reverse proxy and docker-compose</a> to tie it all together.</p>

`Resources🔗</a></h2> Nginx guide</a></li> Docker guide</a></li> Docker-compose guide</a></li> </ul>`

X-Content-Type-Options header 🔗</a></h3>
Prevents browsers from trying to “guess” the MIME type</a> of a resource and makes it instead rely on the explicitly specified type. This makes sure that the browser does not turn non-execuable resource into executable resource.</p>

Introducing HSML

Palmík

Universal server-side rendering for better SEO

How to handle HTTPS with Nginx

How client-side rendering hinders SEO

Conditional Probability, Fast and Slow