Roman Veselý: Learning Log

0048

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

It's possible to protect against CSRF attack without traditional hidden input fields with tokens. Header Sec-Fetch-Site is sent by browsers with every request since 2023. This header should be read by server that can act according to its value. For example, reject requests that are not same-origin.

0047

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

When working in multiple git repositories it is handy to know what one did last day or even many days ago. git-standup can display a log of commits from multiple repositories making it easy to remember what happend.

0046

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Capability URLs are unique, hard-to-guess links that grant access to specific resources without requiring traditional authentication. Possession of the URL itself serves as permission to access the information.

Once a user has accessed a page through such an URL, they are able to do all they need to do within that page.

Some of the examples are: Google Calendar share links or password reset links.

0045

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

In VSCode you can highlight next occurence of the selected text with CTRL + D.

To select all occurences at once use CTRL + SHIFT + L.

Take a look at Keyboard shortcut cheatsheet (Windows).

0044

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

I didn't know that scrollytelling as a term exists. If a page must tie content interactivity to scrolling, the best way is to use it to teach something!

Check out one of the examples.

0043

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

There are situations where forced colors should be disabled even when the rest of the page stays in high contrast mode. Example is a color selector in an eshop page. Reduced color palette would deteriorate user experience.

You can turn off forced colors with forced-color-adjust: none.

0042

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

It's possible to limit the number of lines in a block element with -webkit-line-clamp CSS property. Although, it must be accompained with some additional properties to work:

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Browser support is sufficient. In the future, it might be replaced with line-clamp property.

0041

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

In Markdown (or other compatible markup format) every sentence can be on its own line, but still rendered in the same paragraph. Besides other benefits it may lead to a more readble git diffs. Welcome Semantic Line Breaks!

0040

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Lazy consensus is a decision-making process where silence means approval. It encourages participants to take initiative and lowers the cost of governance. It is used within various open-source projects teams and organizations, such as Apache Software Foundation or Adobe Spectum team.

0039

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

ICU Message formatting is very powerful. It is really convenient to test translation strings in real time to see the output. Here's an awesome online ICU Message editor!

0038

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

When working with microformats, it is valuable to check whether they are implemented correctly. We can use several online parsers for that, such as: X-Ray or Microformats Parser.

What can be done with microformats? You can indiewebify yourself!

0037

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Normally, fonts display numerical digits in varying widths - proportional figures. Monospace fonts display every letter and digit in the same width. It is possible to opt-in to this behaviour (tabular figures) also in non-monospace fonts in CSS with font-variant-numeric: tabular-nums.

Some fonts (like Roboto) use tabular figures by default and provide proportional numbers as an option.

0036

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Wouldn't it be helpful to see type hints in JavaScript configuration files? Let's say, for Rollup configuration, so you have at least a glance of all the possibilities?

Thankfully it can be done with JSDoc @type tag! Example:

// rollup.config.js

/** @type {import('rollup/dist/rollup').RollupOptions[]} */
export default [
  {
    input: "./index.js",
    // ...
  },
];

I think that's really neat!

0035

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Working on design system implementation I found there's W3C Community Group for Design Tokens! Its mission is to define common glossary and specification for better interoperability between developers and tools.

0034

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

CSS is sometimes unpredictable - property names and their values are not always obvious and do not easily come to one's mind. Check this incomplete list of mistakes in CSS by its very own creator - CSS Working Group.

0033

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

JavaScript is never going to stop surprise me. You can continue or break parent loop inside nested for loops by using a label.

0032

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

As opposed to Gitflow, Trunk based development promotes short-lived branches. It is a great resource of knowledge on this matter including techniques such as CI/CD, feature flags, monorepos, and more.

0031

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

While watching a tutorial on YouTube I spotted some CSS properties I've never seen before. The presenter used block-size, inline-size or padding-inline, and some others as well. I immediately thought those must be ones I neglect due to their lack of support in browsers. I was correct but also learned that they are part of the CSS module Logical Properties and Values, which properties depend on writing mode. Great for multilingual sites.

0030

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

One of the newsletters I subscribe to is Bytes. Once a week, it brings information about new releases and trends in the JavaScript ecosystem. And if you like catchy challanges, there's something for you in every issue.

0029

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Surprisingly, <abbr> attribute is not accessible on mobile devices. By default, its title is visible on mouse hover, but there's no hover on mobiles.

0028

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

When working with password inputs, it's possible to add a bit more information on how the autocomplete should work. It can be set on and off, but the real power comes with options current-password and new-password. The former allows the browser to enter the known password - suitable for the login form. The later allows the browser to suggest (create) a new password - suitable for sign up or "forgotten password" forms.

0027

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Lea Verou shared a simple yet effective way to add a favicon to your site - use emoji in SVG!

0026

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

In git, a commit is referenced via its hash value - 40 digit string. Usually, only the first 8 digits are used, as that's enough to be able to (visually) differentiate one commit with others. Alas, it may lead to a security hole if such a way is used in, let's say, a build script - because of Commit Hash Collisions. Thanks to that, one might also take down Github Actions.

0025

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

How did you learn HTML? Just looking at the sites' source code? Well, it was much easier back then. Found thanks to the Mozilla Developer Newsletter.

0024

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Applications are being served on many types of devices - desktop, mobile (Android, iOS), and even on something more exotic, like smartwatches. Every device means a different way of application usage, so are the requirements for API. Oftentimes, there is one, general-purpose API that serves all types of clients, but it may become cumbersome. Why not have one API per user experience? Read more about Backends For Frontends pattern.

