Osvaldas Valutis blog
Unconditional behavior: smooth use in scrollIntoView or scrollIntoViewIfNeeded is your website’s accessibility failure for people who prefer reduced motion. Therefore you probably 1 don’t need to… // ✘ node . scrollIntoView ( { behavior : "smooth" } ) …because this combination… // ✔︎ node . scrollIntoView ( ) html { @media ( prefers-reduced-motion : no-preference ) { scroll-behavior : smooth ; } }…
The deal with modals is you usually want them to live on the first floor inside <body> . In most cases, not all (we'll talk about one). Reasons for that being a risk of modal getting clipped out of view due to setup of parent elements, e.g. overflow: hidden; position: relative; transform: <...> . Even though position: fixed is the remedy for the most part, but hey, there's this transform dude... I…
Usually beforeunload is pretty straightforward: function formHasChanged ( ) { window . addEventListener ( ` beforeunload ` , ( e ) => { e . preventDefault ( ) } ) } Now just call formHasChanged once form field values have changed. However, Phoenix LiveView is a different case because of its pushState -based navigation nature, which means we need to polyfill this in addition to the browser-native…
I was about to invent a wheel with some JavaScript, but just in case I thought I’d take a look at <details> specs. A very simple HTML element that I thought I new everything about hid a very useful feature — [name] attribute that enables to have only one disclosure box open at a time: < details name = " story " > < summary > Title </ summary > < p > Content </ p > </ details > < details name = "…
I prefer using hexadecimal color formats. That’s mostly out of habit, and that #000 looks more clean than red-green-blue color format rgb(0, 0, 0) . Though the new syntax allows to have rgb(0 0 0) . Better, but still not my taste. However, the need to opacify them has been disrupting my everyday workflow: finding/opening a tool, converting HEX to RGB, and storing two values has never felt right :…
Loading libraries from CDN’s used to be a performance feature ( kind of* ): < script src = " https://cdn.example.com/jquery-3.6.0.min.js " > </ script > A browser would load a resource from cache even if it was included on multiple websites, because the cache key would only be URL of a resource: { "https://cdn.example.com/jquery-3.6.0.min.js" : data } Well, that is not the case anymore courtesy of…
As an example for the use case, have you every ran into API’s which proudly feed you with week day based data, but ordered not in a way you expected, typically starting the week with Sunday, not Monday, or the other way around? const data = [ ` Sunday ` , ` Monday ` , ... , ` Saturday ` ] Well, there’s a single line cure for this: data . push ( data . shift ( ) ) Result: console . log ( data ) //…
Reading my previous redesign post from 2014 I cannot believe how significantly the industry has evolved since then: no more Modernizr, loadCSS, custom responsive image implementation; IE out of image for good, Edge and Opera adapting Blink, Jamstack and that’s just a drop in the ocean. Most of these “news” feel ancient already. The latter fancy word is what I turned to this time, or to be more…
Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways.. There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just need to pick the best for the case you are trying to solve. At design and development agency Odd Camp we were debating on the most appropriate UX technique for…
Actually I did that right before entering the year of 2017 and my official start was on January 1st. After getting back to freelancing in 2012 I felt a need again to join a team and thus gain more from my professional life. As the matter of fact during the first month at my new workplace I felt like I learned more than in a whole year of freelancing. I’m not saying freelancing is wrong. It’s good…
Middleman is a Ruby based static site generator which we use heavily both for prototyping (checkout our Middleman boilerplate ) and production sites. In my previous article on Service Worker , I overviewed the most common challenges you may face when implementing the technology. This time I'd like to dive into a single specific topic of enabling a worker on Middleman based website as there are a…
Service Worker has already been here for a while: since 2015–09 it has been fully supported in Chrome/Opera and if compared to what we have today it has gone a promising way of improvements, bug fixes, became more easily debuggable and is supported much widely (hello Firefox). That led us into using the technology in production and implementing it in our kollegorna.se website, as well as some…
Lately, I've been obsessed with optimizing performance through lazy-loading. Recently, I've written on how to lazy-load Google Maps and on how to lazy-load responsive Google Adsense . Now it's time for Disqus , a service for embedding comments on your website. It's a great service. It eliminates the headache of developing your own local commenting system, dealing with spam, etc. Recently, I've…
My session driver of choice for CodeIgniter is database. A while ago, I noticed millions of rows in the corresponding database table. That means that garbage collector was not working. I checked config.php for sess_regenerate_destroy , but it was already set to false . It was really weird because the problem seemed to have come out of nowhere – not much ago things were working just fine. After a…
You've been hard at work optimizing your site. You've already done things like lazy-loading Google Maps and been wondering if there was anything else you could do. For example, is there anything we can do to improve the loading of ads? Good news, there is some things you can do. You can respect user's mobile data plan by loading ads only when they are likely to appear in the viewport zone. You can…
It’s common to present dates on the Web in a format such as "Published on September 12th, 2015" , or "09/12/2015 09:41:23" . Each of these examples tells the full date and/or time of some kind of activity – be it a published article, or a reader comment, or perhaps an uploaded video. Date formats like this might seem perfectly reasonable. After all, they’re informative and human-readable. Well…
When working on Readerrr , I wanted to enrich the experience of uploading an OPML file for importing feeds from other readers. There is nothing wrong with the traditional way for uploading a file, but it is a good thing to provide the alternative way – drag & drop file uploading. I've combined my experience into an article which you are very welcome to read on CSS-Tricks . Read the article…
And so it happened that I published the latest post of mine on Codrops , not here this time. It’s about styling <input type="file" /> by taking the advantage of <label> . The technique is not perfect – nothing is perfect that imitates native HTML elements – but having in mind its pros & cons, I found it to be the most appropriate solution for styling file inputs. Read the article . See the…
What I meant was scanning the DOM of a page for text equivalents and showing the actual parts of the page, as well as hiding the irrelevant ones. I came up with the technique when I was designing Readerrr’s FAQ page. Take a look at the example: I have also implemented the solution here on my blog. How it works All simple. Let’s take the FAQ page as an example. Here’s a typical markup: < h1 > FAQ…
Detecting the end of CSS animation and transition could be useful if you want to back up some of your JavaScript behavior on CSS. The most common uses of this in my practice are: Animating the display: none . I used the technique on Readerrr for tabbed content and modal boxes: the new content or modal box shows up only after the old one disappears. And… Animating the disappearance of an element…
I use input placeholders in two ways: (1) as labels in simple forms that have just a few input fields and (2) as tips or suggestions in complex forms: < input type = " email " name = " email " placeholder = " Your email address " /> The problem with placeholders is that the feature is not supported in IE 9 and below. This is a huge pain if you use placeholders as labels… JavaScript polyfill I…
I have recently sent a newsletter to the users of Readerrr , announcing a new feature (feed import). Besides the feature itself, it was not less important to send the newsletter correctly, i.e. to make it responsive, of course, and… to solve this problem (see the grayed description text): This is a great example of bad UX . There are many email clients that provide an excerpt from the email text…
There are two ways of using SVG in HTML via <use> : with external source and without it. “The use element takes nodes from within the SVG document, and duplicates them somewhere else” – MDN . In the first case, the SVG graphics insertion (duplication) usually looks like this: < svg > < use xlink: href = " sprite.svg#cart " > </ use > </ svg > The good: the file sprite.svg will be cached by the…
Auto-hide sticky header is a shot that shoots down two rabbits: makes site navigation easily accessible anywhere on the page and saves content space at the same. My client, Easy Shine, was happy to have this type of header for their website. I've also implemented this technique here , on my website (you can see it when the width of your viewport is below 768 px). Making header sticky < header…
I would call this year a year of web performance . The very useful web performance solutions developed by people who make websites. The cult of website performance analyzers. The rise of mobile data users. The releases of faster mobile browsers. The better raking on Google for faster websites. The conferences dedicated to web performance. All of these affected my work and web performance has…
Turns out currentColor has been here for quite some time now, but I heard about it only a few months ago when I read Dudley Storey’s post . He states that it is supported very well across the browsers (IE9+). This was enough for me to start using it in production. I was quite surprised how useful the keyword is: it helps to keep CSS code shorter and smarter. Before diving into practical usage…
After almost three years I have finally arrived at the point where I had to redesign my personal website. I was forced by a few reasons. The first one is that I had this huge image on the homepage for the newest blog post. It was okay as long as I had something unique to show, preferably my own creation. But what if I wanted to write a short post, a comment, for example, which has no relation to…
After I’ve published the post on how I had implemented responsive equal height blocks into Readerrr , I received some useful feedback from the community. Daniel Sturm suggested using CSS3’s Flexbox rather than JavaScript, and Veerle Pieters tweeted “<...> you could do with Flexbox & use this as JS fallback” . Exactly! How did I not think of that at all?! I’ve read several articles about…
Update: after publishing this post I received some useful feedback from the community and wrote a new post with much smarter solution to the problem. I recommend you reading Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback instead._ When I was designing Readerrr’s features page, I wanted to put the features list content in a semantic markup, i.e. <ul> , <li> , and to have two…
Subtle, minimalist and intuitive UI is what I like most about web design, having the visual part of it in mind. The design is in details. Refine each of them in the context of user experience and you’re almost perfect. Newsletter subscription form is the detail that can easily get you one step closer to the perfection. But it’s probably the most simple web form with just an input field and a…
Computers have multiple input devices for easier usage. Imagine entering text without a keyboard or using a website without a mouse. Therefore we, people who make websites, should enable these devices on our products. The most basic but very useful thing would be keyboard shortcuts for pagination. When I was developing a custom Tumblr theme for Tree House Love , I wanted to make navigating through…
I love RSS. I think it is the best method to get the news. Way better than newsletters or social media. Why? I will dedicate one of my further posts to answer this question. So, because of my huge love for RSS, my heart was crying when I heard the sad, sad news: Google Reader is shutting down on July 1, 2013. The very first question that came into my mind was: "I have lots of coffee supplies, how…
As for the image lightboxes, I have always lacked simplicity for them. I mean not only the visual design, but the overall experience: from implementation to UX . All due respect, but I have never liked any of these light-fancy-face-boxes . They all were solving problems that just don’t exist : lots of unwanted features by default, total mess in markup, no native behavior for touch screens. I was…
Dealing with CSS browser compatibility and solving technical issues is probably the real charm (I mean it) of front-end development. None of the projects do without it. Working on one of those I finally had my first experience with CSS function calc() : With calc() , you can perform calculations to determine CSS property values. I know that you know this, and I also know that you have already seen…
What if you need a multi-level navigation? In most cases, you design a drop-down menu using unordered lists. But what do you do to make it usable on small and / or cursorless screens? By usable I mean being able to use hyperlinks on parental anchors and open them with a double-tap (which is a native act on touch devices), also being able to close the drop-downs by tapping anywhere outside them to…
A couple of months ago I built a jQuery plugin that replaces <audio> element with a little of custom HTML code. By adding some CSS you get a whole new player which looks the way you want and has the same functionality as the default player. There is no direct way to style the element. But the HTML5 DOM has methods, properties, and events for the element and thus makes it quite easily manipulable.…
…or Pinterest-style layout. jQuery Masonry is a jQuery-based plugin for a dynamic grid layout built by David DeSandro. What it does is “arranges elements vertically, positioning each element in the next open spot in the grid” and what you get is “minimized vertical gaps between elements of varying height” . Let’s dive into that. Sheepy Me is a website where I constantly combine time-tested…
The book Design Is A Job is not the first book from that wonderful A Book Apart collection I have read. But it's the book from the whole series that I want to talk about first, because it analyzes a different aspect of design as a profession, as a daily bread. Your design is useless if you are unable to sell it, if you can't convince people that your solutions are in the right place and at the…
I'm not quite sure, but it was probably 2006 (correct me if I'm wrong) when with the birth of jQuery the very first non-Flash slideshows/sliders appeared on Web. Before that time, writing JavaScript was a horrible pain and therefore websites were boring, Internet wasn't that attractive as it is nowadays. Because nobody wanted to spend a week writing a thousand-lines code just to have something…
As our industry grows up, many of us seem to forget the human side of digital. There still hides a story of real people behind every interface. With this really nice idea and a real sentence, Kai Brach starts the first issue of his magazine named Offscreen . The quote also explains what it is all about. It's about people behind bits and pixels. And by word people I mean not just people who design…
Business cards, for me personally, for a long time were like a phenomenon from prehistoric times. Just like wired phones or cassette players. And there's no need to look deeper why so, because bad design is always obvious. It just happened that all of the business cards I saw in my life were so crappy , that I have been always questioning myself why people share these ugly sheets of paper with one…
I have always been interested in elegant yet helpful techniques that in some way extend or rewrite native browser functionality and therefore help making websites a bit more better than they could be. The last time I shared a technique for mobile-friendly and responsive tooltip , which indirectly extends functionality of title attribute in HTML. This time: thoughts and a piece of code for, as…
CodeIgniter is simple yet elegant, open source PHP framework developed by EllisLab. They also built the well-known ExpressionEngine by using CodeIgniter as a base. So that probably just proves, how powerful the framework is as well. Nevertheless, it is extremely easy learnable. Basically, their User Guide is all you need to craft easy websites. I chose CodeIgniter over Wordpress because wanted to…
Tooltip is a splendid invention. Small detail in web design that plays a big role when it comes to user experience. Usually, tooltips are used to present a tiny amount of hidden content (mainly explanatory, so-called tips), that pops up when user moves a cursor over or clicks (less common) on a special target. When working on my personal website, I was in need of a tooltip. I decided not to limit…
Have you ever wanted or needed to do something like this? Typical Background-Dependent Solution This is probably the most common heading (or other text block) bars solution which I believe you have used at least a couple of times in your projects. Here's how this typical situation usually goes in code: HTML < div > < h1 > < span > Heading Bars </ span > </ h1 > </ div > CSS div { background-color…
Hey! My name is Osvaldas and I live in Klaipėda, Lithuania. Within a completely new version of my personal website I decided to start a blog. I feel indebted to our fantastic community and am here to influence it positively as much as possible. A humble introduction – below. Short story In 2003 I discovered Microsoft's famous, now legendary FrontPage. Back then I thought Paint was quite a good…