Learning Log

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.

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!

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.

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!

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!

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.

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!

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.

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.

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.”

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.

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

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.

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.

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.

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…

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.

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

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.

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.

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.

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.

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.

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.

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!

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.

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.

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.