<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Frontend Archives - ShiftMag</title>
	<atom:link href="https://shiftmag.dev/category/frontend/feed/" rel="self" type="application/rss+xml" />
	<link>https://shiftmag.dev/category/frontend/</link>
	<description>Insightful engineering content &#38; community</description>
	<lastBuildDate>Thu, 19 Mar 2026 15:07:16 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://shiftmag.dev/wp-content/uploads/2024/08/cropped-ShiftMag-favicon-32x32.png</url>
	<title>Frontend Archives - ShiftMag</title>
	<link>https://shiftmag.dev/category/frontend/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>You don’t need to care, just make your products accessible</title>
		<link>https://shiftmag.dev/you-dont-need-to-care-just-make-your-products-accessible-8752/</link>
		
		<dc:creator><![CDATA[Andrea Mihaljevic]]></dc:creator>
		<pubDate>Thu, 19 Mar 2026 15:07:16 +0000</pubDate>
				<category><![CDATA[Frontend]]></category>
		<category><![CDATA[Web Accessibility]]></category>
		<guid isPermaLink="false">https://shiftmag.dev/?p=8752</guid>

					<description><![CDATA[<p>For eight years, I was the only one excited to talk about accessibility - until it became law last year, everyone joined in, and I felt... hollow.</p>
<p>The post <a href="https://shiftmag.dev/you-dont-need-to-care-just-make-your-products-accessible-8752/">You don’t need to care, just make your products accessible</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-post-featured-image"><img fetchpriority="high" decoding="async" width="1200" height="630" src="https://shiftmag.dev/wp-content/uploads/2026/03/accessibility-blog.png?x73249" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" style="object-fit:cover;" srcset="https://shiftmag.dev/wp-content/uploads/2026/03/accessibility-blog.png 1200w, https://shiftmag.dev/wp-content/uploads/2026/03/accessibility-blog-300x158.png 300w, https://shiftmag.dev/wp-content/uploads/2026/03/accessibility-blog-1024x538.png 1024w, https://shiftmag.dev/wp-content/uploads/2026/03/accessibility-blog-768x403.png 768w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure>


<p>I found out about accessibility in college, eight or nine years ago, and loved it so much it became my thesis. From then on, <strong>I was often the only person in the room excited enough to talk about it</strong> &#8211; I persisted, advocated, learned more, and fought to raise awareness.</p>



<p>Rarely did anyone listen, it wasn’t important. Until last year.</p>



<p>When the <a href="https://commission.europa.eu/strategy-and-policy/policies/justice-and-fundamental-rights/disability/european-accessibility-act-eaa_en" target="_blank" rel="noreferrer noopener">European Accessibility Act</a> became law, suddenly everyone wanted to talk about accessibility. I was in meetings, resources were finally allocated, and the thing I’d been shouting about for nearly a decade was at last… important.</p>



<p>I should have been thrilled. Instead, I felt nothing.</p>



<h2 class="wp-block-heading" id="Theinvisiblesafetynet(andwhyyoushouldseeitanyway)-TheEightYearsintheWilderness"><span id="anyone-anywhere-should-be-able-to-use-the-web">Anyone, anywhere, should be able to use the web</span></h2>



<p>Tim Berners-Lee said: </p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>The power of the Web is in its universality.</p>
</blockquote>



<p>I believed it in college, and I still believe it today: the web should be accessible to everyone. That’s the foundational principle behind the platform we build every day.</p>



<p>But for most of my career, that principle wasn’t even on the radar. I watched us build walls in a medium meant to have none and I<strong> kept speaking up anyway, because someone had to</strong>.</p>



<h2 class="wp-block-heading" id="Theinvisiblesafetynet(andwhyyoushouldseeitanyway)-TheVictoryThatWasn't"><strong>I</strong>&#8216;d won the battle and lost the war</h2>



<p>Then 2025 arrived &#8211; the European Accessibility Act. Accessibility wasn’t optional anymore, <strong>it was a legal requirement</strong>. And suddenly, people listened.</p>



<p>Finally, I was having real conversations about accessibility &#8211; the thing I’d wanted for eight years. But it wasn’t because most people truly cared, they were asking only because they had to.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>For the most part, few conversations focused on the 15% of users who experience the web differently. Most discussions were about checkboxes, compliance audits, and legal exposure, rather than creating experiences that work for everyone.</p>
</blockquote>



<p>I&#8217;d won the battle and lost the war: <strong>accessibility was happening, but the why</strong> (the empathy, the principle, the universality of the web) <strong>was missing</strong>.</p>



<h2 class="wp-block-heading" id="Theinvisiblesafetynet(andwhyyoushouldseeitanyway)-HowWeGotHere">Let&#8217;s fix something that isn&#8217;t broken</h2>



<p>You know what&#8217;s funny? Everything was fine for a while.</p>



<p><strong>Native HTML elements come with accessibility built in</strong>. A <code>&lt;select></code> is usable by default, and a <code>&lt;button></code> handles keyboard interaction automatically &#8211; HTML was designed with accessibility in mind. The challenge comes when we want to style them: for example, dropdowns are notoriously hard to customize, so they often end up looking like the browser’s default, which can feel &#8220;ugly&#8221; compared to the rest of our design.</p>



<p>So <strong>we built custom ones and this where we start to lose accessibility</strong>. We didn’t mean to, we just wanted things to look better. But in chasing the shiny new, we broke what worked.</p>



<p>I guess it got to the point where enough people with disabilities were heard, and finally someone started to care. And now here we are, trying to fix what we broke with our shiny new toys. I’m glad we’re here. If we can, we should take everyone into consideration. It’s also good for business or something—I don’t know, I’m just a developer <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f605.png" alt="😅" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>



<p>But here’s what I do know: <strong>ship fast, yes, but don’t skimp on quality</strong>. Every commit carries your name, and that matters.</p>



<h2 class="wp-block-heading" id="Theinvisiblesafetynet(andwhyyoushouldseeitanyway)-BuildingtheAutomation">Accessibility automated &#8211; no brain cells required</h2>



<p>So here I am: building accessible components, creating tools to automate accessibility, and teaching AI to check WCAG compliance. The idea: <strong>make accessibility so easy developers don’t have to think about it</strong>. Use our Bepo components &#8211; get compliance for free, ship accessible products, no explanations required.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>After eight years of trying to get people to care, I’m now building systems so they don’t have to. The irony isn’t lost on me.</p>
</blockquote>



<p>We&#8217;ve built Navigation with a ton of keyboard interactions developers never had to write. Broadcast with ARIA patterns they never had to learn. Color contrast decisions made at the token level. Focus management handled automatically. Claude Code plugin that catches accessibility issues in code review.</p>



<p>It works. Users benefit. Rarely anyone understands why. And that haunted me.</p>



<h2 class="wp-block-heading" id="Theinvisiblesafetynet(andwhyyoushouldseeitanyway)-TheQuestionThatKeptMeUp"><span id="and-still-i-couldn%e2%80%99t-sleep-at-night">And still, I couldn’t sleep at night</span></h2>



<p>I wrestled with it for months. Had I traded education for efficiency? Made accessibility just a checklist, a tool, not a principle? Where was the empathy in automation?</p>



<p>We’re not just building components, <strong>we’re building experiences</strong>. Real experiences for real people: those who navigate with keyboards, rely on screen readers, need high contrast, struggle with complex interactions, or depend on assistive technologies.</p>



<p>How do you automate caring about those people?</p>



<h2 class="wp-block-heading" id="Theinvisiblesafetynet(andwhyyoushouldseeitanyway)-TheCraftofUnderstanding"><span id="i-thought-i-understood-select%e2%80%a6-until-i-actually-built-one">I thought I understood select… until I actually built one</span></h2>



<p>Until recently, <strong>I didn’t really understand the difference between Select and Combobox</strong>. I thought I did, I could cite the ARIA spec, but I didn’t. I’d accepted what authorities said without questioning it. In our design system, they were just one Select component… like in many UI libraries. So I never questioned it.</p>



<p>There’s really no difference in what a screen reader announces &#8211; Select and Combobox have the same role. I guess Select came first and ARIA later, so the role applies to both. So having just one component… almost the same, right?</p>



<p>Except if you care about the structure of these elements, what it means, and why you can’t fully follow the pattern with just one component. That’s the tricky part <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f605.png" alt="😅" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>



<p><strong>I didn’t really know about the Combobox, until frustration made me curious</strong>.</p>



<p>I dove into building a &#8220;vanilla&#8221; Select from scratch &#8211; ARIA patterns, screen reader testing, understanding user expectations, the whole thing. And I realized: modern components don’t really follow patterns. Some tools are technically correct, but they feel… wrong. Clunky. Not what users expect.</p>



<h2 class="wp-block-heading"><span id="bridging-ux-gaps-is-about-making-interfaces-seamless-accessible-and-human-first">Bridging UX gaps is about making interfaces seamless, accessible, and human-first</span></h2>



<p>This is the UX gap. We want custom, modern, polished, and accessible but <strong>there’s a bridge missing between the spec and good UX</strong>.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>I realized: we can have almost all of it if we build with the experience in mind. Combine patterns. Use micro knowledge (like tabbing to inputs or arrowing through options) to make the Select feel as clear as native. Screen reader and keyboard should just make sense.</p>
</blockquote>



<p>Average users don’t know about triggers. They just want to open the Select and pick an option. Keep it simple.</p>



<p>As a frontend developer, <strong>I see myself as a bridge between users and what I build</strong>. It’s my responsibility to make interfaces the best they can be, and to care about them.</p>



<p>You know what I had the most fun with while building my Select? Focus and keyboard interactions. It’s seamless, it works beautifully, exactly as I expect.</p>



<p>I see it in chunks: arrows navigate options, tab moves to buttons, links, inputs. But here’s the twist: if a Select has a custom footer with action buttons, arrows should <em>still</em> navigate options. The footer isn’t part of the pattern; it’s our addition. That’s where we bridge the gap. Or, as the Brits say: mind the gap.</p>



<p><strong>This is the space for custom solutions</strong>, where language standards and patterns meet usability, inclusivity, and the full interaction experience. </p>



<p>Building that Select taught me the difference between patterns, user expectations, and implementation flexibility. It was so much fun.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>I’ve always loved HTML and CSS &#8211; the right semantic element, the right ARIA role, perfect keyboard navigation. It’s craftsmanship. Most users won’t notice, they’ll just use the Select. That’s the point: good infrastructure and accessibility are invisible. You only notice when it’s missing.</p>
</blockquote>



<p>We need the knowledge, the understanding, the empathy. UX gaps can’t be automated. Someone has to know what they’re building and who they’re building it for. That’s deep work. And it matters.</p>



<h2 class="wp-block-heading" id="Theinvisiblesafetynet(andwhyyoushouldseeitanyway)-TheReconciliation"><span id="the-accessibility-reconciliation-that-gave-me-peace">The accessibility reconciliation that gave me peace</span></h2>



<p>Then I realized something: </p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>I don&#8217;t need everyone to care the way I care, I need everyone to build accessible products. Those aren&#8217;t the same thing. And pretending they are was making me miserable.</p>
</blockquote>



<p>Here&#8217;s the mental model that gave me peace:</p>



<h3 class="wp-block-heading" id="Theinvisiblesafetynet(andwhyyoushouldseeitanyway)-Tier1:TheFoundation"><span id="tier-1-the-foundation">Tier 1: The Foundation</span></h3>



<ul class="wp-block-list">
<li>Use accessible components correctly</li>



<li>Trust the automation</li>



<li>Get accessibility &#8220;for free&#8221;</li>



<li>Ship accessible products without deep expertise</li>
</ul>



<p>This is how we scale accessibility: give people the right tools and let them use them.</p>



<h3 class="wp-block-heading" id="Theinvisiblesafetynet(andwhyyoushouldseeitanyway)-Tier2:TheCurious"><span id="tier-2-the-curious">Tier 2: The Curious</span></h3>



<ul class="wp-block-list">
<li>Understand the patterns and why they work </li>



<li>Can compose components accessibly</li>



<li>Catch edge cases automation misses</li>



<li>Teach others</li>
</ul>



<p>This is where cultural change happens: people see when automation isn’t enough, ask <em>why</em>, learn deeper patterns, and build better products for their users.</p>



<h3 class="wp-block-heading" id="Theinvisiblesafetynet(andwhyyoushouldseeitanyway)-Tier3:TheChampions"><span id="tier-3-the-champions">Tier 3: The Champions</span></h3>



<ul class="wp-block-list">
<li>Deep expertise</li>



<li>Build the infrastructure</li>



<li>Advance the field</li>



<li>Fight the eight-year battles</li>
</ul>



<p>This is where I live, building the tools that make Tier 1 possible.</p>



<p>For eight years, <strong>I tried to push everyone to Tier 3</strong>, make everyone care as much as I did. I failed. I was exhausted. And I’ve realized I can’t make everyone care, but I can build the infrastructure, play the long game, and ship accessible products anyway. Maybe some will get curious, maybe they won’t, but by making accessibility the default, we create space for learning and a future where it’s just how things work.</p>



<p><strong>Automation doesn’t give up; it accepts that people engage differently</strong>.</p>



<p>The door is always open: use components (Tier 1), get curious (Tier 2), contribute patterns (Tier 3). Or stay at Tier 1. That’s fine. That’s success. That’s an accessible product shipped.</p>



<h2 class="wp-block-heading" id="Theinvisiblesafetynet(andwhyyoushouldseeitanyway)-TheInvitation"><span id="you-don%e2%80%99t-need-everyone-to-care-but-everyone-can-benefit-from-what-you-build">You don’t need everyone to care, but everyone can benefit from what you build</span></h2>



<p>If you build accessibility infrastructure, <strong>your work matters, even when it’s invisible</strong>. Build the safety net, automate what you can, and leave the door open for those who want to see how it works.</p>



<p>If you’re a developer: <strong>Tier 1 is enough</strong>: use the accessible components, trust the tooling, ship accessible products. <strong>Tier 2 is there if you’re curious</strong>: learn the patterns, understand your users, make better products. <strong>Tier 3 is there if you’re passionate</strong>: join us. We’ve been out here a while; it’s lonely sometimes, and we’d love the company.</p>



<p>After eight years in the wilderness, I’m finally building the tools &#8211; tools that make accessibility easy, scale empathy, and create experiences for everyone. That’s the infrastructure that matters. And that’s enough.<a href="https://confluence.infobip.com/spaces/~amihaljevic/pages/827132108/The+invisible+safety+net+and+why+you+should+see+it+anyway"></a></p>
<p>The post <a href="https://shiftmag.dev/you-dont-need-to-care-just-make-your-products-accessible-8752/">You don’t need to care, just make your products accessible</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Figma&#8217;s CTO: Design means nothing if you don&#8217;t ship it</title>
		<link>https://shiftmag.dev/figma-kris-rasmussen-developers-3826/</link>
		
		<dc:creator><![CDATA[Marko Crnjanski]]></dc:creator>
		<pubDate>Tue, 20 Aug 2024 10:26:17 +0000</pubDate>
				<category><![CDATA[Frontend]]></category>
		<category><![CDATA[Productivity]]></category>
		<category><![CDATA[AI]]></category>
		<category><![CDATA[designers]]></category>
		<category><![CDATA[developers]]></category>
		<category><![CDATA[Figma]]></category>
		<category><![CDATA[Kris Rasmussen]]></category>
		<category><![CDATA[We Are Developers]]></category>
		<guid isPermaLink="false">https://shiftmag.dev/?p=3826</guid>

					<description><![CDATA[<p>Figma's AI strategy is to expedite the roadblocks designers and developers face every single day.</p>
<p>The post <a href="https://shiftmag.dev/figma-kris-rasmussen-developers-3826/">Figma&#8217;s CTO: Design means nothing if you don&#8217;t ship it</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p><strong>Developers have always been a significant user base for Figma, </strong>the collaborative interface design tool, and recent efforts have been focused on<strong> improving the developer experience within the tool,<br>Figma&#8217;s CTO Kris Rasmussen </strong>shared recently when speaking at the <strong>WeAreDevelopers World Congress </strong>in Berlin.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><em>Our tool addresses the gap between design and development by creating tools that cater to both, ensuring&nbsp;</em><strong><em>a smoother transition from design to production</em></strong><em>.</em></p>
</blockquote>



<p>After spending the previous years of his career working for Aptana, RivalSoft Inc., and Asana, Rasmussen got the position of<strong>&nbsp;VP of Engineering at Figma</strong>, and five years later, he became the CTO. He started working with Figma in 2016, a month before its public launch. He was intrigued by its unique approach, combining graphics, real-time systems, and reactive programming.&nbsp;</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><em>Although it wasn’t initially committed to being entirely web-based, it chose to because of its potential for performance and consistency.&nbsp;</em></p>
</blockquote>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="538" src="https://shiftmag.dev/wp-content/uploads/2024/07/wad_1_-1024x538.png?x73249" alt="" class="wp-image-3831" srcset="https://shiftmag.dev/wp-content/uploads/2024/07/wad_1_-1024x538.png 1024w, https://shiftmag.dev/wp-content/uploads/2024/07/wad_1_-300x158.png 300w, https://shiftmag.dev/wp-content/uploads/2024/07/wad_1_-768x403.png 768w, https://shiftmag.dev/wp-content/uploads/2024/07/wad_1_.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">Design means nothing if you don&#8217;t ship it</h2>



<p>Kris acknowledged <a href="https://shiftmag.dev/collaborative-apps-1224/"><strong>the challenges of real-time collaboration</strong></a> and feedback, emphasizing the importance of balancing exploration with execution. Internally, Figma uses milestones and designated responsible individuals (DRI-s) to manage projects and ensure progress.&nbsp;</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Product design doesn’t mean anything if you don’t actually ship the things you design, and you really need to build a new product design tool for a new type of product team. </p>
</blockquote>



<p><br>He added that developers <strong>didn’t always want to navigate this big and messy TV canvas</strong> that a designer might brainstorm to find the specific version of the design that the designer wants or one of them to look at.</p>



<h2 class="wp-block-heading"><span id="ai-removing-roadblocks">AI removing roadblocks</span></h2>



<p>Rasmussen mentioned Figma’s AI efforts to automate tedious tasks, expediting designers’ and developers’ work.&nbsp;<strong>Popular features include automating mock-to-prototype transitions and renaming layers for better code structure</strong>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><em>We’ve been working on our AI release over the last year and just want to configure user confidence. Our focus for this initial release and our strategy on AI generally is to&nbsp;</em><strong><em>expedite many of the roadblocks designers and developers face every single day</em></strong><em>.</em></p>
</blockquote>



<p>He said that instead of being focused on really dramatic ways AI will change the world, we should not underestimate the fact that AI is making many previously tedious and slow things much faster and more possible.</p>


<figure class="wp-block-post-featured-image"><img decoding="async" width="1200" height="630" src="https://shiftmag.dev/wp-content/uploads/2024/07/shift_new_.png?x73249" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" style="object-fit:cover;" srcset="https://shiftmag.dev/wp-content/uploads/2024/07/shift_new_.png 1200w, https://shiftmag.dev/wp-content/uploads/2024/07/shift_new_-300x158.png 300w, https://shiftmag.dev/wp-content/uploads/2024/07/shift_new_-1024x538.png 1024w, https://shiftmag.dev/wp-content/uploads/2024/07/shift_new_-768x403.png 768w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure><p>The post <a href="https://shiftmag.dev/figma-kris-rasmussen-developers-3826/">Figma&#8217;s CTO: Design means nothing if you don&#8217;t ship it</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Engineer Explains: What is JAMstack? Matt Biilmann breaks it down for us</title>
		<link>https://shiftmag.dev/engineer-explains-what-is-jamstack-by-its-creator-matt-biilman-3912/</link>
		
		<dc:creator><![CDATA[Antonija Bilic Arar]]></dc:creator>
		<pubDate>Thu, 15 Aug 2024 10:30:15 +0000</pubDate>
				<category><![CDATA[Frontend]]></category>
		<category><![CDATA[Video]]></category>
		<category><![CDATA[Engineer Explains]]></category>
		<category><![CDATA[Jamstack]]></category>
		<category><![CDATA[Matt Biilman]]></category>
		<category><![CDATA[web development]]></category>
		<guid isPermaLink="false">https://shiftmag.dev/?p=3912</guid>

					<description><![CDATA[<p>We've asked experienced engineers to share how they would explain some tech terminology at three levels of experience - from junior developer to CTO.</p>
<p>The post <a href="https://shiftmag.dev/engineer-explains-what-is-jamstack-by-its-creator-matt-biilman-3912/">Engineer Explains: What is JAMstack? Matt Biilmann breaks it down for us</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-post-featured-image"><img loading="lazy" decoding="async" width="1280" height="720" src="https://shiftmag.dev/wp-content/uploads/2024/07/matt.jpg?x73249" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" style="object-fit:cover;" srcset="https://shiftmag.dev/wp-content/uploads/2024/07/matt.jpg 1280w, https://shiftmag.dev/wp-content/uploads/2024/07/matt-300x169.jpg 300w, https://shiftmag.dev/wp-content/uploads/2024/07/matt-1024x576.jpg 1024w, https://shiftmag.dev/wp-content/uploads/2024/07/matt-768x432.jpg 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>


<p>JAMstack is almost 10 years old. For developers today, it&#8217;s just a <strong>natural way they&#8217;ve learned to build websites</strong>. <br><br>But it wasn&#8217;t always like that. Biilman coined the term in 2015. to be able to easily refer to the architectural approach of decoupling the app logic from the backend and infrastructure. <br><br>&#8220;JAMstack allowed new developers to <strong>learn web technology and build websites really quickly</strong> without having to dive into a lot of backend and infrastructure code,&#8221; says Matt.<br></p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="How To Build Faster Apps?" width="500" height="281" src="https://www.youtube.com/embed/2btVnTODTSM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p>This video is a part of ShiftMag’s&nbsp;<strong>video series,&nbsp;<a href="https://www.youtube.com/@ShiftMag/videos" target="_blank" rel="noreferrer noopener">Engineer Explains</a>.</strong></p>



<p>We’ve asked experienced engineers to share how they would explain some basic and some less basic tech terminology to different tech job titles or at three levels of experience —&nbsp;<strong>from junior developer to CTO.</strong><br><br><strong>More:</strong><br>How would you explain&nbsp;<a href="https://www.youtube.com/watch?v=qtxHm09FH_M" target="_blank" rel="noreferrer noopener">APIs</a>,&nbsp;<a href="https://www.youtube.com/watch?v=Rxi3fHEY48c" target="_blank" rel="noreferrer noopener">internal developer platforms</a>,&nbsp;<a href="https://www.youtube.com/watch?v=BqsTQWhyngg&amp;t=9s" target="_blank" rel="noreferrer noopener">software architecture</a>,&nbsp;<a href="https://www.youtube.com/watch?v=5aRuyTIoMys">software testing</a>,&nbsp;<a href="https://www.youtube.com/watch?v=s_Igmd5GpDg&amp;t=5s">scaling infrastructure&nbsp;</a>without breaking the bank, &nbsp;<a href="https://www.youtube.com/watch?v=VhhkK0zCY7I&amp;t=42s">low-code as a dev tool</a>,&nbsp;<a href="https://www.youtube.com/watch?v=WgysaqzYMU0&amp;t=21s">what is a database</a>, <a href="https://www.youtube.com/watch?v=v2-wsawNurI" target="_blank" rel="noreferrer noopener">Network APIs</a>&nbsp;or <a href="https://www.youtube.com/watch?v=1tqWJwZQnkM">Developer Relations</a> at three levels of experience?</p>
<p>The post <a href="https://shiftmag.dev/engineer-explains-what-is-jamstack-by-its-creator-matt-biilman-3912/">Engineer Explains: What is JAMstack? Matt Biilmann breaks it down for us</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>New frontend framework, again?!</title>
		<link>https://shiftmag.dev/new-frontend-framework-again-1877/</link>
		
		<dc:creator><![CDATA[Sven Suk]]></dc:creator>
		<pubDate>Wed, 25 Oct 2023 11:18:42 +0000</pubDate>
				<category><![CDATA[Frontend]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[frontend development]]></category>
		<category><![CDATA[frontend framework]]></category>
		<category><![CDATA[web development]]></category>
		<guid isPermaLink="false">https://shiftmag.dev/?p=1877</guid>

					<description><![CDATA[<p>In the world of web development, one thing is almost certain: you will never run out of front-end frameworks.  </p>
<p>The post <a href="https://shiftmag.dev/new-frontend-framework-again-1877/">New frontend framework, again?!</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-post-featured-image"><img loading="lazy" decoding="async" width="1200" height="630" src="https://shiftmag.dev/wp-content/uploads/2023/10/Frontend-framework.png?x73249" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" style="object-fit:cover;" srcset="https://shiftmag.dev/wp-content/uploads/2023/10/Frontend-framework.png 1200w, https://shiftmag.dev/wp-content/uploads/2023/10/Frontend-framework-300x158.png 300w, https://shiftmag.dev/wp-content/uploads/2023/10/Frontend-framework-1024x538.png 1024w, https://shiftmag.dev/wp-content/uploads/2023/10/Frontend-framework-768x403.png 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></figure>


<p>They come and go, change faster than you can imagine, and each new release promises <strong>a revolution in how we create layout</strong>. If you are starting with web development, this can be overwhelming and off-putting, also it can lead you in the wrong direction.&nbsp; </p>



<p>Let’s uncover <strong>the pros and cons of front-end frameworks dynamism</strong>, highlight the potential pitfalls of blindly following the latest trends without a solid foundation, and provide guidance on mastering any front-end framework.&nbsp;</p>



<h2 class="wp-block-heading"><span id="the-pros-and-cons-of-a-variety-of-choices">The Pros and Cons of a variety of choices</span></h2>



<p>One of the <strong>biggest drawbacks, and at the same time the advantage, is an overwhelming variety of choices</strong>. In the ocean of front-end frameworks, it is challenging to make the correct selection, and a wrong choice can potentially delay project progress. Moreover, <strong>the variety of choices can overwhelm you </strong>with a constant need to learn new frameworks, potentially leading to burnout as you strive to keep up. &nbsp;</p>



<p>However, this vast array of choices &nbsp;allows developers to select a framework that aligns with their project specifications, potentially <strong>leading to improved performance, scalability</strong>, and more. &nbsp;</p>



<p>Another positive aspect that emerges from dynamic development is <strong>innovation and evolution</strong>. &nbsp;</p>



<p>New versions and updates often bring <strong>innovative features and improvements in performance</strong>, security, and user experience. Also, innovation often produces <strong>productivity boost</strong>. It brings features like hot reloading, component-based architecture, and more. &nbsp;</p>



<p>That can also have a downside in some cases, such as <strong>deprecation of older features or APIs</strong>, which require developers to adapt and update their codebase to stay compatible with the latest advancements. &nbsp;</p>



<h2 class="wp-block-heading"><span id="how-i-prioritized-frameworks-over-fundamentals">How I prioritized frameworks over fundamentals</span></h2>



<p>When I first ventured into frontend development four and a half years ago, my knowledge of HTML, CSS, and JavaScript was quite limited. Like many beginners, I was <strong>eager to jump into building impressive applications</strong>. So, as you might have guessed, I went on YouTube and found some videos that show how impressive frameworks are. That is the moment when a crucial mistake was made, I <strong>prioritized framework over fundamentals</strong>, but I did not realize it at the time.&nbsp;</p>



<p>In the beginning, the development was quite rapid, even though I had no idea what exactly was happening and how the web or that framework functioned. A few months later, I began researching other frameworks because I was influenced by fellow frontend developers who consistently endorsed them. At that time, I was a <strong>self-taught developer with no working experience</strong>, and I found myself caught in the <strong>never-ending carousel of front-end frameworks</strong>. &nbsp;</p>



<p>I was becoming a jack of all trades but master of none. After a few months, I came to the realization that I <strong>did not even grasp the fundamental aspects of web development</strong> <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f600.png" alt="😀" class="wp-smiley" style="height: 1em; max-height: 1em;" />. I secretly knew it all along but did not want to admit it to myself. After acknowledging this, I went back to learning the basic concepts, and shortly thereafter, I landed my first internship. &nbsp;</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="538" src="https://shiftmag.dev/wp-content/uploads/2023/10/Frontend-1-1024x538.png?x73249" alt="" class="wp-image-1886" srcset="https://shiftmag.dev/wp-content/uploads/2023/10/Frontend-1-1024x538.png 1024w, https://shiftmag.dev/wp-content/uploads/2023/10/Frontend-1-300x158.png 300w, https://shiftmag.dev/wp-content/uploads/2023/10/Frontend-1-768x403.png 768w, https://shiftmag.dev/wp-content/uploads/2023/10/Frontend-1.png 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">If you understand one framework&#8230;</h2>



<p>The most significant realization came after two years when a situation at work required me to learn a new framework again, but the learning process was quite straightforward. It was clear that I had gained more experience, but it was not just that. I realized that a deep understanding of JavaScript, HTML, CSS, and browser superpowers was crucial. <strong>Experience certainly contributes to even faster learning</strong> because you can connect more things. Also, if you understand one framework on top of the mentioned skills, drawing parallels and achieving outstanding results in learning another becomes easy. &nbsp;</p>



<h2 class="wp-block-heading"><span id="a-blessing-and-a-curse">A blessing and a curse</span></h2>



<p>The ever-evolving world of front-end frameworks can be both a blessing and a curse. While they offer exciting innovations and productivity boosts, diving into them without a solid understanding of frontend fundamentals can lead to shallow knowledge. So, before you rush into the latest frontend trend, take the time to build a solid foundation it will pay off in the long run <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f609.png" alt="😉" class="wp-smiley" style="height: 1em; max-height: 1em;" /> .&nbsp;</p>
<p>The post <a href="https://shiftmag.dev/new-frontend-framework-again-1877/">New frontend framework, again?!</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Josefine Schaefer: Accessibility improves UX, performance, code readability, and maintenance</title>
		<link>https://shiftmag.dev/web-accessibility-josefine-schaefer-1476/</link>
		
		<dc:creator><![CDATA[Milena Radivojević]]></dc:creator>
		<pubDate>Thu, 28 Sep 2023 20:51:07 +0000</pubDate>
				<category><![CDATA[Frontend]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Josefine Schaefer]]></category>
		<category><![CDATA[Web Accessibility]]></category>
		<category><![CDATA[web development]]></category>
		<guid isPermaLink="false">https://shiftmag.dev/?p=1476</guid>

					<description><![CDATA[<p>Frontend engineer with a passion for JavaScript, community building, and web accessibility explains how investing in accessibility benefits all of us.</p>
<p>The post <a href="https://shiftmag.dev/web-accessibility-josefine-schaefer-1476/">Josefine Schaefer: Accessibility improves UX, performance, code readability, and maintenance</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-post-featured-image"><img loading="lazy" decoding="async" width="1200" height="630" src="https://shiftmag.dev/wp-content/uploads/2023/09/josephine_new.jpg?x73249" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" style="object-fit:cover;" srcset="https://shiftmag.dev/wp-content/uploads/2023/09/josephine_new.jpg 1200w, https://shiftmag.dev/wp-content/uploads/2023/09/josephine_new-300x158.jpg 300w, https://shiftmag.dev/wp-content/uploads/2023/09/josephine_new-1024x538.jpg 1024w, https://shiftmag.dev/wp-content/uploads/2023/09/josephine_new-768x403.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></figure>


<p>Web Accessibility basically means that the tools, technology, websites, and software are designed and implemented in a way that people with disabilities can use them and participate equally on the web. </p>



<p>As <a href="https://www.linkedin.com/in/j-schaefer/?originalSubdomain=de" target="_blank" rel="noreferrer noopener">Josefine Schaefer</a>, Developer Relations Engineer at Storyblok says, <strong>access to information is a basic human right</strong> and developers should do everything in their power to not create additional hurdles. </p>



<p>&#8220;It’s super important, especially for folks with disabilities, but it actually benefits all of us: whether you are <strong>looking at your phone in the sunlight and need higher color contrast</strong> or are using captions on a video in an environment where you can’t turn up the volume. All of these are accessibility features we all massively benefit from&#8221;</p>



<h2 class="wp-block-heading"><span id="what-should-developers-pay-attention-to">What should developers pay attention to?</span></h2>



<p><strong>What are some common challenges faced by users with disabilities when accessing websites? </strong></p>



<p><strong>Josefine</strong>: If you are interested in numbers, there is a great report by WebAim, it’s called <a href="https://webaim.org/projects/million/" target="_blank" rel="noreferrer noopener">WebAim one Million</a>. They basically ran automated tests on one million websites to see what the most common accessibility issues are. </p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>By far most common is low contrast text, missing alternative text and empty links or form labels. </p>
</blockquote>



<p><strong>Another big issue is keyboard accessibility</strong>: you want to make sure people can navigate your website with out a mouse, e.g. when they are using the keyboard or assistive technology.</p>



<p><strong>What legal requirements or standards related to web accessibility are there? </strong></p>



<p><strong>Josefine</strong>: In the EU, there is a Web Accessibility Directive, which requires public sector organizations to have fully compliant websites since 2020, and accessible mobile apps since 2021. There is also the European Accessibility Act (Directive 2019/882), which is a landmark EU law that requires some everyday products and services to be accessible for persons with disabilities. </p>



<p>It follows a commitment to accessibility made by the EU and all member states upon ratifying the <a href="https://ec.europa.eu/social/main.jsp?catId=1138&amp;langId=en" target="_blank" rel="noreferrer noopener">United Nations Convention</a> on the Rights of Persons with Disabilities. It covers certain products and services, which from June 28th 2025 onward need to be compliant with Web Accessibility. </p>



<h2 class="wp-block-heading"><span id="how-to-test-for-web-accessibility">How to test for web accessibility</span></h2>



<p><strong>What are some methods or tools that developers can use to test the accessibility of a website?</strong></p>



<p><strong>Josefine</strong>: There are <strong>many different ways to test for web accessibility</strong>. A good place to start is usually a general, automated audit, like with the Lighthouse report where you can explicitly check for accessibility, or with the Axe Dev Tools. This kind of automated report will guide you through issues and provide explanations of what could be improved. This can then also be a starting point for further investigation. It will bring insights about color contrast issues, missing alternative text or empty links. </p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>But regardless of how well it works, it’s important to double-check manually, test the keyboard functionality and if possible, <strong>have testers with disabilities</strong> who use screen readers and assistive tech natively.</p>
</blockquote>



<h2 class="wp-block-heading"><span id="the-importance-of-semantic-html">The importance of semantic HTML</span></h2>



<p><strong>How can you ensure that images on a website are accessible to users with visual impairments?</strong></p>



<p><strong>Josefine</strong>: Always make sure that you<strong> include alternative text for images</strong> unless the images are purely decorative. The alternative text should describe in brief words what you are trying to bring across with the image. You don’t have to say &#8220;image of…&#8221; or &#8220;photo of…&#8221; as the screen reader will announce an image, anyway.</p>



<p><strong>What is the role of semantic HTML in creating an accessible website?</strong></p>



<p><strong>Josefine</strong>: It’s super important to use semantic HTML to bring across structure and meaning, rather than just styling elements like spans or divs to look like, for example, a headline or a link. This way, <strong>you are conveying meaning to screen readers and assistive tech</strong>: by using landmarks for example, like a nav element, users can directly jump there and know what to expect. It helps screen readers announce content in a more structured way (e.g. in a list, it will tell the user how many elements and which elements it is currently on…).</p>



<p>Also, HTML elements come with some basic default styles and inherent functionality. Think of the element, for example, you can inherently click it, it has a hover style and a characteristic look. All of this, you would have to build in manually if you didn’t use the element &#8211; lots of time and energy saved! </p>



<p><strong>Please describe the importance of proper heading structure in web content and how it contributes to accessibility. </strong></p>



<p><strong>Josefine</strong>: Part of semantic HTML is also the use of h1 &#8211; h6, in reasonable order. <strong>Use the different headline levels to create a meaningful hierarchy</strong> &#8211; this way, if you are using a screen reader like Voice Over for example (built into Mac), users can skip through links, headlines, or other interactive elements. This is much faster than going through all the content to find something specific.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="538" src="https://shiftmag.dev/wp-content/uploads/2023/09/web-accessibility-1024x538.png?x73249" alt="" class="wp-image-1629" srcset="https://shiftmag.dev/wp-content/uploads/2023/09/web-accessibility-1024x538.png 1024w, https://shiftmag.dev/wp-content/uploads/2023/09/web-accessibility-300x158.png 300w, https://shiftmag.dev/wp-content/uploads/2023/09/web-accessibility-768x403.png 768w, https://shiftmag.dev/wp-content/uploads/2023/09/web-accessibility.png 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading"><span id="try-using-only-a-keyboard-for-a-few-minutes-a-day">Try using only a keyboard for a few minutes a day</span></h2>



<p><strong>Please describe the importance of proper heading structure in web content and how it contributes to accessibility.</strong></p>



<p><strong>Josefine</strong>: Part of semantic HTML is also the use of h1 &#8211; h6, in reasonable order. Use the different headline levels to create a meaningful hierarchy &#8211; this way, if you are using a screen reader like Voice Over for example (built into Mac), users can skip through links, headlines, or other interactive elements. This is much faster than going through all the content to find something specific.</p>



<p><strong>Why is keyboard accessibility important, and how can developers ensure that all interactive elements on a website can be navigated using a keyboard?</strong></p>



<p><strong>Josefine</strong>: Keyboard Accessibility means that users can not only navigate a page with a mouse, but also <strong>use the keyboard, tab key, and arrows to navigate</strong>. A lot of assistive technology works in a similar way as the keyboard, so it opens up your content to a large audience. It’s also great for general user experience, as it can be much faster than using the mouse.</p>



<p>A few things to look out for in terms of keyboard accessibility:</p>



<ul class="wp-block-list">
<li>Make sure all interactive elements are focussable, and the focus state is visible (and has enough contrast),</li>



<li>Make sure the functionality you would get through the hover effect is also applied for keyboard users,</li>



<li>The reading order should be the same as when browsing through a page with the mouse: in English, that would be top to bottom, left to right.</li>
</ul>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Try it yourself: try only using a keyboard for a few minutes a day, visit your favorite web pages, and try to get around. Can be a nice learning experience.</p>
</blockquote>



<h2 class="wp-block-heading"><span id="web-accessibility-improves-ux-performance-and-seo">Web Accessibility improves UX, performance, and SEO</span></h2>



<p><strong>Web accessibility best practices and guidelines can evolve over time. How do developers can stay up-to-date with the latest developments in web accessibility?</strong></p>



<p><strong>Josefine</strong>: That’s a good question. Some things change over time, but actually, most things stay consistent. <strong>A great place to start is the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank" rel="noreferrer noopener">WCAG</a></strong> &#8211; the web content accessibility guidelines. Those are the rules to follow when making sure web pages and apps are accessible. A nice blog to follow is also the <a href="https://www.a11yproject.com/" target="_blank" rel="noreferrer noopener">A11y Project</a> &#8211; if something did change drastically, you would surely find out there.</p>



<p><strong>How does web accessibility benefit not only users with disabilities but also website owners and developers?</strong></p>



<p><strong>Josefine</strong>: That’s the beauty of it, really: implementing web accessibility benefits all of us! Despite making a big difference for folks with disabilities, it also<strong> improves general user experience, performance, and likely search engine optimization</strong>. As a website owner, this will benefit your business as it increases traffic and makes your users happy; making your website accessible can help broaden your reach and offer your services to a wider audience. </p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>If implemented correctly, web accessibility can help make the code more readable and easier to maintain, which benefits web developers. So: Win win win <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/263a.png" alt="☺" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
</blockquote>
<p>The post <a href="https://shiftmag.dev/web-accessibility-josefine-schaefer-1476/">Josefine Schaefer: Accessibility improves UX, performance, code readability, and maintenance</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>How to use code to deliver your best tech talk ever with Jhey Tompkins</title>
		<link>https://shiftmag.dev/tech-talk-jhey-tompkins-804/</link>
		
		<dc:creator><![CDATA[Antonija Bilic Arar]]></dc:creator>
		<pubDate>Tue, 20 Jun 2023 13:13:00 +0000</pubDate>
				<category><![CDATA[Event]]></category>
		<category><![CDATA[Frontend]]></category>
		<category><![CDATA[creative coding]]></category>
		<category><![CDATA[Jhey Tomkins]]></category>
		<category><![CDATA[public speaking]]></category>
		<category><![CDATA[Shift Miami]]></category>
		<category><![CDATA[tech talks]]></category>
		<guid isPermaLink="false">https://shiftmag.dev/?p=804</guid>

					<description><![CDATA[<p>Jhey wanted to turn the idea of obligatory slide deck upside down by delivering his talks - in the browser.</p>
<p>The post <a href="https://shiftmag.dev/tech-talk-jhey-tompkins-804/">How to use code to deliver your best tech talk ever with Jhey Tompkins</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-post-featured-image"><img loading="lazy" decoding="async" width="2100" height="1400" src="https://shiftmag.dev/wp-content/uploads/2023/06/jhey_tomkins-shift_miami-scaled.jpeg?x73249" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" style="object-fit:cover;" srcset="https://shiftmag.dev/wp-content/uploads/2023/06/jhey_tomkins-shift_miami-scaled.jpeg 2100w, https://shiftmag.dev/wp-content/uploads/2023/06/jhey_tomkins-shift_miami-300x200.jpeg 300w, https://shiftmag.dev/wp-content/uploads/2023/06/jhey_tomkins-shift_miami-1024x683.jpeg 1024w, https://shiftmag.dev/wp-content/uploads/2023/06/jhey_tomkins-shift_miami-768x512.jpeg 768w" sizes="auto, (max-width: 2100px) 100vw, 2100px" /></figure>


<p>At tech conferences, you usually expect to learn more about a specific technology or a tool, hear more about how to ship better software, be more productive, or learn about emerging trends in the industry. <strong>Not how to use coding to become better at &#8211; public speaking!</strong></p>



<p>That&#8217;s why&nbsp;<a href="https://jhey.dev/" target="_blank" rel="noreferrer noopener">Jhey Tompkins&#8217;</a>&nbsp;presentation at the Shift conference in Miami blew away the audience. Jhey not only told but showed the audience how to use <strong>creative coding with JavaScript</strong> &#8211; using code to create art and multimedia content &#8211; to deliver highly entertaining and interactive talks.&nbsp;</p>



<h2 class="wp-block-heading"><span id="bringing-ideas-to-life-with-code">Bringing ideas to life with code</span></h2>



<p>Jhey used to work at Google, Uber, Nike, and Monzo but describes himself only as &#8220;a web developer that thrives on bringing ideas to life with code.&#8221; And brought ideas to the life he did at the stage at Shift, interacting with his slides in real-time via voice and hand gestures with his phone and even giving the audience a chance to participate by popping emojis over his slides.&nbsp;</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683" src="https://shiftmag.dev/wp-content/uploads/2023/06/jhey_tomkins-1024x683.jpeg?x73249" alt="" class="wp-image-855" srcset="https://shiftmag.dev/wp-content/uploads/2023/06/jhey_tomkins-1024x683.jpeg 1024w, https://shiftmag.dev/wp-content/uploads/2023/06/jhey_tomkins-300x200.jpeg 300w, https://shiftmag.dev/wp-content/uploads/2023/06/jhey_tomkins-768x512.jpeg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption"><em>Photo: Filip Popovic</em></figcaption></figure>



<p>After you&#8217;ve seen it, it&#8217;s hard to believe Jhey only started exploring the idea of this talk about a year ago. He admits this talk at Shift Miami <em>Supercharge your skills with creative coding, Volume VIII: Make it pop! </em>was the best in this series.</p>



<h2 class="wp-block-heading"><span id="building-slides-is-hard">Building slides is hard</span></h2>



<p>And he did start his public speaking journey by building slide decks, just like everyone else starts:&nbsp;</p>



<p><em>Building slide decks is hard, whatever the format or the tool you use.</em>&nbsp;</p>



<p><em>My goal is to do something different for every talk I do. With slides, it takes a long time to design news slides every time. </em></p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>In the end, no matter how much time I would spend doing the design, it never turned out just like I wanted it to. <strong>It takes work to show your personality through slides!</strong></p>
<cite>Jhey Tompkins</cite></blockquote>



<p>He used to get a lot of advice on how to make his slides pop by using animations, this or that element, this tool, or the other. But slides were just not it for him:</p>



<p><em>It&#8217;s all boring. I wanted to turn the idea of the slide deck upside-down.</em> </p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Why not do it in the browser?&nbsp;</p>
<cite>Jhey Tompkins</cite></blockquote>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Supercharge your skills with creative coding vol. VIII - Jhey Tompkins" width="500" height="281" src="https://www.youtube.com/embed/88D6jLHFw3Q?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<h2 class="wp-block-heading"><span id="would-you-like-to-see-20-slides-and-walls-of-code">Would you like to see 20+ slides and walls of code?</span></h2>



<p>Learning public speaking and becoming confident on stage is a journey, Jhey says. His journey started by learning how not to do a tech talk from <strong>Chet Haase</strong> and his talk &#8220;Top Tips for Terrible Tech Talks&#8221;.&nbsp;</p>



<p><em>The takeaway from that talk for me was to try and be a person in the room. Would you like to see 20+ slides with blocks of text or massive walls of code? Make it less formal. Make it engaging!</em></p>



<p><em><strong>You can always see how good your presentation is by checking out the faces of people in the audience.</strong> No matter how good you find your content is, if they&#8217;re checking their Instagram while you speak….</em></p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Top Tips for Terrible Tech Talks by Chet Haase" width="500" height="281" src="https://www.youtube.com/embed/DtP9jjQJjt8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<h2 class="wp-block-heading"><span id="know-your-content-inside-out">Know your content inside out</span></h2>



<p>Asked to share a tip or two for engineers to improve public speaking, Jhey offers simple but universally true advice &#8211; just be yourself.&nbsp;</p>



<p><em>It&#8217;s a personal journey. It was a personal journey for me too.</em></p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><em>&nbsp;I can&#8217;t tell people how to do it. But once you start doing it, you find out who you are, what you like, and if you want doing public speaking at all or not. If you do, you become better the more you do it.</em></p>
<cite>Jhey Tompkins</cite></blockquote>



<p>The biggest thing, he adds, is <strong>knowing your content inside out</strong> and trying and testing different things to find out who you are and what you want to say:</p>



<p><em>I know who I am. I simply present who I am and what I know.&nbsp;</em></p>
<p>The post <a href="https://shiftmag.dev/tech-talk-jhey-tompkins-804/">How to use code to deliver your best tech talk ever with Jhey Tompkins</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>On fetishizing frameworks and everything old becoming new again with CSS Wizardry&#8217;s Harry Roberts</title>
		<link>https://shiftmag.dev/frameworks-tools-harry-roberts-456/</link>
		
		<dc:creator><![CDATA[Anastasija Uspenski]]></dc:creator>
		<pubDate>Tue, 16 May 2023 14:00:16 +0000</pubDate>
				<category><![CDATA[Frontend]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[CSS Wizardry]]></category>
		<category><![CDATA[developer tools]]></category>
		<category><![CDATA[Harry Roberts]]></category>
		<guid isPermaLink="false">https://shiftmag.dev/?p=456</guid>

					<description><![CDATA[<p>Everything old is new again, and we’ve already seen some of the largest and most prominent frameworks return to the ideas and solutions of yesteryear. </p>
<p>The post <a href="https://shiftmag.dev/frameworks-tools-harry-roberts-456/">On fetishizing frameworks and everything old becoming new again with CSS Wizardry&#8217;s Harry Roberts</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></description>
										<content:encoded><![CDATA[<figure class="wp-block-post-featured-image"><img loading="lazy" decoding="async" width="1200" height="630" src="https://shiftmag.dev/wp-content/uploads/2023/05/Harry-Roberts-1.png?x73249" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" style="object-fit:cover;" srcset="https://shiftmag.dev/wp-content/uploads/2023/05/Harry-Roberts-1.png 1200w, https://shiftmag.dev/wp-content/uploads/2023/05/Harry-Roberts-1-300x158.png 300w, https://shiftmag.dev/wp-content/uploads/2023/05/Harry-Roberts-1-1024x538.png 1024w, https://shiftmag.dev/wp-content/uploads/2023/05/Harry-Roberts-1-768x403.png 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></figure>


<p>CSS Wizardry&#8217;s Consultant Performance Engineer, <strong>Harry Roberts</strong>, has been a professional developer for 14 years and says he finds it funny how <strong>old trends in technology have become new again</strong>. He comments on developers&#8217; tendency to get distracted by new frameworks again and again, and tend to fetishize frameworks. Oh, and he does not love the fact that <strong>everything is going JavaScript and into the browser.</strong><br> <br>As a Consultant Performance Engineer at CSS Wizardry, Harry also helps companies improve website speed and optimize front-end development. </p>



<p>Roberts has worked with some of the most prominent and respected global companies and organizations, including Google, the BBC, the Financial Times, and the United Nations. His<strong> </strong>meticulous and analytical approach has made him a<strong> go-to expert in the field</strong>, and he regularly speaks at conferences worldwide to share his knowledge with the technical community.</p>



<p>We&#8217;ll also share Harry&#8217;s insights, including his perspective <strong>on choosing the right tools for you and your team</strong> and whether the market needs so many tools. So if you&#8217;ve ever wondered whether you need all those developer tools, keep reading – we&#8217;ve got you covered.</p>



<h2 class="wp-block-heading"><span id="on-working-at-big-companies-and-impact">On working at big companies and impact</span></h2>



<p><strong>Harry</strong>: Honestly? Some of the most meaningful work I&#8217;ve done has been <strong>with much smaller companies</strong> where you can affect way more significant change. It&#8217;s probably not a very &#8220;rock and roll&#8221; and exciting answer, but some of <strong>the most impactful work happens on smaller teams</strong>. Because it&#8217;s a small environment, your impact is way more significant. </p>



<p>But working for BBC before the Olympics, was inspiring. It was stressful but exciting, and working with the UN &#8211; you know you&#8217;re doing something good.</p>



<h3 class="wp-block-heading"><span id="on-website-speed-issues-impacting-business-in-the-millions-of-dollars">On website speed issues impacting business in the millions of dollars</span></h3>



<p><strong>Harry:</strong> It varies dramatically for some companies. </p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Companies leave hundreds of thousands of dollars on the table yearly because they’re getting site speed wrong.</p>
<cite>Harry Roberts, CSS Wizardry</cite></blockquote>



<p>Most companies aren’t aware of how serious it is. The way I try to describe it is &#8211; if the roof blows off the top of your house, you notice it immediately, and you fix it immediately. </p>



<p>However, if the insulation in your roof isn’t perfect, someone might tell you you can save 500 euros per year on your heating bill if you put in insulation, but for you, it kinda works well enough for now. So for companies, it’s that kind of thing. Their roof blows off, and they fix it immediately, but it’s harder to notice slowdowns that might happen for 12 months.</p>



<p>So I’ve worked this before, where a simple 300 ms speed up would have made them an extra 8 million pounds a year, and I’ve worked with a client this year where a <strong>500 ms speed up would make them an extra 11,5 million euros a year</strong>. These numbers are enormous, but it’s all because of lost sales. It’s not like someone took 11,5 million euros out of a bank. </p>



<p>It’s a simple case of them earning that much extra. It’s not as urgent if you’re missing out. It’s critical if you’re losing money. So many clients don’t panic until they hear those numbers and see how big they can be. </p>



<h2 class="wp-block-heading"><span id="on-developer-tools-making-life-easier-or-more-complicated">On developer tools making life easier or more complicated </span></h2>



<p><strong>Harry:</strong> I don’t think it makes it more complicated, no. Most developers can pick the subset of tools that suits them and their day-to-day work, safely ignoring anything superfluous.  <strong>The more significant fear is the obsession with frameworks rather than developer tools</strong>. </p>



<h3 class="wp-block-heading"><span id="on-favorite-developer-dools">On favorite developer dools</span></h3>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="610" src="https://shiftmag.dev/wp-content/uploads/2023/05/webpagetest-1024x610.png?x73249" alt="" class="wp-image-631" srcset="https://shiftmag.dev/wp-content/uploads/2023/05/webpagetest-1024x610.png 1024w, https://shiftmag.dev/wp-content/uploads/2023/05/webpagetest-300x179.png 300w, https://shiftmag.dev/wp-content/uploads/2023/05/webpagetest-768x458.png 768w, https://shiftmag.dev/wp-content/uploads/2023/05/webpagetest.png 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption"><em>WebPageTest, one of the tools Harry couldn&#8217;t live without.</em></figcaption></figure>



<p><strong>Harry: </strong>100% DevTools, in whatever browsers you’re working and testing in. Beyond that, a good command of whatever text editor you use and any useful plugins. For more peripheral development work (i.e., not actively writing code), solid foundational command line knowledge is constructive: <strong>Git, basic Bash/Zsh, etc</strong>. As a Performance Engineer, I also have tools like <strong>WebPageTest</strong> (a wrapper around DevTools anyway) that I couldn’t live without. </p>



<h2 class="wp-block-heading"><span id="on-developers-being-fascinated-by-every-new-framework-and-tool">On developers being fascinated by every new framework and tool? </span></h2>



<p><strong>Harry:</strong> Firstly, don’t be! We fetishize frameworks, and they often get implemented on projects before they’ve stood the test of time elsewhere. </p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><strong>Everything old is new again</strong>, and we’ve already seen some of the largest and most prominent frameworks return to the ideas and solutions of yesteryear. <br><br>Some frameworks’ most significant initial selling points are now almost universally regarded as anti-patterns.</p>
<cite>Harry Roberts, CSS Wizardry</cite></blockquote>



<p>U-turns at the scale are pretty terrifying. Instead, <strong>look at the problems you must solve and choose the most straightforward available tool</strong>. <strong>Focus on the fundamentals, and the rest will follow. </strong><br><br>(Harry is not the only one highlighting the focus on the fundamentals, <a href="https://shiftmag.dev/on-everything-but-kubernetes-with-kelsey-hightower-463/">Kelsey Hightower said exactly the same in his interview for ShiftMag!</a>)</p>



<h2 class="wp-block-heading"><span id="on-disappointement-that-everything-is-going-into-javascript">On [disappointement that] everything is going into JavaScript</span></h2>



<p><strong>Harry:</strong> It used to be that a user visited a URL, their browser requested a page, and the server built the page and sent it back. It was the norm, and it worked very, very well. Folk decided to improve this for many reasons by shifting the workload to make it more like a user visiting a URL, requesting a near-empty page, receiving it from the server,<strong> </strong>asking for potential megabytes of JavaScript, running the JavaScript, and then building the page in the browse<strong>r</strong>. </p>



<p>I mean, on what planet is that going to be faster?! (Note: not Earth, as we’ve learned.) </p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Developers made this a lot worse when<strong> they forgot that HTML exists and went to extraordinary lengths </strong>to rebuild native, accessible, fast browser features in woefully subpar JavaScript.</p>
<cite>Harry Roberts, CSS Wizardry</cite></blockquote>



<p>That’s a lot of work (and code) to do a much worse job than we were five to 10 years ago! Thankfully, people have started to notice that this new way it’s better, and more considered solutions are slowly coming to the fore. That is reassuring! </p>



<h2 class="wp-block-heading"><span id="on-predicting-tech-trends">On predicting tech trends </span></h2>



<p><strong>Harry:</strong> I&#8217;ve been thinking about this a lot. Trends move fast. And my career has always been based on something other than trends. In a way, I&#8217;m dull. Certain things are just fundamental to how the web works. So I&#8217;ve always bet on soft.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>I&#8217;ve always gone with the reliable way things work. And I&#8217;ve felt like some miserable old man in the last five years.</p>
<cite>Harry Roberts, CSS Wizardry</cite></blockquote>



<p>Everything&#8217;s really going JavaScript and into the browser, and I&#8217;ve always felt uneasy about that. But it turns out that the new trend is going along with the old ways but in a better way. <strong>I find it interesting that everything old is new again</strong>. And I&#8217;ve been a developer professionally for 14 years. I&#8217;ve seen a lot of changes and trends. They progressed fast, but they&#8217;re sometimes the right thing to do. </p>



<p>So over the next 12 months, we&#8217;ll see a bit of a return to, well, not necessarily basics, but more advanced ways of doing the old things. <strong>Developers have gotten more insightful and more mature</strong>. What I&#8217;m going to be focusing on, I have yet to learn! I need to start thinking about where I want to position myself in the next 12 months. But the industry is beginning to mature, so we won&#8217;t need to move as fast. Indeed, from a site speed perspective, the industry is moving as fast as ever, and I can&#8217;t comment on anything beyond my field.</p>



<h3 class="wp-block-heading"><span id="on-shift-conference">On Shift conference</span></h3>



<p>Harry Roberts is a long-time supporter of the <strong><a href="https://shift.infobip.com/" target="_blank" rel="noreferrer noopener">Infobip Shift conference</a></strong>. A few years ago, he participated as one of the speakers, and is coming back to Zadar this September.</p>



<blockquote class="wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow">
<p>Shift stands out as a rare gem in a world of cookie-cutter tech conferences. <br><br>Listening to insightful talks from the brightest minds of today&#8217;s tech scene while surrounded by the enchanting history of a town built nearly two millennia ago, you&#8217;d be hard-pressed to find a more inspiring blend of past and future. <br>Oh, and it&#8217;s the most fun you&#8217;ll have all year!</p>
<cite>Harry Roberts, 2019</cite></blockquote>
<p>The post <a href="https://shiftmag.dev/frameworks-tools-harry-roberts-456/">On fetishizing frameworks and everything old becoming new again with CSS Wizardry&#8217;s Harry Roberts</a> appeared first on <a href="https://shiftmag.dev">ShiftMag</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Page Caching using Disk: Enhanced 

Served from: shiftmag.dev @ 2026-04-05 17:27:07 by W3 Total Cache
-->