0023

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

While resolving import statements, @types directory is significant for TypeScript compiler, as it looks there for type declarations before it reaches the actual package node_modules directory. The logic behind this behavior is that if the package itself had type declarations, you wouldn't have installed it from DefinitelyTyped.

0022

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

DefinitelyTyped is the repository for TypeScript type definitions. We may call it the official repository now, but that has not always been the case. When Boris created a repository for this project nobody knew TypeScript will become so widely-used. Read its whole story from zero to hero.

0021

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

In GitHub, you can highlight not only the code syntax but also a differences, just like with git diff command. It may be very helpful while providing some step by step guides in READMEs or issues.

Here's the syntax:

```diff
+foo
-bar
baz
```

that results in:

+foo
-bar
baz

Unfortunately, it's not possible to use both language syntax and diff highlighting together.

0020

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

You can push your console.log()-driven development to a more advanced level with console.group() method. It creates a new inline group, indenting all following output. To move back, use console.groupEnd(). Check this article about advanced logging.

0019

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

In TypeScript, the difference between union types and intersection types can be counter-intuitive at first glance. Ryan Cavanaugh gave a great explanation: "the union of the domain of values produces an intersected set of properties and vice versa."

0018

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Besides learning new stuff, networking is another crucial part of conferences or other events. But, it can be hard to join the discussion of the group of people one doesn't know. That's where the Pac-man rule comes in. When standing as a group of people, always leave room for 1 person to join your group.

0017

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

How to make your application more accessible? What about to include No mouse day into your development process?

0016

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

How to make your application faster? Firstly, you may want to know how does it behave under a slow connection. To get an idea of what is it like, developers at Facebook have 2G Tuesdays - simulating slow connection for the whole one day. This is how the performance should be tested! From the talk New adventures in front-end by Vitaly Friedman.

0015

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Some time ago I was struggling with TypeScript generic types and decided to reach for help from smarter guys on Stack Overflow. I received an answer, thanks! The solution is based on very specific conditional type which I was not familiar with back then,... and I'm probably still not. But, there is a one truly helpful talk by Gregor Woiwode describing the matter of this TypeScript magic. I really recommend you to watch if you want to understand it better.

0014

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Is your project compiled from TypeScript? Are you too strict? If so, you may like --strict compiler option. It's a shorthand for enabling all (currently 7) strict type-checking options. You can always turn off individual options if needed.

0013

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

I have recently revealed my first browser extension, which enhances Google Calendar. To work it needs to fetch calendar data from Google API. There is a neverending (okay, several steps...) approval process one has to undergo to get API access. To make the extension work also under Firefox I had to specifically request support to whitelist allizom.com as a verified domain. It just cannot be simpler, everything for the user's security...

0012

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Learning in public - is a quest to be as open as possible. But there's also kind of a counterpart to such spreading movement, that has probably always been a part of the World Wide Web - dark web. Beware, not The Dark Web, but The Real Dark Web - rarely acknowledged majority of web developers.

0011

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Did you know the difference between border-bottom's values 0, none and hidden? Neither did I! See examples and explanations.

0010

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Bad Frost is a father of Atomic design concept, which is now 6 years old. In his article he writes about the inception of the idea and how have the design systems changed throughout the years. If you work with CSS you may like the BEM methodology which clicks with this concept very well.

0009

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

npm comes with some very handy scripts by default, which one of them is npm version. It is used to bump your package version (in package and shrinkwrap files). In a git repository, it also creates a commit and adds a tag in semver notation. This step might not be desirable when you use a different type of versioning, so it can be skipped by running it with --no-git-tag-version.

0008

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

One more tip on security - keep opened tabs safe and use rel="noopener" attribute. Asking why? Find the answer. There's also a nice eslint rule for JSX.

0007

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

The security of the system must be preserved even when its architecture and functionality is publicly known, as far as the keys stay secure. Kerckhoffs principle about cryptosystems.

0006

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Level up your git terminal skills. git add -N adds a new file to the history without its content. Then it is easy to see the whole file with git diff and add only some portions of it with git add -p. Kudos to Olivier.

0005

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Don't know why, but I have been neglecting CSS background-position's offsets for a very long time. Probably I forgot it exists! I'm pleased I've discovered it just recently. Now I'm again able to position background images relative to the edges of their elements.

0004

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Icon fonts have still their place even in today's world of wide SVG support. With fontello.com is possible to easily create one font with characters from different sets. And that's very handy!

0003

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

Staying in sync with the project's dependencies versions across different workstations and servers can be sometimes problematic. npm ci can help with many issues. It stands for a clean install and is available since version 5.7.0. It installs dependencies only from your package-lock.json file (it also removes node_modules directory). It should be used in the CI environment, project setup, etc. I've started using it in all my projects ever since.

0002

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

window resize event behaves a bit unexpected, well, just at a first glance. It is fired almost whenever you scroll a page in the mobile browser. My investigation revealed it's the correct behavior. It's common for mobile browsers to show/hide omnibar or other toolbars while scrolling up & down which does change the size of the visible area - thus firing the event is expected.

0001

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2023 00:00:00 GMT

I was experimenting with CSS pseudo elements and generated content to find out if it is possible to use it as a base for other selectors - it isn't. Live example.