Aleksandr Hovhannisyan
https://www.aleksandrhovhannisyan.com/feed.xml (RSS)
A look at some best practices for creating performant game animations in JavaScript.
Learn how to use three CSS properties to override font metrics and minimize layout shifts during font load.
Use this trick with CSS Grid to prevent layout shifts when swapping text in status indicators.
After some recent incidents involving Netlify and Vercel, I decided to play it safe and move my website and another side project to Cloudflare.
Learn how to implement a progressively enhanced theme switch component using HTML, CSS, and JavaScript.
Learn how to build an accessible image carousel that supports multiple input modes and is progressively enhanced with CSS scroll snap and JavaScript.
Learn how to implement a simple algorithm that listens for a specific sequence of keystrokes in JavaScript, with an optional delay between keys.
Learn how to use JavaScript's Promise.all method to await multiple async operations, as well as how to write a custom implementation of Promise.all.
While imagery can enrich your content, it can also slow down your site if it's not used responsibly. Learn how to use the official 11ty image plugin to create optimized and responsive images.
Eleventy 3.0 adds a new API to optimize images anywhere on your site, without shortcodes.
The one where I create my first generative artwork and still refuse to use any color on my site.
Set up ESLint to format on save in two popular code editors: VS Code and neovim.
Leetcode is a polarizing topic in the software industry. But what is it, and how much time should you invest into it?
Comment systems can be a pain to set up, but they don't have to be. Learn how to use the GitHub Issues API to create a custom comment system powered by Netlify functions.
In this deep dive, you'll learn about the Unicode character set and how it's encoded and decoded with UTF.
In Eleventy 3.0, virtual templates enable plugin authors to publish and share dynamic templates.
Once you get used to thinking in rems for font sizing, you'll find that it's easy to express familiar powers of two. But for other values, you may find it helpful to use the 62.5% font size trick.
Subtitles can capture essential dialogue and sounds, but what about the quiet parts?
Developers are often taught that JavaScript passes objects by reference. In reality, JavaScript is a pass-by-value language.
Self-hosting fonts can improve your site's performance and eliminate unwanted third-party tracking. Learn how to download, subset, and optimize any Google Font for your projects.
A post-mortem of my first attempt at upgrading a laptop.
The irrational fear of mutation in programming can sometimes do more harm than good.
An in-depth review of 11ty, an extensible static site generator written in Node that supports a variety of template languages.
After nearly two decades of living in the United States, I'm proud to say that I'm now officially a U.S. citizen.
Finite state machines (FSMs) are a useful tool for representing stateful entities in code. In this tutorial, we'll learn how to implement the finite state design pattern in C++.
With eleventy-plugin-code-demo, you can easily add interactive HTML, CSS, and JavaScript code demos to your Eleventy site using Markdown.
In JavaScript, class fields allow you to define properties on a class instance outside the constructor. In the case of function properties, it's important to understand how fields differ from methods and their potential tradeoffs.
Rems are the most accessible CSS unit for font size, allowing text to scale responsively when users change their preferred font size settings.
Normally, React's Context API is used to avoid prop drilling. But you can also use it to detect if a component is a child of a particular component.
Learn how event capturing, targeting, and bubbling work in JavaScript; how to prevent an event's default behavior; how to stop event propagation; and more.
Understand the math behind fluid typography and learn how to programmatically generate a fluid type scale with CSS clamp and Sass.
Learn why HTTP cookies are needed, how they're used, where they're stored, and how they impact security and privacy.
Using the properties of congruence modulo, Alice and Bob can generate a shared private key and communicate publicly, while Eve will struggle to decipher their messages.
When using the font-face local() function to load fonts installed on a user's system, double-check that sure you're requesting the right font family.
Documentation is one of those things that you don't appreciate until you have to live without it.
Follow along with the examples in this in-depth guide to learn how to draw SVG icons and simple shapes by hand.
Write cleaner CSS using modern strategies like :is and :where, logical properties and values, clamp, gap, and aspect-ratio.
Learn how to use JavaScript's FormData, URLSearchParams, and URL constructors to serialize an HTML form's data into a well-formatted and encoded URL.
The longer you leave tech debt unresolved, the more problems it will create for your team, until one day it becomes unbearable.
When you set a width and height on image tags, browsers are able to reserve the correct amount of space ahead of time to minimize layout shifts as the images are downloaded.
Learn how to reuse a single source template in 11ty Serverless to generate both a static and server-rendered page.
Registration systems often require that passwords contain certain characters. But this is counterproductive and encourages bad habits that can weaken users' passwords.
Validate user input in real time with the checkValidity, reportValidity, and setCustomValidity methods.
By default, WSL 2 may reserve a significant chunk of your host RAM. Thankfully, we can limit its memory usage with a .wslconfig file.
The binary number system underlies everything in computation and software. But what's the deal with all those 0s and 1s?
Line endings can differ from one OS to another. Learn the history behind CRLF and LF line endings and how to enforce line endings in Git.
Expose useful information about your Eleventy build to all of your templates using global data.
You might not need another CSS class. Use HTML attributes for state and style those states with the CSS attribute selector.
Tech Twitter can be a great way to network with other developers and learn new things. But it can also be unhealthy.
With React.lazy, you can dynamically import components at run time to reduce the size of your JavaScript bundles.
It can be tempting to lump unrelated code changes into a single commit, but this makes it difficult to debug and time travel in Git. Prefer to write atomic commits that have a single responsibility.
Extend Eleventy's built-in filters with custom logic for these common use cases.
Excessive destructuring in JavaScript can make your code harder to read, trickier to debug, and more error prone.
Add a copy-to-clipboard button to your Jekyll blog with a simple include and a few lines of JavaScript.
Load-more buttons are more accessible than infinite scrolling, but they also steal keyboard focus when new content loads in. We can fix this problem by manually focusing the first newly inserted result.
Currently, 11ty doesn't allow you to pass object arguments to shortcodes in Liquid. As a temporary workaround, you can assemble and parse a JSON string to pass along to the shortcode as an argument.
Learn how to use Chrome developer tools to simulate loading a page in a different locale.
Some sites gate their content by hiding it with CSS. Whether you open the site incognito or normally, the full content appears to be beyond reach. But it's not—anyone can swing open the gate.
Ever wanted to nest Markdown in HTML? In 11ty, you can easily do this with paired shortcodes and a custom Markdown library parser.
Sometimes, a React component needs to allow users to render a custom tag. Here's how you can pass dynamic tag names as props.
On paper, Tailwind CSS sounds like a great idea. In reality, it suffers from the same problems that it tries to solve.
NFTs are artificially scarce, make it easier to commit fraud, undermine the intellectual property rights of content creators, and encourage consumptive mining practices.
Learn how to optimize images for the web using the WebP image format and lazy loading with JavaScript.
Margins are commonly used to space paragraphs in an article, but CSS Grid offers a more intuitive alternative that defines the spacing at the layout level.
Use global data in 11ty to create a single configuration for fonts that you can reference in your templates and CSS.
On the surface, Outer Wilds is a space exploration game. But peel back the layers, and it's a captivating and philosophical story about life and our universe.
Add comments to your Jekyll blog with the GitHub issues API and lazily load them for improved performance.
React's useState hook works well for managing simple state. But once your component starts to grow, useReducer may be a better fit for managing state.
In typography, the ideal line height for text depends on a variety of factors, including font size, line length, and font family.
Links allow Unix file systems to keep track of files in one of two ways: soft (symbolic) links and hard links. One sticks around for good, while the other rots.
A discussion of the things that beginner programmers tend to get wrong, as well as concrete suggestions for what they should be doing instead.
Only one process can run at a time on a single CPU. Scheduling algorithms are what allow these processes to take turns running.
Tired of listing all of your Netlify redirects by hand? Generate them programmatically with a bit of 11ty templating magic!
GitHub Pages is a good option for hosting simple sites for free, but Netlify offers plenty of more advanced features.
In TypeScript, type predicates allow you to narrow down an abstract type to a more concrete type with a simple assertion. Together with derived types, they can greatly reduce repetition in your code.
Accessibility is a hot topic, but it's not always executed correctly. Learn how to use semantic HTML to create an accessible user experience on the web.
With least squares regression, you can find the closest solution to a system of equations that doesn't have a unique solution.
A deep dive on how to perform straight-line and polynomial least squares fitting, both by hand and programmatically.
Learn how to give any element an aspect ratio in CSS, using the modern aspect-ratio property or a trick with percentage padding.
If an iframe re-renders in React, it can interfere with back navigation in your browser. The solution? Force the iframe to unmount with a unique key.
Writing is likely one of the last skills you associate with software development. But it plays a key role in everything that we do and can help you build a more successful career.
Reading books isn't something that everyone enjoys. But if you used to like reading but can no longer get past the first chapter of a new book, there may be a few reasons why.
If it were up to me, things wouldn't end this way. We had some great times together, but now it's time to say goodbye.
You got a perfect score on an accessibility audit. But is your site actually accessible, or have you overlooked more subtle failures?
Suppose an async function returns a boolean. What happens if you check the return value without awaiting it?
When things go wrong, don't panic. Here are a few ways you can undo changes in git and clean up your commit history.
Jekyll is a static site generator that makes it easy for you to create a website. Learn how to get started with Jekyll and GitHub Pages.
Some big brands have a slow page load speed, but they still rank well on Google. So does web performance even matter?
After a one-year hiatius from Sekiro, I returned to face the final boss—and, through painful persistence, triumphed.
Promises are a powerful tool for writing asynchronous code in JavaScript. Here are a few interesting use cases.
Learn how to easily test localhost on mobile using ngrok, without deploying a single line of code.
SEO is the art of making strategic improvements to a site in order to rank higher in search results and gain more traffic. Learn how to use tried-and-true SEO strategies to drive more visitors to your site.
Invulnerability frames are a popular mechanic in many retro and modern games. In Unity, you can implement i-frames using coroutines.
Improve your page load speed in Jekyll using the WebP image format and a custom include.
Prefix trees (also known as tries) allow you to efficiently search for a string in a dictionary of known words using just a prefix. Learn how to implement a trie in Python.