What Was FrontKon 2024 Like?

Great! FrontKon 2024 once again delivered a dose of inspiration and knowledge for enthusiasts of (not only) frontend. This year's edition took place at O2 Universum in Prague. A total of 12 Superkoders headed to the conference, contributing to the program not just with a talk, but also with a panel discussion and moderating. As usual, we enjoyed not only the learning but also the chance to meet colleagues from the industry. In this article, we bring you a selection of the talks that caught our attention the most this year.

Trapped by Vercel, or
comfort comes at a price

Michal Matuška (Superkoders)

A case study on the Megaubytovanie.sk project and our struggles running this website on the Vercel platform. As Michal mentions in his talk, using Vercel has a lot of advantages and significantly improves the developer experience – from connecting a repository for automatic deployment to being able to comment on individual versions in so-called preview mode. All of this is great until you hit Vercel's limits and the pricing that comes with them. And since Megaubytko gets millions of page views, we blew way past those limits – to the point where running the site would have cost 150,000 CZK a month. Michal described how we optimized the costs. He shared plenty of tips that apply to other projects too, ones built on a serverless approach just like Megaubytko. If you're curious about the rocky road from negotiating a better price with Vercel to the final decision to move the project elsewhere, check out Michal's talk.

Panel discussion:
My Path to Web
Accessibility Specialist

Kristýna Marková (Superkoders)
and Martin Michálek (PAGESPEED.ONE)

A panel discussion with our web accessibility specialist, Kristýna Marková a Martin Michálek was an inspiring and interactive experience that sparked plenty of questions from the audience. Kristýna talked about the importance of web accessibility and also about her experience earning the Web Accessibility Specialist (WAS) certification.

The discussion also covered the most common mistakes, such as missing image descriptions, focus issues, or the practices and tools she uses for checking and testing accessibility on projects. The importance of testing with real users was also emphasized.

Myths and Nonsense
about Web Speed

Martin Michálek (PAGESPEED.ONE)

Martin Michálek, co-founder of PageSpeed.one, shared his perspective in the talk "Myths and Nonsense About Web Speed." In this 20-minute presentation, he took a humorous look at debunking common myths surrounding website speed. He pointed out that interactive metrics are calculated cumulatively and reset on a new page, which can skew results. He also explained that the Lighthouse score has nothing to do with actual site speed, since it's a synthetic measurement of a single page. Martin also noted that WP Rocket can manipulate how the Lighthouse score is calculated. An interesting takeaway was that Android devices are actually slower than iPhones.

With more than twenty years of experience in web technologies and clients like Dr. Max and Footshop, Martin effectively shed light on how important it is to understand the real facts about web performance. His dynamic talk not only debunked misleading assumptions but also laid a solid foundation of knowledge that motivated attendees to optimize their own websites.

What I Learned in
1000+ Heads Start-up

Jakub Miskech (Outreach)

The talk by Jakub Miskech on the partner stage offered valuable insights into optimizing work processes that can significantly streamline workflows. Jakub shared his valuable experience and offered attendees concrete action points they can implement right away:

• Short and effective daily scrums: Holding 15-minute meetings every morning, with someone from the team keeping an eye on the clock to avoid getting bogged down in unnecessary detail.
• Task complexity: The importance of jointly estimating task complexity was highlighted. If a task is worth more than 8 points, it should be broken down into smaller parts, making it easier to manage and understand.
• Defining task goals: A recommendation to clearly define the goal of each task to avoid misunderstandings. A link to Basecamp isn't enough! :-)
• Presentations and feedback: Regular showcases of developers' work, which serve not only as inspiration and a way to build knowledge across the team, but also as soft-skills training and an opportunity to get feedback.
• Retrospectives every two weeks: After every two-week cycle, it's a good idea to run a retrospective summarizing successes, failures, and action points for improvement. This helps foster open communication and team cohesion.
• Introducing no-meeting days: The most effective approach is to have one meeting-free day a week – for the team, that was Wednesday. This lets people focus on important tasks and minimizes distractions.
• Pull requests and their benefits: Investing time in pull requests pays off in the long run through better code quality and less time spent on fixes.
• The importance of testing and feature flags: While writing tests can take more time than implementing the feature itself, it pays off in the long run for ensuring code quality and stability. Using feature flags also makes it easy to roll out new features without risk.

10 Mini Recipes
from the World of CSS

Ondřej Žára (Seznam.cz)

Ondřej Žára, a frontend developer at Seznam, shared 10 interesting CSS properties with us. He showed how to solve problems that used to cause developers headaches, and how modern CSS makes work easier compared to the past. The talk focused on practical examples that demonstrated the benefits of new CSS properties, inspiring developers to use them in their own projects.

Among the properties presented, like has, accent-color, line-clamp a inset, which you might already know from our "Around the Frontend World" articles, the following news items also caught our attention:

• system-color: This is a CSS data type that lets you define, in different parts of a website, colors that the browser uses for other elements. For example, you can tell the browser to use the same color for a border as it uses for link or button colors. This property responds to both light and dark themes.
• transform-independent: A new property that lets you apply individual transforms to elements without having to rewrite the whole thing. For example, if you want to extend transform: translateY(-50%); on hover with scale(-1), you don't need to rewrite the entire transform – you can just use the separate scale: -1;.
• font-variant-numeric: tabular-nums: This definition lets individual digits, for example in a price summary in a cart, line up neatly underneath one another. This way you avoid having to load an extra monospace font that would look different from the rest of the site.

Technical skills open doors,
soft skills keep them open

Marek Velas (EDUpunk)

Marek explained why other people tend to view developers as people lacking soft skills. And why soft skills are also expected of developers, and why it's important to have them. He described the difference between soft skills and hard skills.

