<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
    <channel>
        <title>Albert Walicki</title>
        <link>https://albertwalicki.com/</link>
        <description>Articles, problems &amp; solutions, tips and CSS art by Albert Walicki, a frontend developer in Gdańsk.</description>
        <lastBuildDate>Wed, 16 Sep 2026 20:00:00 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>en</language>
        <image>
            <title>Albert Walicki</title>
            <url>https://albertwalicki.com/logo_square.png</url>
            <link>https://albertwalicki.com/</link>
        </image>
        <copyright>All rights reserved 2026, Albert Walicki</copyright>
        <item>
            <title><![CDATA[How to create a triangle in CSS?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-create-a-triangle-in-css</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-create-a-triangle-in-css</guid>
            <pubDate>Wed, 16 Sep 2026 20:00:00 GMT</pubDate>
            <description><![CDATA[Create a CSS triangle with clip-path, the classic border trick or a linear gradient, with examples for every direction and tooltip arrows.]]></description>
        </item>
        <item>
            <title><![CDATA[How to convert an object to an array in JavaScript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-convert-an-object-to-an-array-in-javascript</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-convert-an-object-to-an-array-in-javascript</guid>
            <pubDate>Wed, 16 Sep 2026 19:35:00 GMT</pubDate>
            <description><![CDATA[Convert an object to an array with Object.keys, Object.values or Object.entries, go back with Object.fromEntries, and handle array-like objects.]]></description>
        </item>
        <item>
            <title><![CDATA[How to center an element in CSS?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-center-an-element-in-css</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-center-an-element-in-css</guid>
            <pubDate>Wed, 16 Sep 2026 19:13:00 GMT</pubDate>
            <description><![CDATA[Center an element horizontally and vertically in CSS with grid, flexbox or absolute positioning, and fix the most common reason vertical centering fails.]]></description>
        </item>
        <item>
            <title><![CDATA[Which media query breakpoints should I use?]]></title>
            <link>https://albertwalicki.com/learn/solutions/which-media-query-breakpoints-should-i-use</link>
            <guid>https://albertwalicki.com/learn/solutions/which-media-query-breakpoints-should-i-use</guid>
            <pubDate>Wed, 16 Sep 2026 18:44:00 GMT</pubDate>
            <description><![CDATA[There is no universal set of breakpoints. Learn how to pick them, a sensible mobile-first starting set, and how fluid layouts and container queries need fewer.]]></description>
        </item>
        <item>
            <title><![CDATA[How to disable text selection with CSS?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-disable-text-selection-with-css</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-disable-text-selection-with-css</guid>
            <pubDate>Wed, 16 Sep 2026 18:17:00 GMT</pubDate>
            <description><![CDATA[Disable text selection with user-select: none, including the prefix Safari still needs, when to use it, and how user-select: all and ::selection help.]]></description>
        </item>
        <item>
            <title><![CDATA[Is there a CSS parent selector?]]></title>
            <link>https://albertwalicki.com/learn/solutions/is-there-a-css-parent-selector</link>
            <guid>https://albertwalicki.com/learn/solutions/is-there-a-css-parent-selector</guid>
            <pubDate>Wed, 16 Sep 2026 17:59:00 GMT</pubDate>
            <description><![CDATA[Yes, CSS has a parent selector: :has(). See practical examples for cards, checked labels, invalid forms and previous siblings, plus its limits.]]></description>
        </item>
        <item>
            <title><![CDATA[How to remove bullets from a list in CSS?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-remove-bullets-from-a-list</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-remove-bullets-from-a-list</guid>
            <pubDate>Wed, 16 Sep 2026 17:29:00 GMT</pubDate>
            <description><![CDATA[Remove the bullets and the indent from a ul or ol with list-style: none, keep the list accessible in Safari, and customize the markers instead.]]></description>
        </item>
        <item>
            <title><![CDATA[When to use margin vs padding in CSS?]]></title>
            <link>https://albertwalicki.com/learn/solutions/when-to-use-margin-vs-padding</link>
            <guid>https://albertwalicki.com/learn/solutions/when-to-use-margin-vs-padding</guid>
            <pubDate>Wed, 16 Sep 2026 17:08:00 GMT</pubDate>
            <description><![CDATA[Padding is space inside an element, margin is space outside it. Learn when to use each, how margin collapsing works, and why gap often beats both.]]></description>
        </item>
        <item>
            <title><![CDATA[How to transition height from 0 to auto with CSS?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-transition-height-from-0-to-auto</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-transition-height-from-0-to-auto</guid>
            <pubDate>Wed, 16 Sep 2026 16:45:00 GMT</pubDate>
            <description><![CDATA[Animate an element from height 0 to its natural height with the grid-template-rows trick, the new interpolate-size property, or the old max-height hack.]]></description>
        </item>
        <item>
            <title><![CDATA[How to make an element 100% of the screen height?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-make-an-element-full-viewport-height</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-make-an-element-full-viewport-height</guid>
            <pubDate>Wed, 16 Sep 2026 16:19:00 GMT</pubDate>
            <description><![CDATA[Make an element fill the screen height with min-height: 100dvh, understand svh, lvh and dvh on mobile, and fix height: 100% that does nothing.]]></description>
        </item>
        <item>
            <title><![CDATA[How to keep the footer at the bottom of the page?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-keep-the-footer-at-the-bottom-of-the-page</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-keep-the-footer-at-the-bottom-of-the-page</guid>
            <pubDate>Wed, 16 Sep 2026 15:54:00 GMT</pubDate>
            <description><![CDATA[Keep the footer at the bottom of short pages with CSS grid or flexbox, why the wrapper must be the direct parent, and how it differs from a fixed footer.]]></description>
        </item>
        <item>
            <title><![CDATA[What's the difference between Sass, SCSS and LESS?]]></title>
            <link>https://albertwalicki.com/learn/solutions/what-is-the-difference-between-sass-scss-and-less</link>
            <guid>https://albertwalicki.com/learn/solutions/what-is-the-difference-between-sass-scss-and-less</guid>
            <pubDate>Wed, 16 Sep 2026 15:30:00 GMT</pubDate>
            <description><![CDATA[Sass is a CSS preprocessor with two syntaxes, SCSS and the indented .sass, while LESS is a separate tool. Compare them side by side and see what to use today.]]></description>
        </item>
        <item>
            <title><![CDATA[How to change the cursor on hover in CSS?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-change-the-cursor-on-hover</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-change-the-cursor-on-hover</guid>
            <pubDate>Wed, 16 Sep 2026 15:06:00 GMT</pubDate>
            <description><![CDATA[Change the mouse cursor with the CSS cursor property: which value to use for clickable, draggable or disabled elements, and how to use a custom image.]]></description>
        </item>
        <item>
            <title><![CDATA[How to keep the aspect ratio of an image in CSS?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-keep-the-aspect-ratio-of-an-image</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-keep-the-aspect-ratio-of-an-image</guid>
            <pubDate>Wed, 16 Sep 2026 14:37:00 GMT</pubDate>
            <description><![CDATA[Keep an image's proportions with max-width and height auto, prevent layout shift with width and height attributes, or force a ratio with aspect-ratio.]]></description>
        </item>
        <item>
            <title><![CDATA[How to fit an image into its container?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-fit-an-image-into-its-container</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-fit-an-image-into-its-container</guid>
            <pubDate>Wed, 16 Sep 2026 14:14:00 GMT</pubDate>
            <description><![CDATA[Make an image fit its container with max-width, fill a box of a fixed size with object-fit cover or contain, and load the right file size with srcset.]]></description>
        </item>
        <item>
            <title><![CDATA[How to check if a checkbox is checked in JavaScript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-check-if-a-checkbox-is-checked</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-check-if-a-checkbox-is-checked</guid>
            <pubDate>Wed, 16 Sep 2026 13:46:00 GMT</pubDate>
            <description><![CDATA[Use the checked property to see if a checkbox is ticked, get all checked values in a group, and avoid the checked attribute, which shows the initial state.]]></description>
        </item>
        <item>
            <title><![CDATA[How to get the selected radio button value in JavaScript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-get-the-selected-radio-button-value</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-get-the-selected-radio-button-value</guid>
            <pubDate>Wed, 16 Sep 2026 13:22:00 GMT</pubDate>
            <description><![CDATA[Get the value of the selected radio button with querySelector and :checked, form.elements or FormData, and handle the case when nothing is selected yet.]]></description>
        </item>
        <item>
            <title><![CDATA[Why you shouldn't use index as a key in React]]></title>
            <link>https://albertwalicki.com/learn/solutions/why-you-should-not-use-index-as-key-in-react</link>
            <guid>https://albertwalicki.com/learn/solutions/why-you-should-not-use-index-as-key-in-react</guid>
            <pubDate>Wed, 16 Sep 2026 12:57:00 GMT</pubDate>
            <description><![CDATA[Using the array index as a key makes React attach state to the wrong list items after you add, remove or reorder them. Here's why, and what to use instead.]]></description>
        </item>
        <item>
            <title><![CDATA[How to remove the focus outline from inputs and buttons?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-remove-the-focus-outline-from-inputs-and-buttons</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-remove-the-focus-outline-from-inputs-and-buttons</guid>
            <pubDate>Wed, 16 Sep 2026 12:37:00 GMT</pubDate>
            <description><![CDATA[Removing the focus outline breaks keyboard navigation. Use :focus-visible to hide it on mouse clicks and replace it with your own accessible focus style.]]></description>
        </item>
        <item>
            <title><![CDATA[How to create a masonry layout like Pinterest?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-create-a-masonry-layout-like-pinterest</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-create-a-masonry-layout-like-pinterest</guid>
            <pubDate>Wed, 16 Sep 2026 12:12:00 GMT</pubDate>
            <description><![CDATA[Build a Pinterest-style masonry layout with CSS columns, or with CSS Grid and a short script, and learn which one to pick when the order of items matters.]]></description>
        </item>
        <item>
            <title><![CDATA[How to remove the space below a link?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-remove-the-space-below-a-link</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-remove-the-space-below-a-link</guid>
            <pubDate>Wed, 16 Sep 2026 11:47:00 GMT</pubDate>
            <description><![CDATA[Fix unwanted space below a link: the gap under an image inside a link, an underline that sits too low, and vertical padding that doesn't work on inline links.]]></description>
        </item>
        <item>
            <title><![CDATA[How to hide the arrows in a number input?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-hide-the-arrows-in-a-number-input</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-hide-the-arrows-in-a-number-input</guid>
            <pubDate>Wed, 16 Sep 2026 11:22:00 GMT</pubDate>
            <description><![CDATA[Hide the spin buttons of a number input in Chrome, Safari and Firefox with CSS, and learn when a text input with inputmode numeric is the better choice.]]></description>
        </item>
        <item>
            <title><![CDATA[How to make elements in a row the same height?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-make-elements-in-a-row-the-same-height</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-make-elements-in-a-row-the-same-height</guid>
            <pubDate>Wed, 16 Sep 2026 10:53:00 GMT</pubDate>
            <description><![CDATA[Make cards or columns in a row the same height with flexbox or grid, push their buttons to the bottom, and line up titles and text across cards with subgrid.]]></description>
        </item>
        <item>
            <title><![CDATA[How to style a file input?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-style-a-file-input</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-style-a-file-input</guid>
            <pubDate>Wed, 16 Sep 2026 10:33:00 GMT</pubDate>
            <description><![CDATA[Style the file input button with the file-selector-button pseudo-element, or build a fully custom upload button from a label that stays keyboard accessible.]]></description>
        </item>
        <item>
            <title><![CDATA[How to make a checkbox label clickable?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-make-a-checkbox-label-clickable</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-make-a-checkbox-label-clickable</guid>
            <pubDate>Wed, 16 Sep 2026 10:05:00 GMT</pubDate>
            <description><![CDATA[Connect a label to a checkbox so clicking the text toggles it, fix the usual reasons it fails, and style a custom checkbox without breaking keyboard access.]]></description>
        </item>
        <item>
            <title><![CDATA[How to disable a link with CSS?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-disable-a-link-with-css</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-disable-a-link-with-css</guid>
            <pubDate>Wed, 16 Sep 2026 09:36:00 GMT</pubDate>
            <description><![CDATA[Why pointer-events: none doesn't fully disable a link, and how to disable it properly by removing the href, adding aria-disabled and styling the disabled state.]]></description>
        </item>
        <item>
            <title><![CDATA[Why do gradients from Figma or Sketch look different in the browser?]]></title>
            <link>https://albertwalicki.com/learn/solutions/why-do-gradients-from-design-tools-look-different-in-the-browser</link>
            <guid>https://albertwalicki.com/learn/solutions/why-do-gradients-from-design-tools-look-different-in-the-browser</guid>
            <pubDate>Wed, 16 Sep 2026 09:12:00 GMT</pubDate>
            <description><![CDATA[Gradients from Figma or Sketch often look off in CSS because of angle geometry, color profiles, sRGB blending and extra layers. Here's how to fix each one.]]></description>
        </item>
        <item>
            <title><![CDATA[How to hide the scrollbar but keep scrolling?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-hide-the-scrollbar</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-hide-the-scrollbar</guid>
            <pubDate>Wed, 16 Sep 2026 08:52:00 GMT</pubDate>
            <description><![CDATA[Hide the scrollbar with scrollbar-width: none and a WebKit fallback while the element keeps scrolling, plus when hiding it hurts and what to do instead.]]></description>
        </item>
        <item>
            <title><![CDATA[When to use img vs CSS background-image?]]></title>
            <link>https://albertwalicki.com/learn/solutions/when-to-use-img-vs-css-background-image</link>
            <guid>https://albertwalicki.com/learn/solutions/when-to-use-img-vs-css-background-image</guid>
            <pubDate>Wed, 16 Sep 2026 08:21:00 GMT</pubDate>
            <description><![CDATA[Use img for images that are content and CSS background-image for decoration. What each one gives you for accessibility, SEO, LCP and responsive images.]]></description>
        </item>
        <item>
            <title><![CDATA[How to make a child element 100% height of its parent?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-make-a-child-fill-the-height-of-its-parent</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-make-a-child-fill-the-height-of-its-parent</guid>
            <pubDate>Wed, 16 Sep 2026 08:00:00 GMT</pubDate>
            <description><![CDATA[Why height: 100% often does nothing, and how to make a child fill its parent's height with flexbox, grid, an explicit height or absolute positioning.]]></description>
        </item>
        <item>
            <title><![CDATA[What's the difference between reset.css and normalize.css?]]></title>
            <link>https://albertwalicki.com/learn/solutions/what-is-the-difference-between-reset-css-and-normalize-css</link>
            <guid>https://albertwalicki.com/learn/solutions/what-is-the-difference-between-reset-css-and-normalize-css</guid>
            <pubDate>Tue, 15 Sep 2026 20:00:00 GMT</pubDate>
            <description><![CDATA[A reset removes browser default styles, while normalize.css keeps them and fixes inconsistencies. What each does, and the small modern reset to use today.]]></description>
        </item>
        <item>
            <title><![CDATA[How to change another element when hovering in CSS?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-change-another-element-on-hover</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-change-another-element-on-hover</guid>
            <pubDate>Tue, 15 Sep 2026 19:31:00 GMT</pubDate>
            <description><![CDATA[Style a child, a sibling, a parent or any element when another one is hovered, using CSS combinators and :has(), with keyboard, touch and JavaScript options.]]></description>
        </item>
        <item>
            <title><![CDATA[How to disable autocomplete on inputs?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-disable-autocomplete-on-inputs</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-disable-autocomplete-on-inputs</guid>
            <pubDate>Tue, 15 Sep 2026 19:06:00 GMT</pubDate>
            <description><![CDATA[Turn off autocomplete with autocomplete off, why browsers sometimes ignore it, and which autocomplete values to use instead for passwords, codes and addresses.]]></description>
        </item>
        <item>
            <title><![CDATA[How to change the URL without reloading the page?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-change-the-url-without-reloading-the-page</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-change-the-url-without-reloading-the-page</guid>
            <pubDate>Tue, 15 Sep 2026 18:47:00 GMT</pubDate>
            <description><![CDATA[Change the URL without a reload using history.pushState and replaceState, update query parameters, handle the back button and use your framework's router.]]></description>
        </item>
        <item>
            <title><![CDATA[How to make a button or div work like a link?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-make-a-button-or-div-work-like-a-link</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-make-a-button-or-div-work-like-a-link</guid>
            <pubDate>Tue, 15 Sep 2026 18:13:00 GMT</pubDate>
            <description><![CDATA[Use a real link styled as a button instead of a clickable div or button, make a whole card clickable, and navigate with JavaScript only when you really need to.]]></description>
        </item>
        <item>
            <title><![CDATA[How to get the X and Y position of an element in JavaScript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-get-the-position-of-an-element</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-get-the-position-of-an-element</guid>
            <pubDate>Tue, 15 Sep 2026 17:49:00 GMT</pubDate>
            <description><![CDATA[Get an element's position with getBoundingClientRect, convert it to page or parent coordinates, see how offsetTop differs, and avoid slow layout reads.]]></description>
        </item>
        <item>
            <title><![CDATA[How to get text from an HTML string in JavaScript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-get-text-from-an-html-string-in-javascript</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-get-text-from-an-html-string-in-javascript</guid>
            <pubDate>Tue, 15 Sep 2026 17:29:00 GMT</pubDate>
            <description><![CDATA[Strip the tags from an HTML string and get plain text with DOMParser, why innerHTML on a div is unsafe, and when a regex is good enough.]]></description>
        </item>
        <item>
            <title><![CDATA[button vs input type=button: which one to use?]]></title>
            <link>https://albertwalicki.com/learn/solutions/button-vs-input-type-button</link>
            <guid>https://albertwalicki.com/learn/solutions/button-vs-input-type-button</guid>
            <pubDate>Tue, 15 Sep 2026 17:00:00 GMT</pubDate>
            <description><![CDATA[Why button type=button is the better choice over input type=button: HTML content, pseudo-elements, and the default submit type inside forms.]]></description>
        </item>
        <item>
            <title><![CDATA[How to redirect to another page in HTML?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-redirect-to-another-page-in-html</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-redirect-to-another-page-in-html</guid>
            <pubDate>Tue, 15 Sep 2026 16:33:00 GMT</pubDate>
            <description><![CDATA[Redirect a page with a meta refresh tag, with location.replace in JavaScript, or better, with a real 301 or 308 HTTP redirect from the server.]]></description>
        </item>
        <item>
            <title><![CDATA[How to refresh a page automatically every few seconds?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-refresh-a-page-automatically</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-refresh-a-page-automatically</guid>
            <pubDate>Tue, 15 Sep 2026 16:05:00 GMT</pubDate>
            <description><![CDATA[Reload a page on a timer with meta refresh or setTimeout, why full reloads hurt users, and how to poll for fresh data and update only the DOM.]]></description>
        </item>
        <item>
            <title><![CDATA[$(document).ready() without jQuery]]></title>
            <link>https://albertwalicki.com/learn/solutions/document-ready-without-jquery</link>
            <guid>https://albertwalicki.com/learn/solutions/document-ready-without-jquery</guid>
            <pubDate>Tue, 15 Sep 2026 15:40:00 GMT</pubDate>
            <description><![CDATA[The vanilla JavaScript replacement for jQuery's document ready: DOMContentLoaded, a readyState check for late scripts, and the defer attribute.]]></description>
        </item>
        <item>
            <title><![CDATA[How to upload an image with a form?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-upload-an-image-with-a-form</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-upload-an-image-with-a-form</guid>
            <pubDate>Tue, 15 Sep 2026 15:14:00 GMT</pubDate>
            <description><![CDATA[Upload an image with a multipart form or with fetch and FormData, show a preview, check size and type, send multiple files, and track progress.]]></description>
        </item>
        <item>
            <title><![CDATA[How to receive an uploaded image on the server?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-receive-an-uploaded-image-on-the-server</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-receive-an-uploaded-image-on-the-server</guid>
            <pubDate>Tue, 15 Sep 2026 14:51:00 GMT</pubDate>
            <description><![CDATA[Read an uploaded image in Node.js with request.formData() or multer in Express, save it safely, and avoid the usual security holes with uploads.]]></description>
        </item>
        <item>
            <title><![CDATA[How to clear a canvas in JavaScript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-clear-a-canvas</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-clear-a-canvas</guid>
            <pubDate>Tue, 15 Sep 2026 14:30:00 GMT</pubDate>
            <description><![CDATA[Clear an HTML canvas with clearRect, why old shapes come back without beginPath, and how to clear correctly after translate, scale or rotate.]]></description>
        </item>
        <item>
            <title><![CDATA[How to check if an element is visible in the viewport?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-check-if-an-element-is-visible-in-the-viewport</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-check-if-an-element-is-visible-in-the-viewport</guid>
            <pubDate>Tue, 15 Sep 2026 14:03:00 GMT</pubDate>
            <description><![CDATA[Detect when an element scrolls into view with IntersectionObserver, do a one-off check with getBoundingClientRect, and detect CSS-hidden elements.]]></description>
        </item>
        <item>
            <title><![CDATA[How to prevent a button from submitting a form?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-prevent-a-button-from-submitting-a-form</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-prevent-a-button-from-submitting-a-form</guid>
            <pubDate>Tue, 15 Sep 2026 13:30:00 GMT</pubDate>
            <description><![CDATA[A button inside a form submits it by default. Add type=button, or handle the submit event with preventDefault, in plain JavaScript and in React.]]></description>
        </item>
        <item>
            <title><![CDATA[How to create a scroll to top button?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-create-a-scroll-to-top-button</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-create-a-scroll-to-top-button</guid>
            <pubDate>Tue, 15 Sep 2026 13:11:00 GMT</pubDate>
            <description><![CDATA[Build a back to top button with a plain link and smooth scrolling, show it only after scrolling with IntersectionObserver, and keep it accessible.]]></description>
        </item>
        <item>
            <title><![CDATA[How to display a base64 image in HTML?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-display-a-base64-image-in-html</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-display-a-base64-image-in-html</guid>
            <pubDate>Tue, 15 Sep 2026 12:43:00 GMT</pubDate>
            <description><![CDATA[Show a base64 encoded image with a data URL in an img tag, in CSS or from JavaScript, pick the right MIME type, and know when base64 is a bad idea.]]></description>
        </item>
        <item>
            <title><![CDATA[How to check a checkbox or radio button by default?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-check-a-checkbox-or-radio-button-by-default</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-check-a-checkbox-or-radio-button-by-default</guid>
            <pubDate>Tue, 15 Sep 2026 12:20:00 GMT</pubDate>
            <description><![CDATA[Add the checked attribute to preselect a checkbox or radio button. Why checked='false' is still checked, and how defaultChecked works in JS and React.]]></description>
        </item>
        <item>
            <title><![CDATA[How to check if an element has a class in JavaScript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-check-if-an-element-has-a-class</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-check-if-an-element-has-a-class</guid>
            <pubDate>Tue, 15 Sep 2026 11:52:00 GMT</pubDate>
            <description><![CDATA[Use classList.contains to check for a class, matches for any selector and closest for ancestors, and avoid the className.includes gotcha.]]></description>
        </item>
        <item>
            <title><![CDATA[How to accept only certain file types in a file input?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-accept-only-certain-file-types-in-a-file-input</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-accept-only-certain-file-types-in-a-file-input</guid>
            <pubDate>Tue, 15 Sep 2026 11:22:00 GMT</pubDate>
            <description><![CDATA[Limit a file input with the accept attribute using MIME types or extensions, then validate the file in JavaScript and on the server.]]></description>
        </item>
        <item>
            <title><![CDATA[How to remove a specific element from an array in JavaScript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-remove-a-specific-element-from-an-array</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-remove-a-specific-element-from-an-array</guid>
            <pubDate>Tue, 15 Sep 2026 11:01:00 GMT</pubDate>
            <description><![CDATA[Remove an item from a JavaScript array with indexOf and splice, or get a new array with filter or toSpliced. Includes objects by id and React state.]]></description>
        </item>
        <item>
            <title><![CDATA[How to remove the first or last element of an array in JavaScript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-remove-the-first-or-last-element-of-an-array</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-remove-the-first-or-last-element-of-an-array</guid>
            <pubDate>Tue, 15 Sep 2026 10:30:00 GMT</pubDate>
            <description><![CDATA[Use shift to remove the first element and pop to remove the last, or slice and destructuring to get a new array without changing the original.]]></description>
        </item>
        <item>
            <title><![CDATA[Arrow functions vs regular functions in JavaScript]]></title>
            <link>https://albertwalicki.com/learn/solutions/arrow-functions-vs-regular-functions-in-javascript</link>
            <guid>https://albertwalicki.com/learn/solutions/arrow-functions-vs-regular-functions-in-javascript</guid>
            <pubDate>Tue, 15 Sep 2026 10:06:00 GMT</pubDate>
            <description><![CDATA[The real differences between arrow and regular functions in JavaScript: this, arguments, new, hoisting and object literals, and when to use each.]]></description>
        </item>
        <item>
            <title><![CDATA[forEach or map: which one should I use?]]></title>
            <link>https://albertwalicki.com/learn/solutions/foreach-vs-map-in-javascript</link>
            <guid>https://albertwalicki.com/learn/solutions/foreach-vs-map-in-javascript</guid>
            <pubDate>Tue, 15 Sep 2026 09:39:00 GMT</pubDate>
            <description><![CDATA[Use map to build a new array and forEach for side effects. Common smells, how to stop a loop early, and why forEach doesn't wait for async callbacks.]]></description>
        </item>
        <item>
            <title><![CDATA[How to validate an email address in JavaScript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-validate-an-email-address-in-javascript</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-validate-an-email-address-in-javascript</guid>
            <pubDate>Tue, 15 Sep 2026 09:16:00 GMT</pubDate>
            <description><![CDATA[Validate emails with input type=email and the Constraint Validation API, or a simple regex that catches typos, and why only a confirmation email is proof.]]></description>
        </item>
        <item>
            <title><![CDATA[How to generate a UUID in JavaScript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-generate-a-uuid-in-javascript</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-generate-a-uuid-in-javascript</guid>
            <pubDate>Tue, 15 Sep 2026 08:54:00 GMT</pubDate>
            <description><![CDATA[Generate a UUID with crypto.randomUUID in the browser and Node, a getRandomValues fallback for plain HTTP pages, and when UUID v7 is the better choice.]]></description>
        </item>
        <item>
            <title><![CDATA[How to sort an array of objects by property in JavaScript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-sort-an-array-of-objects-by-property</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-sort-an-array-of-objects-by-property</guid>
            <pubDate>Tue, 15 Sep 2026 08:30:00 GMT</pubDate>
            <description><![CDATA[Sort an array of objects by a string, number or date property with a compare function, sort by several keys, and avoid the default sort and mutation traps.]]></description>
        </item>
        <item>
            <title><![CDATA[How to get the current URL in JavaScript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-get-the-current-url-in-javascript</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-get-the-current-url-in-javascript</guid>
            <pubDate>Tue, 15 Sep 2026 08:00:00 GMT</pubDate>
            <description><![CDATA[Get the current page URL with window.location.href, read its parts and query parameters, and get the URL safely in Next.js and other SSR frameworks.]]></description>
        </item>
        <item>
            <title><![CDATA[How to add a placeholder for HTML <select> component?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-add-placeholder-for-html-select</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-add-placeholder-for-html-select</guid>
            <pubDate>Sun, 04 Dec 2022 13:00:44 GMT</pubDate>
            <description><![CDATA[Show placeholder text in a select dropdown with a disabled, selected first option.]]></description>
        </item>
        <item>
            <title><![CDATA[How to Disable the Resize of the <textarea> HTML Element?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-disable-resize-of-textarea</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-disable-resize-of-textarea</guid>
            <pubDate>Sun, 04 Dec 2022 13:00:43 GMT</pubDate>
            <description><![CDATA[To disable resizing of textarea, we need to set only one CSS property.]]></description>
        </item>
        <item>
            <title><![CDATA[Modern house 1/4]]></title>
            <link>https://albertwalicki.com/cssart/modern-house-1-4</link>
            <guid>https://albertwalicki.com/cssart/modern-house-1-4</guid>
            <pubDate>Sat, 02 Jul 2022 14:50:33 GMT</pubDate>
            <description><![CDATA[Simple modern house created with CSS only. A warm-up before I will start making more CSS art! ]]></description>
        </item>
        <item>
            <title><![CDATA[Animals Posters Gallery]]></title>
            <link>https://albertwalicki.com/cssart/animals-posters-gallery</link>
            <guid>https://albertwalicki.com/cssart/animals-posters-gallery</guid>
            <pubDate>Sun, 09 Jan 2022 19:38:56 GMT</pubDate>
            <description><![CDATA[Adorable illustration of animals created with CSS! ]]></description>
        </item>
        <item>
            <title><![CDATA[Learn how to Generate Seo Images with a simple Node.js script]]></title>
            <link>https://albertwalicki.com/blog/learn-how-to-generate-seo-Images-with-simple-nodejs-script</link>
            <guid>https://albertwalicki.com/blog/learn-how-to-generate-seo-Images-with-simple-nodejs-script</guid>
            <pubDate>Thu, 06 Jan 2022 23:35:00 GMT</pubDate>
            <description><![CDATA[A simple step-by-step tutorial on how to generate custom meta images for your website with Node script ]]></description>
        </item>
        <item>
            <title><![CDATA[School Building]]></title>
            <link>https://albertwalicki.com/cssart/school-building</link>
            <guid>https://albertwalicki.com/cssart/school-building</guid>
            <pubDate>Sat, 25 Dec 2021 20:36:36 GMT</pubDate>
            <description><![CDATA[School building made with CSS.]]></description>
        </item>
        <item>
            <title><![CDATA[How To Create Claymorphism Using CSS]]></title>
            <link>https://albertwalicki.com/blog/how-to-create-claymorphism-using-css</link>
            <guid>https://albertwalicki.com/blog/how-to-create-claymorphism-using-css</guid>
            <pubDate>Sun, 19 Dec 2021 17:40:00 GMT</pubDate>
            <description><![CDATA[A look at the Claymorphism - a new UI design trend from a developer's point of view with multiple examples how to create it with CSS]]></description>
        </item>
        <item>
            <title><![CDATA[American Style CSS Building]]></title>
            <link>https://albertwalicki.com/cssart/american-style-css-building</link>
            <guid>https://albertwalicki.com/cssart/american-style-css-building</guid>
            <pubDate>Sun, 19 Dec 2021 16:42:19 GMT</pubDate>
            <description><![CDATA[Fully responsive American-style CSS building created for my CSS city.]]></description>
        </item>
        <item>
            <title><![CDATA[Simple CSS bike]]></title>
            <link>https://albertwalicki.com/cssart/simple-bike</link>
            <guid>https://albertwalicki.com/cssart/simple-bike</guid>
            <pubDate>Sat, 11 Dec 2021 22:17:08 GMT</pubDate>
            <description><![CDATA[Simple flat design bike made with CSS.]]></description>
        </item>
        <item>
            <title><![CDATA[How I Rewrote My Blog with Next.js]]></title>
            <link>https://albertwalicki.com/blog/how-i-rewrote-my-blog</link>
            <guid>https://albertwalicki.com/blog/how-i-rewrote-my-blog</guid>
            <pubDate>Thu, 02 Dec 2021 23:20:00 GMT</pubDate>
            <description><![CDATA[I completely rewrote my blog with Next.js, Emotion, MDX, and Storyblok. This is the story why and how I did that.]]></description>
        </item>
        <item>
            <title><![CDATA[How to change element's class with Javascript?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-change-element-s-class-with-javascript</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-change-element-s-class-with-javascript</guid>
            <pubDate>Sun, 21 Nov 2021 16:40:23 GMT</pubDate>
            <description><![CDATA[Short cheatsheet for adding, removing, and toggling CSS classes in vanilla javascript. You no longer have to remember it!]]></description>
        </item>
        <item>
            <title><![CDATA[Extra space below image]]></title>
            <link>https://albertwalicki.com/learn/solutions/extra-space-below-image</link>
            <guid>https://albertwalicki.com/learn/solutions/extra-space-below-image</guid>
            <pubDate>Sun, 21 Nov 2021 16:19:51 GMT</pubDate>
            <description><![CDATA[One of the most common problems that almost every junior frontend developer has is extra space below the image. Let's learn how to fix it with CSS]]></description>
        </item>
        <item>
            <title><![CDATA[How to limit text to n lines with CSS?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-limit-text-to-n-lines</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-limit-text-to-n-lines</guid>
            <pubDate>Sun, 21 Nov 2021 15:39:37 GMT</pubDate>
            <description><![CDATA[Sometimes, we have to trim text to limit the number of lines. There are a few ways to do it with pure CSS. Let's learn how to achieve that]]></description>
        </item>
        <item>
            <title><![CDATA[How to create a tooltip in HTML and CSS?]]></title>
            <link>https://albertwalicki.com/learn/solutions/how-to-create-a-tooltip-in-html-and-css</link>
            <guid>https://albertwalicki.com/learn/solutions/how-to-create-a-tooltip-in-html-and-css</guid>
            <pubDate>Sun, 21 Nov 2021 10:52:09 GMT</pubDate>
            <description><![CDATA[A short tutorial on creating an HTML and CSS tooltip without a single line of javascript. All you need to know is data-atributes]]></description>
        </item>
        <item>
            <title><![CDATA[Better variable names]]></title>
            <link>https://albertwalicki.com/learn/tips/better-variable-names</link>
            <guid>https://albertwalicki.com/learn/tips/better-variable-names</guid>
            <pubDate>Thu, 11 Nov 2021 15:25:11 GMT</pubDate>
            <description><![CDATA[Meaningful and easy to pronounce variable names are much better than random names. It helps other developers to read your code without any problems]]></description>
        </item>
        <item>
            <title><![CDATA[Numeric separator]]></title>
            <link>https://albertwalicki.com/learn/tips/numeric-separator</link>
            <guid>https://albertwalicki.com/learn/tips/numeric-separator</guid>
            <pubDate>Thu, 11 Nov 2021 15:25:11 GMT</pubDate>
            <description><![CDATA[Underscore in numbers is called a numeric separator. It allows to use big numbers efficiently in javascript]]></description>
        </item>
        <item>
            <title><![CDATA[Native date picker]]></title>
            <link>https://albertwalicki.com/learn/tips/native-date-picker</link>
            <guid>https://albertwalicki.com/learn/tips/native-date-picker</guid>
            <pubDate>Thu, 11 Nov 2021 15:15:35 GMT</pubDate>
            <description><![CDATA[You might not need another library to solve your problem. If you need a date picker, choose HTML Native date picker. It is supported by all major browsers]]></description>
        </item>
        <item>
            <title><![CDATA[Native color picker]]></title>
            <link>https://albertwalicki.com/learn/tips/native-color-picker</link>
            <guid>https://albertwalicki.com/learn/tips/native-color-picker</guid>
            <pubDate>Thu, 11 Nov 2021 15:15:35 GMT</pubDate>
            <description><![CDATA[Did you know you don't have to use an additional javascript library to add a color picker on your website? You can use native HTML input type color!]]></description>
        </item>
        <item>
            <title><![CDATA[Power of anchor tag]]></title>
            <link>https://albertwalicki.com/learn/tips/power-of-anchor-tag</link>
            <guid>https://albertwalicki.com/learn/tips/power-of-anchor-tag</guid>
            <pubDate>Thu, 11 Nov 2021 15:15:35 GMT</pubDate>
            <description><![CDATA[An anchor tag can also be used differently. You can send a mail, sms or make a phone call!]]></description>
        </item>
        <item>
            <title><![CDATA[Required or not?]]></title>
            <link>https://albertwalicki.com/learn/tips/required-or-not</link>
            <guid>https://albertwalicki.com/learn/tips/required-or-not</guid>
            <pubDate>Thu, 11 Nov 2021 15:15:34 GMT</pubDate>
            <description><![CDATA[Style required inputs out of the box: add the required attribute and target the input with the CSS :required pseudo-class selector.]]></description>
        </item>
        <item>
            <title><![CDATA[Style your selected text]]></title>
            <link>https://albertwalicki.com/learn/tips/style-your-selected-text</link>
            <guid>https://albertwalicki.com/learn/tips/style-your-selected-text</guid>
            <pubDate>Thu, 11 Nov 2021 15:15:34 GMT</pubDate>
            <description><![CDATA[CSS allows to style selection text. Style yours to match your website!]]></description>
        </item>
        <item>
            <title><![CDATA[Style your placeholders]]></title>
            <link>https://albertwalicki.com/learn/tips/style-your-placeholders</link>
            <guid>https://albertwalicki.com/learn/tips/style-your-placeholders</guid>
            <pubDate>Thu, 11 Nov 2021 15:15:33 GMT</pubDate>
            <description><![CDATA[You can easily style your input placeholders with CSS pseudo-elements. Styling input placeholders will improve the UX of your forms!]]></description>
        </item>
        <item>
            <title><![CDATA[Connect button with the form]]></title>
            <link>https://albertwalicki.com/learn/tips/connect-button-with-the-form</link>
            <guid>https://albertwalicki.com/learn/tips/connect-button-with-the-form</guid>
            <pubDate>Fri, 05 Nov 2021 21:53:23 GMT</pubDate>
            <description><![CDATA[If the spacing between the last field and the button is too big, it may feel disconnected. It misleads users that the button is not what sends the form.]]></description>
        </item>
        <item>
            <title><![CDATA[Color your links with specific href]]></title>
            <link>https://albertwalicki.com/learn/tips/color-your-links</link>
            <guid>https://albertwalicki.com/learn/tips/color-your-links</guid>
            <pubDate>Fri, 05 Nov 2021 21:53:23 GMT</pubDate>
            <description><![CDATA[You can take advantage of CSS selectors to color different anchors with different colors! For example pdf files, external or internal links!]]></description>
        </item>
        <item>
            <title><![CDATA[Target first line of sentence]]></title>
            <link>https://albertwalicki.com/learn/tips/target-first-line</link>
            <guid>https://albertwalicki.com/learn/tips/target-first-line</guid>
            <pubDate>Fri, 05 Nov 2021 21:53:23 GMT</pubDate>
            <description><![CDATA[Selector ::first-line will find your first line in your HTML element and will style it differently.]]></description>
        </item>
        <item>
            <title><![CDATA[Target first letter of element]]></title>
            <link>https://albertwalicki.com/learn/tips/target-first-letter</link>
            <guid>https://albertwalicki.com/learn/tips/target-first-letter</guid>
            <pubDate>Fri, 05 Nov 2021 21:53:22 GMT</pubDate>
            <description><![CDATA[You can easily create fancy styles for your texts in HTML elements targeting the first letter of the sentence.]]></description>
        </item>
        <item>
            <title><![CDATA[Most common javascript methods]]></title>
            <link>https://albertwalicki.com/learn/tips/most-common-javascript-methods</link>
            <guid>https://albertwalicki.com/learn/tips/most-common-javascript-methods</guid>
            <pubDate>Fri, 05 Nov 2021 21:53:22 GMT</pubDate>
            <description><![CDATA[Javascript has a lot of different methods. Let's learn how to use the five most common methods on emoji example!]]></description>
        </item>
        <item>
            <title><![CDATA[Add some space!]]></title>
            <link>https://albertwalicki.com/learn/tips/add-some-space</link>
            <guid>https://albertwalicki.com/learn/tips/add-some-space</guid>
            <pubDate>Fri, 05 Nov 2021 21:53:22 GMT</pubDate>
            <description><![CDATA[In the example on the left, when the error messages are displayed, the spacing between forms makes all the fields blend into one large column.]]></description>
        </item>
        <item>
            <title><![CDATA[Suggestion datalist for inputs]]></title>
            <link>https://albertwalicki.com/learn/tips/suggestion-datalist-for-inputs</link>
            <guid>https://albertwalicki.com/learn/tips/suggestion-datalist-for-inputs</guid>
            <pubDate>Fri, 05 Nov 2021 21:53:21 GMT</pubDate>
            <description><![CDATA[The <datalist> element was created to be used as a recommendation list for inputs. You can choose available options or type your answer.]]></description>
        </item>
        <item>
            <title><![CDATA[Call to Action button]]></title>
            <link>https://albertwalicki.com/learn/tips/call-to-action-buttons</link>
            <guid>https://albertwalicki.com/learn/tips/call-to-action-buttons</guid>
            <pubDate>Sat, 30 Oct 2021 14:32:26 GMT</pubDate>
            <description><![CDATA[Always prioritize one button in a group. Buttons should never look the same: make the call to action the most prominent one.]]></description>
        </item>
        <item>
            <title><![CDATA[URL scheme]]></title>
            <link>https://albertwalicki.com/learn/tips/url-scheme</link>
            <guid>https://albertwalicki.com/learn/tips/url-scheme</guid>
            <pubDate>Sat, 30 Oct 2021 14:27:02 GMT</pubDate>
            <description><![CDATA[Every URL follows the same scheme. Learn the names of its five parts: protocol, domain, path, query string and fragment.]]></description>
        </item>
        <item>
            <title><![CDATA[Gradient text]]></title>
            <link>https://albertwalicki.com/learn/tips/gradient-text</link>
            <guid>https://albertwalicki.com/learn/tips/gradient-text</guid>
            <pubDate>Sat, 30 Oct 2021 14:17:46 GMT</pubDate>
            <description><![CDATA[Fill text with a CSS gradient: set a linear-gradient background, clip it to the text and make the text color transparent. Three lines of CSS.]]></description>
        </item>
        <item>
            <title><![CDATA[Background shorthand]]></title>
            <link>https://albertwalicki.com/learn/tips/background-shorthand</link>
            <guid>https://albertwalicki.com/learn/tips/background-shorthand</guid>
            <pubDate>Sat, 30 Oct 2021 14:13:08 GMT</pubDate>
            <description><![CDATA[CSS background has many properties. We can combine many lines with only one using shorthand. Let's see how to replace four major ones with only one line.]]></description>
        </item>
        <item>
            <title><![CDATA[Cute Animated Candle]]></title>
            <link>https://albertwalicki.com/cssart/cute-candle</link>
            <guid>https://albertwalicki.com/cssart/cute-candle</guid>
            <pubDate>Sun, 04 Apr 2021 06:00:00 GMT</pubDate>
            <description><![CDATA[Easy, fast and very cute candle. I will write a small article or thread how to create this illustration]]></description>
        </item>
        <item>
            <title><![CDATA[Lighthouse illustration]]></title>
            <link>https://albertwalicki.com/cssart/lighthouse</link>
            <guid>https://albertwalicki.com/cssart/lighthouse</guid>
            <pubDate>Tue, 30 Mar 2021 06:26:00 GMT</pubDate>
            <description><![CDATA[The lighthouse supposed to be much easier than it was. The top part was created as repeatable background.]]></description>
        </item>
        <item>
            <title><![CDATA[Cafe CSS illustration]]></title>
            <link>https://albertwalicki.com/cssart/cafe</link>
            <guid>https://albertwalicki.com/cssart/cafe</guid>
            <pubDate>Wed, 24 Mar 2021 12:10:00 GMT</pubDate>
            <description><![CDATA[When I saw this image the first time, I immediately knew that I want to rewrite it with CSS.]]></description>
        </item>
        <item>
            <title><![CDATA[Gameboy CSS illustration]]></title>
            <link>https://albertwalicki.com/cssart/gameboy</link>
            <guid>https://albertwalicki.com/cssart/gameboy</guid>
            <pubDate>Sun, 21 Mar 2021 12:16:00 GMT</pubDate>
            <description><![CDATA[I finally decided to start creating art again. This is my latest illustration. It took me some time, but it was pretty easy to do.]]></description>
        </item>
        <item>
            <title><![CDATA[Storm cloud illustration]]></title>
            <link>https://albertwalicki.com/cssart/storm-cloud</link>
            <guid>https://albertwalicki.com/cssart/storm-cloud</guid>
            <pubDate>Sun, 21 Mar 2021 12:15:00 GMT</pubDate>
            <description><![CDATA[Easy, fast, and very cute candle. I will write a small article or thread how to create this illustration]]></description>
        </item>
        <item>
            <title><![CDATA[Wooden hut single-div illustration]]></title>
            <link>https://albertwalicki.com/cssart/wooden-hut-illustration</link>
            <guid>https://albertwalicki.com/cssart/wooden-hut-illustration</guid>
            <pubDate>Sun, 21 Mar 2021 12:14:00 GMT</pubDate>
            <description><![CDATA[This is one of my first single-div illustrations. I was inspired and motivated by @jh3yy to start creating CSS images.]]></description>
        </item>
        <item>
            <title><![CDATA[Single-div Skull Illustration]]></title>
            <link>https://albertwalicki.com/cssart/single-div-skull-illustration</link>
            <guid>https://albertwalicki.com/cssart/single-div-skull-illustration</guid>
            <pubDate>Sun, 21 Mar 2021 12:14:00 GMT</pubDate>
            <description><![CDATA[This skull was my second single-div illustration. It's based on one of my Twitter followers image]]></description>
        </item>
        <item>
            <title><![CDATA[Know How to Google Is Important. Do You Know How Do It?]]></title>
            <link>https://albertwalicki.com/blog/know-how-to-google-is-important-do-you-know-how-do-it</link>
            <guid>https://albertwalicki.com/blog/know-how-to-google-is-important-do-you-know-how-do-it</guid>
            <pubDate>Thu, 18 Mar 2021 21:23:00 GMT</pubDate>
            <description><![CDATA[Knowing how to google is an essential skill for a developer. Everyone does it - from junior developers to seniors with ten years of experience.]]></description>
        </item>
        <item>
            <title><![CDATA[Aurora UI - how to create with CSS]]></title>
            <link>https://albertwalicki.com/blog/aurora-ui-how-to-create</link>
            <guid>https://albertwalicki.com/blog/aurora-ui-how-to-create</guid>
            <pubDate>Thu, 11 Mar 2021 07:46:00 GMT</pubDate>
            <description><![CDATA[Design trends are creating like a new javascript framework. Some of them are good and accessible to all users, and some of them are not.]]></description>
        </item>
        <item>
            <title><![CDATA[How to Fall In Love With Single Div Illustrations]]></title>
            <link>https://albertwalicki.com/blog/fall-in-love-with-single-div-images</link>
            <guid>https://albertwalicki.com/blog/fall-in-love-with-single-div-images</guid>
            <pubDate>Thu, 07 Jan 2021 15:00:00 GMT</pubDate>
            <description><![CDATA[A short tutorial on how to start with single div images. To create a simple image, you need to know only one thing: how backgrounds in CSS works.]]></description>
        </item>
        <item>
            <title><![CDATA[6 Form Related HTML Tags You Might not Know]]></title>
            <link>https://albertwalicki.com/blog/6-form-related-html-tags-you-might-not-know</link>
            <guid>https://albertwalicki.com/blog/6-form-related-html-tags-you-might-not-know</guid>
            <pubDate>Sun, 20 Dec 2020 17:20:00 GMT</pubDate>
            <description><![CDATA[HTML5 added a lot of new tags. Let's discover a few not that well known]]></description>
        </item>
        <item>
            <title><![CDATA[How to Stand out From the Crowd and be Unique]]></title>
            <link>https://albertwalicki.com/blog/how-to-stand-out-from-the-crowd-and-be-unique</link>
            <guid>https://albertwalicki.com/blog/how-to-stand-out-from-the-crowd-and-be-unique</guid>
            <pubDate>Thu, 10 Dec 2020 11:27:00 GMT</pubDate>
            <description><![CDATA[Nowadays, getting your first tech job without impressing your employer with your portfolio is challenging. Let's learn how to impress your future employer!]]></description>
        </item>
        <item>
            <title><![CDATA[Be unique! Weather app doesn't have to be boring]]></title>
            <link>https://albertwalicki.com/blog/unique-weather-app-images</link>
            <guid>https://albertwalicki.com/blog/unique-weather-app-images</guid>
            <pubDate>Sun, 29 Nov 2020 13:33:00 GMT</pubDate>
            <description><![CDATA[Everybody is creating weather apps, but does everybody has custom CSS-based images on it? Let's create unique images to boost your portfolio!]]></description>
        </item>
        <item>
            <title><![CDATA[Glassmorphism - how to create in pure CSS]]></title>
            <link>https://albertwalicki.com/blog/glassmorphism-how-to-create</link>
            <guid>https://albertwalicki.com/blog/glassmorphism-how-to-create</guid>
            <pubDate>Mon, 23 Nov 2020 17:35:00 GMT</pubDate>
            <description><![CDATA[A short guide on how to create glassmorphic elements in pure CSS. Glassmorphism is a new growing user interfaces style]]></description>
        </item>
        <item>
            <title><![CDATA[Creating basic and more advanced shapes in CSS]]></title>
            <link>https://albertwalicki.com/blog/creating-shapes-in-css</link>
            <guid>https://albertwalicki.com/blog/creating-shapes-in-css</guid>
            <pubDate>Sat, 14 Nov 2020 20:03:00 GMT</pubDate>
            <description><![CDATA[ This article includes examples of creating and styling various shapes in CSS: squares, rectangles, triangles, trapezoids, stars, diamonds, and more.]]></description>
        </item>
        <item>
            <title><![CDATA[Improving website by replacing images with CSS]]></title>
            <link>https://albertwalicki.com/blog/improving-website-by-replacing-images</link>
            <guid>https://albertwalicki.com/blog/improving-website-by-replacing-images</guid>
            <pubDate>Sat, 07 Nov 2020 13:51:00 GMT</pubDate>
            <description><![CDATA[Small images can be replaced with images to reduce the weight of the page. It can be easily fixed by adding some HTML and CSS. ]]></description>
        </item>
        <item>
            <title><![CDATA[Pure CSS animated gradient colour button is easier than you think!]]></title>
            <link>https://albertwalicki.com/blog/animated-gradient-button</link>
            <guid>https://albertwalicki.com/blog/animated-gradient-button</guid>
            <pubDate>Fri, 30 Oct 2020 07:00:00 GMT</pubDate>
            <description><![CDATA[Let's learn how to create an animated gradient color button with animated borders and text! One single CSS property will handle all animations]]></description>
        </item>
        <item>
            <title><![CDATA[My first blog post ever]]></title>
            <link>https://albertwalicki.com/blog/first-blog-post-ever</link>
            <guid>https://albertwalicki.com/blog/first-blog-post-ever</guid>
            <pubDate>Sun, 25 Oct 2020 16:04:00 GMT</pubDate>
            <description><![CDATA[Starting this blog took me almost half a year, but it finally happened. This post is about my story in the frontend development world.]]></description>
        </item>
    </channel>
</rss>