Karel Mráz

Web dev, explained visually 🎬
JS · TS · CSS · React
Web dev skills for the AI era 🤖
co-founder Atheros Learning

[Karel Mráz @karel_mraz7]

An overview of CSS gradients.

Follow for more 🔥

#css #webdev #frontend #webdesign #csstips

[Karel Mráz @karel_mraz7]

One HTML attribute picks the keyboard your users get on their phone.

Works in every modern mobile browser. Desktops ignore it, and each phone’s keyboard draws its own version of the layout.

Save 🔖 and follow @karelm_dev for more

#html #webdev #frontend #forms #codingtips

[David Mráz @davidm_ml]

AI coding agents offer incredible performance boost, but there is a big code quality trade off 🧑‍💻 This is the first part of series, where I show common mistakes that AI agents keep making 🤖

[Karel Mráz @karel_mraz7]

All Vercel agent skills with install commands 👉 https://t.co/oYbSwNOX94

[Karel Mráz @karel_mraz7]

5 skills that teach your coding agent the rules you'd otherwise repeat every session.

The link to the full list with install commands is in the comments 👇

Follow for more 🔥

#claudecode #aicoding #react #nextjs #vercel

[Jan Mraz @janm_uiux]

Amazing sites for UX/Ul designers, part 19

[Karel Mráz @karel_mraz7]

Useful HTML tags you might have missed.

Follow for more 🔥

#html #webdev #frontend #codingtips #learntocode

[David Mráz @davidm_ml]

When coding with AI … it is very useful to know exact names of more complex animations 🧑‍💻

[Karel Mráz @karel_mraz7]

Everything you need to read and edit a URL in JavaScript, already built in.

Follow for more 🔥

#javascript #webdevelopment #frontend #webdev #learnjavascript

[David Mráz @davidm_ml]

Our designers shipped 17% more UI fixes a day in the first month. None of them learned to code. And no engineer had to build them.

I’ve always believed AI belongs right next to where the team talks, executing the moment a decision is made and a task approved.

We build AI driven products, and every small change in UI we need to ship means a ticket and engineering work. But engineers should focus on complex challenges, not simple UI fixes.

We tried Claude Code, but it lives outside of the main communication channels, so designers still handed every fix to an engineer.

Viktor closed that gap. He joined our Slack workspace as one of our teammates. A designer describes the change, he opens the PR on GitHub right away, and an engineer reviews and merges.

In the first week I nearly switched him off, but by week 2, our engineers had tens of hours a week back for client work, helping us ship higher quality, faster.

Then the rest of the team moved in. With 3,200+ integrations ... PMs, engineers and designers are now using Viktor to validate ideas on the spot against real analytics as well as delegate tasks to Viktor.

Teams don’t need another AI to switch to. They need one already integrated in their workflow.

Most AI tells you what to do. Viktor does it.

Hire @viktor_com for your team. $100 in credits included, no card. Full link in first comment.

#AIemployee #AIengineering

Paid Partnership

[Karel Mráz @karel_mraz7]

The glass effect is a translucent background plus backdrop-filter, which blurs everything behind the card.

Follow for more 🚀

#css #csstips #webdesign #frontend #learntocode

[Karel Mráz @karel_mraz7]

Semantic HTML tags tell the browser, screen readers and search engines what each part of your page actually is.

Follow for more🔥

#html #webdevelopment #frontend #webdev #accessibility

[Karel Mráz @karel_mraz7]

@davidm_ml awesome🚀

[David Mráz @davidm_ml]

Subquadratic just launched SubQ Snap, a decision model with 384K multimodal context. That's 12x Jev's context, and it beats Jev on the Decision Index too.

Decision model as a judge is one of the best use cases I see for us. Until now, Jev's 32K text-only context could be limiting for long or multimodal inputs. Super excited about SubQ Snap 🚀

[Karel Mráz @karel_mraz7]

Easing functions decide where an animation is at each moment: the start, the end and the duration stay the same, only the path in between changes.

Follow for more🔥

#cssanimation #css #animation #frontend #uidesign

[Jan Mraz @janm_uiux]

Turning a link into a full video with avatars and motion graphics is a big jump from the script-to-slides tools I usually cover. I want to see what it does with a plain product page.

[Karel Mráz @karel_mraz7]

Creating arrays in JavaScript: the shortcuts worth knowing.

Follow for more 🔥

#javascript #webdevelopment #frontend #webdev #learnjavascript

[Karel Mráz @karel_mraz7]

CSS filter applies photo effects to any element with CSS, no editing software needed.

Follow for more 🚀

#css #webdev #imageeffects #webdesign #learncss

[Karel Mráz @karel_mraz7]

flex-direction picks the direction items flow in, and flex-wrap lets them break onto new lines instead of shrinking.

Follow for more 🚀

#css #flexbox #webdev #frontend #webdevelopment

[Karel Mráz @karel_mraz7]

Container queries let a component change its layout based on the space it gets, not the size of the screen.

Follow for more 🔥

#css #webdesign #frontend #webdev #responsivedesign