knowledge/content/docs/programming/web.adoc

+++
+++

:source-highlighter: pygments

== Web development

=== Quick reference

Text area resizing::
`resize: vertical`, `resize: horizontal`, `resize: none`

=== Webp support

To convert images to WebP:

[source,console]
----
$ cwebp -m 6 -mt -o "$file.webp" -- "$file"
----

To make nginx serve `.webp` files if the relevant accept header is sent:

[source,nginx]
----
http {
    map $http_accept $webp_suffix {
        "~*webp"  ".webp";
    }

    server {
        location ~ \.(png|jpe?g)$ {
            try_files $uri$webp_suffix $uri =404;
            expires 1y;
        }
    }
}
----

=== Useful links

- https://simpleicons.org/ - SVG icons for brands, including social media sites and programming languages
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Great flexbox reference
- https://easings.net/en - Easing functions cheat sheet