Possible approaches for someone without soft skills to get ahead: The basic rule is to speak the language of the given "tribe" – that is, the place you're trying to get into. Like a job interview, for example. Another handy tool for interviews can be the STAR method, where you describe a situation (Situation) – something you had to deal with, for example. Then you state the task (Task) you had to handle, followed by describing the solution (Action). Finally, you highlight the results you achieved (Result). Every HR person will love this :-)

Nowwwinky Special:
What's New in Browsers?

Tomáš Kout (Lentiamo)

Tomáš opened his engaging talk by mentioning the Interop initiative, through which Chrome, Firefox, Safari, and Edge agree on which new features they'll implement in the near future, with each feature able to be in one of three states:

• Limited availability: implemented by only some browsers
• Newly available: implemented by all major browsers
• Widely available: after another 2.5 years of support

These states are defined in Baseline. For a more detailed overview, you can visit Web Platform Status.

An extensive overview followed of the news items that got the most attention over the past year.

New HTML elements and attributes:

• Dialog comes in handy for building modal windows, and you'll appreciate its native overlay and closing via the Escape key, without having to write a ton of JavaScript.
• Popover is great for tooltips.

News in CSS:

• Thanks to Cascade Layers, you can arrange things so the last rule written doesn't necessarily have the highest priority.
• Subgrid is handy for building more complex layouts.
• Container queries give you the freedom to style an element based on the dimensions of its parent element.
• CSS nesting used to be something we only knew from CSS preprocessors – now we can nest selectors natively in CSS.
• The :has  pseudo-class makes it easier to select elements, for example when you need to select an element based on the state of its children.
• Functions for working with colors: color(), color-mix().
• Math functions for enthusiasts who can't write CSS without using trigonometric functions.

Tomáš then wrapped up this valuable talk by saying you don't need to limit yourself to just one new feature – you can combine several of them to create something remarkable.

5 Legal F*ckups
Every Frontend Developer
Should Avoid

Karel Navrátil (Svoboda Koubková advokáti)

The hard-hitting talk by Karel Navrátil flew by, and we were sorry it ended after only 10 minutes, leaving us wanting to learn more about this interesting topic. In the first part, he covered what to watch out for when drafting a contract with a client. Legal documents rely heavily on precise wording, so it's important to pay attention to how the contract defines the supplier's liability limit for damages, what contractual penalties might apply, or whether, in the worst-case scenario, it means full liability for damages.

A quick audience poll confirmed that not every developer checks the license terms when using third-party products. If you're doing web scraping, you shouldn't extract information from sites that explicitly forbid it, for example in their footer. He wrapped up his talk with a mention of the European Accessibility Act.

The European Accessibility Act
Through a Frontend Lens

Radek Pavlíček

One of the main topics at this year's conference was accessibility. It was also the subject of a talk by Radek Pavlíček, who opened by noting that the average website contains more than 50 automatically detectable accessibility errors, and these issues affect as many as 96% of websites. The European Accessibility Act, set to take effect on June 28, 2025, is meant to help tackle this. Even though its exact contours are still hazy and it's not yet clear what penalties might apply, it's definitely a good idea to start preparing for it today.

Web accessibility rests on three pillars – code, design, and content – and it's up to us as developers to build the first pillar, the code, with accessibility in mind right from the start.

In the second part of the talk, Radek covered basic mistakes found on websites, like poor color contrast, missing alt text on images, missing labels on form fields, or empty links and buttons. He then went through the most common mistakes with components. One example he mentioned is autocomplete/typeahead fields, which quite often can't be operated with a keyboard. Or carousels, which can be a real headache for screen reader users – some of them even steal focus on the page, leaving the user lost about where they are on the page. It's important to ask yourself whether you actually need a carousel on the page at all. Another problematic component is the modal window, which is essentially a new layer on the page that should receive focus and should be dismissible by pressing Escape.

In closing, he mentioned that as much as 90% of errors could be caught by the developer themselves simply by going through the whole site using only the keyboard and running into the issues firsthand. If you want to make your life easier, you can definitely use, or get inspiration from, one of the accessible component libraries out there.

Missed a talk?

There were many more talks at the conference, since the program was absolutely packed. But even with our numbers, we couldn't be everywhere. Recordings will be published on the Frontendisti.cz YouTube channel, so if any talk caught your eye, be sure to check it out.

Breakfast with Superkoders

The conference kicked off with breakfast with Superkoders. Early arrivals got to enjoy donuts and fresh fruit. The morning donuts disappeared within twenty minutes, which only underlined the excitement for a day packed with programming talks. Whoever showed up on time not only enjoyed a good breakfast but also grabbed the best seat for the start of the conference.

Animated Transitions
and a Contest

This year too, we took part in the conference as organizers and partners. And once again, there was a conference-wide contest for a night for two at the Anybody experience hotel in BrnoAnybody . The rules were simple: send a photo, write a message, and we'd draw a winner 🤩

The photos submitted for the contest could then be seen on screen during the animated transitions between talk blocks, which we put together using web technologies.

The animations were built with our favorite library, GSAP, which is a joy to work with, and everything went smoothly. The final animation came out to exactly 30 lines of code. You can check out the transitions between talks on this page.

Huge congratulations to our winner, who got lucky and can now look forward to an unforgettable stay in the heart of the Moravian capital. To everyone else who took part in our contest, thank you for joining in and for the great messages!

After a demanding day full of talks, the afterparty followed in the modern space of Apify in the center of Prague. A DJ took care of the music, and networking was happening everywhere between pub quiz rounds, foosball, and PlayStation sessions. There were also snacks, and pizza lovers definitely got their fill 🍕.

Another conference behind us. Long live meetups.
We're looking forward to meeting up again.