Maverick TimesMaverick Times is a dedicated platform studying and tracking startup growth playbooks across Hyderabad, Warangal, and Vijayawada.Max Böck2024-12-31T00:00:00Zhttps://mavericktimes.in/A year in review: 20242024-12-31T00:00:00Zhttps://mavericktimes.in/blog/year-in-review-2024/2024 was in many ways a very challenging year for me, but it was also one of the most significant.
This year’s annual review post is a bit different.
In previous years, I reflected on the work that I did, the web projects I built, the posts that I wrote and so on. There was lots of that in 2024 too of course (well maybe except the blogging part, that seems to become a pattern).
But the truth is, most of my energy this year went towards building a life for our new family.
My son was born in November, and he’s happily sleeping on my chest as I am typing this. I’ve never felt more grateful or proud about anything in my life, and I still can’t believe he’s with us now.
First night in the hospital with my newborn son
The months leading up to his arrival were quite stressful at times, supporting my wife’s pregnancy and preparing everything as best I could for the steps ahead. We’re planning a move next year, and there’s still lots of work to do before we can settle into our new home.
But all of it is very rewarding, and I can’t wait to see where 2025 takes us. Despite everything that’s going wrong in the world right now, I feel hopeful for the future.
]]>A year in review: 20232023-12-31T00:00:00Zhttps://mavericktimes.in/blog/year-in-review-2023/Haven't done one of these since 2020, but this feels like a good opportunity to get some writing in just before the new year. Let's see if I can still remember how to do this blogging thing.
We built a lot of interesting projects in 2023 with Codista, and we’ve had a very good year working with established clients and partners. Some of it has been quite challenging, but we managed to pull off a stellar track record of successful projects, and I’m really proud of our small company!
We also hired our first front-end developer (other than myself). I’ve posted the job listing on our own website and on Mastodon, and with the help from the web dev community, we found somebody who fits our team really well and I’m very happy with them. A big thanks to everyone who boosted the post or mentioned it at meetups!
I’ve struggled a bit with personal health issues this year. I have a moderately severe form of atopic dermatitis, an auto-immune disease of the skin. I’ve had it all my life. Some days it feels OK, while on others it feels like my skin is on fire and it’s hard to concentrate on anything else besides the impulse to scratch. If you’ve ever seen me give a talk and my face was bright red, it’s not (only) because I’ve been drinking the night before.
When I was younger I’ve tried different forms of therapy, but none of them really worked - so I’ve become pretty much used to living with it. But then it got a lot worse in 2023. I couldn’t sleep properly anymore and it started to affect other areas of my life, so I decided to take another shot at fighting it.
I got a new doctor and started treatment with a new drug that recently got EMA approval. After half a year, I switched to a different drug, which I’m currently still evaluating. First results have been promising though, so fingers crossed that this is the one. Would certainly make my 2024 more pleasant.
I was fortunate enough to see some beautiful places this year. Event though my pre-pandemic days of traveling the more remote parts of the world are likely over, it’s still nice to get out and explore again.
I went to Zurich for a client workshop in the spring, and immediately followed that up with a trip to Amsterdam for CSS Day 2023. That conference was one of the best I’ve ever been to. Even though I caught a pretty bad cold and had to skip some of the fun - the talks, people and just overall atmosphere of that event were amazing.
I’m grateful I got to see so many familiar faces and talk to some of my web friends in person. I also left the conference feeling very inspired and (as always) a little guilty that I can’t find enough time for community work and writing. Hopyfully next year my schedule will allow for a bit more of that.
With Nils and Una at the CSS Café Meetup, the day after the conference
In the summer, we went for a vacation in the south of Croatia and spent two weeks on the Dalmatian coast.
A nice quiet bay at the shores of Hvar island
We also did some more work on our small garden house in Lower Austria and had a few lovely days in autumn hiking the surrounding hills and vineyards.
I think I’ve grown a bit weary of the tech industry this year. I still love the web and I love what I do for work, but I lost some of my interest in new developments, new frameworks, the hot tech of the day. I just don’t care as much anymore.
It may also be the rising topic of AI that is popping up everywhere you look, or the crypto-esque attitude that seems to go along with it. Instead of being excited about new possibilites, I feel a bit disheartened by the trends I see. AI looks like a great tool, but everything I read about how it’s actually applied comes from the same hyper-captitalist mindset that brought us gems like bitcoin mining and NFTs. I don’t know, maybe I’m just tired.
There are other trends as well that I feel more optimistic about. Ones that call for a weirder web with more original, human content. It could just be wishful thinking, but I’ve caught glimpses of that version of the future for a while now. Here’s hoping.
Well, that’s all folks. See you in 2024!
]]>Webmention Analytics2021-02-07T00:00:00Zhttps://mavericktimes.in/blog/webmention-analytics/I'm a fan of webmentions. I've written about how to use them before, and I'm quite happy with having them on my site.
However, it can get difficult to see what’s going on with them - especially if there’s a lot of “background noise”. Many sites just scrape content from well-known blogs and republish it for SEO juice. If that content includes a link to your site, it can lead to webmention spam.
Unlike on social media, you also don’t get notifications or reports about incoming webmentions. You’re just handed a bunch of raw data to use however you like. That’s part of the beauty of the Indieweb though: you can tailor it to whatever suits you best.
I recently started playing around with the data I get from webmention.io to see if it could be displayed in a more meaningful way. The result is a new side project I call:
✨✨✨ Webmention Analytics ✨✨✨
You can see it in action in this demo on my site.
Breakdown of webmentions per day
I built this with Eleventy and Netlify, mainly because that’s my favorite tech stack to tinker with. But for analytics that don’t have to be real-time, static site generators are actually a really good fit.
Expensive computations like parsing and analyzing 8000+ data points like this can be run once a day through a periodic build hook. The reports it generates are then instantly available to the user, while still being up-to-date enough.
If you also use webmention.io to show webmentions on your site, you can fork the code on Github and make your own instance of webmention-analytics. Just follow the instructions in the README to get started.
Keep in mind that this is still a very early version of a weekend side project, so there's probably a few things to iron out. Cheers!
]]>A year in review: 20202020-12-19T00:00:00Zhttps://mavericktimes.in/blog/year-in-review-2020/I don't think I have to tell anyone why this year sucked, what with the pandemic and all. 2020 is going down in history as a massive crapstorm.
Still, I want to continue the tradition of “end-of-the-year” blogposts and since there’s already enough doom out there these days, I’m trying to focus on the good things that happened instead.
The web industry is among the fortunate ones that are very well suited for remote and distributed work, which is why I was able to keep working from home throughout most of the year.
We rented a great new office in the spring that I’ve hardly been to since, but our team at Codista is quite used to working remote and we already had all the necessary infrastructure in place.
We had more than enough projects on our hands and we did some really interesting, challenging stuff that I can’t talk about (yet) 😉 - so all in all, work was good.
When the first lockdown hit, I kept occupied by building things - mostly in and around Eleventy, which helped me get ideas off the ground quickly. Here are some of these:
Eleventastic: my personal starter kit for Eleventy projects. I wanted to get rid of “external” build tools like Gulp and manage all pipelines inside Eleventy itself.
Eleventy Resumé: a simple microsite that functions as a CV/Resumé in web and print.
Whimsical Website Club: a collection of websites that spark joy by doing things a little bit less serious.
I had some talks planned for 2020 which of course didn’t happen. I did a few online talks though and I participated in Inclusive Design 24, a free 24-hour livestream event where I talked about another side project, the “Emergency Website Kit”:
The Webclerks team and I had the pleasure of hosting our own little virtual meetup event “Vienna Calling” on Twitch, and we had a phenomenal lineup. A big thank you again to all the speakers who joined us, as well as the rest of the team who made this happen behind the scenes.
BTW: You can find the full event as a playlist on Youtube:
In the summer, the situation improved enough for me and my girlfriend to take some much needed vacation time. With international travel still closed, we decided to go on a road trip through Austria instead and it was awesome. This country has some really beautiful places in store.
The Kanisalpe mountain range in Vorarlberg, Austria
This year, more than ever, I realized the enormous impact the web has on all of us, and how important it is to keep it free and open. I know we’re all sick of doing things online all the time, but imagine for a moment what this year would have looked like had the web never been invented.
Millions of people would be completely isolated, even more would be out of their jobs. Schools could not operate. Civil rights movements would be almost impossible to organize. Global research projects like the development of a vaccine would take years longer. And you probably wouldn’t have seen the faces of your loved ones in months.
The web has become such an integral part of our lives that we sometimes take it for granted. It’s not. In fact this shitshow of a year should probably remind us that we need to take really good care of the things that are still connecting us.
I’m not going to compare my goals from last year with what I’ve accomplished in 2020. I don’t think it matters. Give yourself a break this year - it’s OK if things didn’t turn out the way you wanted.
I’ll see you all in 2021. And hopefully we’ll all have a vaccine in our system and a better year ahead of us.
]]>A year in review: 20192019-12-31T00:00:00Zhttps://mavericktimes.in/blog/year-in-review-2019/As the final hours of 2019 are winding down, I want to take a moment and look back at everything that happened this year - because it was a busy one.
At the beginning of 2019, I became a partner at Codista, the software studio where I’ve been working for some time now. Thomas, Luis and I now run the company as a trio, and building together has been great.
Besides working as a frontend developer on a number of challenging projects this year, I was also responsible for the rebranding of our own identity. There are some interesting new ideas in the works for our studio in 2020, and I’m excited to see them come to life.
The feedback from the web community on these posts was amazing, and it never gets old to hear that anything you’ve made actually helped people in some way.
Like in 2018, all my writing was published on my own website. I’m increasingly fond of the IndieWeb and the principles behind it, and I want to continue striving for more independence. Eleventy and Netlify both have been very valuable improvements for my personal site this year, and I really like working with them.
I wrote two new talks in 2019 and had the chance to speak at a few community events.
First I was invited as a guest speaker to the Mozilla Developer Roadshow, where I had a really interesting “Fireside Chat” about CSS with HJ Chen. It was awesome meeting her and I’m very grateful for the opportunity to speak there.
Following my blog post about the topic, I gave a talk on the CSS Mindset at CSS-Minsk-JS in September and had a wonderful time. A big thank you to the organizers and attendees, who made me feel very much at home in Minsk.
A big part of this year was devoted to making our own Webclerks Conference happen in Vienna. It was the first time for me to be involved in the organization of such an event and I really had no idea how it would turn out, so I’m overjoyed that it went so well.
I also shared my experiences with the IndieWeb in a talk called “Rage against the Content Machine” there. I’d love to do that one again in the new year.
I’ve been fortunate enough to see many beautiful places on this planet now. I made a little map to keep track of them here.
This year, I visited Portugal, Georgia, Belarus, the Czech Republic and the Azores. My personal favourites were the ancient city of Tbilisi and the raw nature of São Miguel island, both fascinating places in their own regard.
2019 was also a source of frustration in many ways. From the ongoing global shift to right-wing populism to increasingly dystopian technology trends to the looming threat of climate change. I’ve had some issues with worrying and stress in my personal life as well.
But I’d like to think that the new decade can be an opportunity to learn from past mistakes and change things for the better. I’m going to try and focus on that going forward.
help to further grow Codista into a sustainable, ethical business
write more regularly
continue involvement in the IndieWeb community
attend and speak at more conferences
make more music
read more non-tech books
keep up with friends and enjoy life a little more
That’s all folks. See you tomorrow!
]]>Webclerks Conference2019-11-28T00:00:00Zhttps://mavericktimes.in/blog/webclerks-conf-2019/It has been three days now since I stood on stage at Urania Vienna, hearing Manuel close our very first conference. I'm still not really sure how we pulled that off.
Photo by Sergey Poliakov (Twitter)
I have been to quite a few web development conferences as an attendee, and lately even as a speaker. But the organization of such events always eluded me. I of course noticed when an event was particularly well put together, but I always assumed that the people running the show had a large team, lots of experience and were just very talented organizers.
That’s why it felt so weird to suddenly find myself in that group. Clearly we’re just a bunch of people who thought it would be cool to invite some of our heroes and heroines to Vienna, with little prior experience in creating an event at that scale.
But then it worked! We’d somehow gotten ourselves an absolutely incredible line-up of speakers and a sold out venue.
Fast forward to last Monday, when months of work finally resulted in that one special day. Sleep had been rare in the days before, and the tension was high.
None of us really knew how this would turn out, so we just gave it our best shot. And the feedback so far from speakers and attendees alike has been great:
It's hard to believe that the @wearewebclerks conference was the first one ever by the organisers. It was slick, welcoming, friendly, and interesting. Thanks for asking me to speak! ♥️ #webclerks
The @wearewebclerks conference today was seriously awesome! Great talks, great organization and great people! And all of that in Vienna ♥️ Looking forward to the next year #webclerkspic.twitter.com/GHOqfgzsNB
This conference was a great example of getting it right from the beginning. Amazing speakers, inclusive, accessible and with all details taken care of. Congratulations to the team! I'm really looking forward to next year's event #webclerkspic.twitter.com/YlRfzyt5kD
Here are some of my personal takeaways from the experience:
It really pays off to have a good tech team. We could not have asked for a better crew than ALC, they handled the event flawlessly by themselves. A huge thing to get off your shoulders as an organizer.
If you want to livestream an event on youtube, that apparently requires a “brand account”. These take 24 hours to approve, so it’s best to not discover this the night before the conference. (Thankfully Joschi from a11yclub helped us out there!)
The glass water bottles we put into everyone’s goodie bag were a big hit. People liked that they could refill anytime. Less waste, more hydration!
You can make your own rules! Not all tech confs have to follow the same recipe. In fact some of the little differences are what makes you stand out.
We’re not a faceless recruiting event, but a community of humans, and we wanted to be as inclusive as possible. That thought went into a lot of aspects of our conference from ticket pricing to info emails to food choices. Definitely something to keep.
I really have to highlight the insane amount of work that Manuel and Claudi have put into this event. There’s an internal Trello board with about a gazillion tasks on it, and most of those had their names on them. It is beyond me how they did it.
Daniel has been an absolute beast as well - he did all the designs, printed badges, flags, shirts, stickers - you name it. If you thought webclerks looked like a professional brand, it’s because of him.
We also had lots of help from awesome volunteers who dedicated their time and energy to our event. Jeannine, Kerstin, Michel, Anne and Gregor have been incredibly helpful and I’m so glad they joined our team.
I honestly can’t think of many industries where it would have been possible to put an event like this together from scratch. I believe the reason this worked at all is the incredible openness displayed in the web community.
Where international speakers come to a small local conference to share their knowledge. Where companies like mozilla support a relatively unknown event and fund inclusiveness. Where attendees pay it forward to enable underrepresented others to join.
I’m happy and proud to be a part of that community.
Thank you! 🎉
]]>A Webring Kit2019-04-14T00:00:00Zhttps://mavericktimes.in/blog/webring-kit/After Tatiana Mac proposed to bring webrings back, I hacked something new together over the weekend: A starter kit for hosting your own webring!
It’s a blast from the past: In the 90s, sites about a common topic could join together in a central index. To be a member, you had to embed a little widget on your page that contained a “forward”, a “backward”, and a “random” button. These buttons would then link to the next or previous site in the ring.
Since the term "webring" is trademarked in the US, this needs another cool name. Know any? Please add it to this thread!
To keep the ring from getting spammed or flooded with trolls, it has to be curated. The project does that by hosting the member index on Github, in a simple JSON file. Admins can accept or decline pull requests from people who want to join the ring, after reviewing their sites. There’s also a Code of Conduct that every member has to follow in order to be part of the ring.
For people who are not technical enough to submit a pull request, there’s also a simple signup form (using Netlify forms) to send the admin your site’s info via email and let them add you.
I wanted to make this as easy as possible, so people can start linking their personal sites together straight away. So I made the boilerplate using Eleventy. After forking the codebase, the proud webring admin only needs to set a title and a bit of meta data.
Eleventy then generates a site like this that lists all the members, shows the Code of Conduct and the instructions on how to join.
You can deploy it to Netlify, a free static site host, with just a few clicks. Netlify also lets you either use one of their subdomains, or a custom one you own.
Members of the ring can copy a code snippet to embed a banner on their site. I borrowed a bit from Twitters embed widget here: The basic markup is just a link to the index, and the prev/random/next links. But if you also include the script tag, it will replace that with a custom web component, designed by the ring admin.
<webring-banner><p>Member of the <ahref="https://webringdemo.netlify.com">An Example Webring</a> webring</p><ahref="https://webringdemo.netlify.com/prev">Previous</a><ahref="https://webringdemo.netlify.com/random">Random</a><ahref="https://webringdemo.netlify.com/next">Next</a></webring-banner><scriptasyncsrc="https://webringdemo.netlify.com/embed.js"charset="utf-8"></script>
This will automatically show the title, member count, maybe a logo. And it can be edited from a central location. It might look something like this:
If a member publishes an RSS feed on their site, they can add that to the ring as well: the index page will generate an OPML file, so people can subscribe to all members at once.
]]>Using Webmentions in Eleventy2019-01-10T00:00:00Zhttps://mavericktimes.in/blog/using-webmentions-on-static-sites/In last week's post, I talked about syndicating content from a static site to Twitter. But getting content out is only half the challenge.
The real value of social media (apart from the massive ad revenue and dystopian data mining) is in the reactions we get from other people. The likes, reposts and replies - they’re what makes it “social”. To gain control over our own content, we need to capture these interactions as well and pull them back to our sites. In indieweb terms, that’s known as “backfeed”.
A Webmention is an open standard for a reaction to something on the web. It's currently in W3C recommendation status. When you link to a website, you can send it a Webmention to notify it.
It's comparable to pingbacks, except that webmentions contain a lot more information than a simple "ping". They can be used to express likes, reposts, comments or other things.
To make a site support webmentions, it needs to declare an endpoint to accept them. That endpoint can be a script hosted on your own server, or in the case of static sites, a third-party service like webmention.io.
Webmention.io is a free service made by indieweb pioneer Aaron Parecki that does most of the groundwork of receiving, storing and organizing incoming webmentions for you. It’s awesome!
To use it, sign up for a free account there using the IndieAuth process, then include a link tag in the head of your site:
Cool. So that’s all very nice, but the real party is still over at [currently hip social network], you say. Nobody ever sends me any webmentions.
Well, while your platform of choice is still around, you can use a tool to automatically turn social media interactions into beautiful open webmentions. Bridgy is another free service that can monitor your Twitter, Facebook or Instagram activity and send a webmention for every like, reply or repost you receive.
So if you were to publish a tweet that contains a link back to your site, and somebody writes a comment on it, Bridgy will pick that up and send it as a webmention to your endpoint!
The resulting entry on webmention.io then looks something like this:
The beauty of webmentions is that unlike with regular social media, reactions to your content are not limited to users of one site. You can combine comments from Facebook and Twitter with replies people posted on their own blogs. You can mix retweets and shares with mentions of your content in newsletters or forum threads.
You also have complete control over who and what is allowed in your mentions. Content silos often only allow muting or blocking on your own timeline, everyone else can still see unwanted or abusive @-replies. With webmentions, you’re free to moderate reactions however you see fit. Fuck off, Nazis!
Once the webmention endpoint is in place, we still need to pull the aggregated data down to our site and display it in a meaningful way.
The way to do this depends on your setup. Webmention.io offers an API that provides data as a JSON feed, for example. You can query mentions for a specific URL, or get everything associated with a particular domain (allthough the latter is only available to site owners.)
My site uses Eleventy, which has a conventient way to pull in external data at build time. By providing a custom function that queries the API, Eleventy will fetch my webmentions and expose them to the templates when generating the site.
In Eleventy’s case, I can set that function as a custom filter to use in my post templates.
Each post will then loop over its webmentions and output them underneath.
<!-- webmentions.njk -->
{% set mentions = webmentions | getWebmentionsForUrl(absoluteUrl) %}
<olid="webmentions">
{% for webmention in mentions %}
<liclass="webmentions__item">
{% include 'webmention.njk' %}
</li>
{% endfor %}
</ol>
You can see the result by scrolling down to the end of this post (if there are any replies 😉).
Because static sites are, well, static - it’s possible that new mentions have happened since the last build. To keep the webmention section up-to-date, there’s an extra step we can take: client side rendering.
Remember I said the webmention.io API can be used to only fetch mentions for a specific URL? That comes in handy now. After the page has loaded, we can fetch the latest mentions for the current URL and re-render the static webmention section with them.
On my site, I used Preact to do just that. It has a very small (~3kB) footprint and lets me use React’s mental model and JSX syntax. It would probably also have been possible to re-use the existing nunjucks templates, but this solution was the easiest and most lightweight for me.
I essentially used the same logic here as I did in the static build, to ensure matching results. The rendering only starts after the API call returned valid data though - if anything goes wrong or the API is unavailable, there will still be the static content as a fallback.
I also made an Eleventy Starter Template with basic webmention support, using some of the techniques in this post. Check it out!
There are of course still some missing pieces, most notably the ability to send outgoing webmentions to URLs linked to in your own blog posts. I might have to look into that.
Remy Sharp has recently published a very useful new tool that takes care of handling outgoing webmentions for you. Webmention.app is a platform agnostic service that will check a given URL for links to other sites, discover if they support webmentions, then send a webmention to the target.
You can use that service in a number of ways, including your own command line. If you host your site on Netlify though, it’s also very straightforward to integrate it using deployment webhooks!
My implementation was heavily inspired by Aaron Gustafson’s excellent Jekyll Plugin (link below), which goes even further with customization and caching options. If you’re running a Jekyll site, use that for almost instant webmention support 👍.
A truly responsive website should adapt to all kinds of situations. Besides different viewport sizes, there are other factors to consider. A change in connectivity is one of them.
Earlier this week, I was sitting in a train on my way to speak at a local meetup. InterCity trains in Austria all have WIFI now, so I was doing some last-minute work on my slides online. Train WIFI being what it is though, the network wasn’t exactly reliable. The connection kept dropping everytime we went through a tunnel or too many passengers were logged on.
This is quite a common scenario. People are on the move, network coverage can be poor, internet connections fail. Luckily, we can prepare our websites for this and make them more resilient by building them offline-first.
Offline support is awesome, however your users might not be aware of these capabilites - and they shouldn’t have to be. In some cases they might not even know that they’ve gone offline. That’s why it’s important to communicate what’s going on.
Chances are not every part of your site will work offline. Certain things may not be cached, others may require server interaction. This is fine of course, but the interface should reflect that. Just like a responsive layout adapts to changes in viewport size, your offline-optimized site should adapt to changes in connectivity.
The key ingredients here are the offline event and the navigator.onLine property. By combining them, we can check for network changes and react accordingly.
Here’s an example of a simple connectivity check:
let isOffline =false;
window.addEventListener('load', checkConnectivity);// when the page has finished loading,// listen for future changes in connectionfunctioncheckConnectivity(){updateStatus();
window.addEventListener('online', updateStatus);
window.addEventListener('offline', updateStatus);}// check if we're online, set a class on <html> if notfunctionupdateStatus(){if(typeof navigator.onLine !=='undefined'){
isOffline =!navigator.onLine;
document.documentElement.classList.toggle('is-offline', isOffline);...}}
⚠️ Note: With the online event, there’s a slight possibility of false positives: A user might be connected to a network (which is interpreted as being online), but something higher up might block actual internet access. The offline event is a bit more reliable, in the sense that an “offline” user can be expected NOT to have access.
Now we want to display some kind of notification to offline users, so they know what’s going on. This can be done in a number of ways; however I would recommend using aria-live regions to make it accessible and have screen readers announce the connection change as well.
Using such a notification bar is pretty straightforward. First, define an element to display messages on your page:
The aria-live attribute tells screen readers to announce changes to this element. “assertive” means it will interrupt whatever it is currently announcing at the time and prioritize the new message. The aria-relevant tells it to listen for changes in the text content of the element.
You can extend the handler function from before to populate the notification area whenever you detect that a user has gone offline:
functionupdateStatus(){...const notification = document.querySelector('#notification');if(isOffline){
notification.textContent ='You appear to be offline right now.';
notification.removeAttribute('hidden');}else{
notification.textContent ='';
notification.setAttribute('hidden');}}
This is a very simple implementation - you can of course always get a bit fancier with an animated notification bar (or “toast message”). There are also some nice pre-made components for this.
If you’re reading this on my site, you can see a version of these notifications in action if you simply switch off your WIFI for a second.
Go ahead, I’ll wait.
If you’re somewhere else or your browser doesn’t support service worker / offline events, here’s how this could look:
Notifications are a good start, but it would be even nicer if we could give the user some visual indication of which parts they can actually use offline, and which not.
To do this, we can loop over all the links on page load and check their href against the cache. If they point to a cached resource (e.g. will work offline), they get a special class.
Once the offline event fires, we toggle a class on the body and visually disable all links that aren’t cached. This should only apply to URLs, so we can ignore tel:, mailto: and anchor links.
.is-offline {/* disable all links to uncached pages */a:not(.is-cached){cursor:not-allowed;pointer-events: none;opacity:.5;}/* ignore anchors, email and phone links */a[href^="#"],
a[href^="mailto"],
a[href^="tel"] {cursor:auto;pointer-events: auto;opacity:1;}}
Another way we might use this is to prevent users from filling out forms. Most forms pass data to the server and require a connection to work, so they won’t be very useful when offline.
What’s worse is that users might not know there is a problem until it’s too late: imagine filling out a lengthy form and finally hitting the submit button, only to find a network connection error page and all your inputs gone. That’s frustrating.
/* Disable Forms when offline */.is-offline form {position:relative;opacity:.65;cursor:not-allowed;pointer-events:none;&::after {content:'Sorry, you\'re offline.';display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#FFFFFF;background-color:#2D2D2D;padding:1rem 2rem;}}
No contact forms in offline country.
That effectively disables every form on the page, indicating that this functionality is currently not available. Depending on what your form does, you might also consider applying these styles just to the submit button - that way a user could pre-fill the form (possibly even have it validated in JS), and then submit it once they come back online.
If you’re doing this, remember to suppress “submit on enter” as well, and make sure the user knows why submitting won’t work at the moment.
UPDATE: I found a better way to handle this - by storing form submissions in localStorage and then checking for them once the connection comes back online. Read about it in “Offline-Friendly Forms”.
