Posts

Showing posts with the label Web Development

From Code to Connection: Building Trust and Beauty for Luka.international

Image
ᴵⁿ ᵗᶦᵐᵉˢ ᵒᶠ ᶜˡᶦᵐᵃᵗᵉ ᵉᵐᵉʳᵍᵉⁿᶜʸ https://climateclock.world/ Introduction In the dynamic realm of web development, creating a website that captivates and connects demands both technical precision and a keen focus on user experience. My project, luka.international , serves as a living laboratory for mastering these skills, evolving from a basic framework into a vibrant platform through dedicated coding and design. By integrating dynamic user reviews and refining its visual appeal, I've crafted a site that not only dazzles but also fosters trust and engagement. This essay chronicles the technical journey behind luka.international, exploring the enhancements made, challenges overcome, skills honed, and the broader impact of building a digital experience that bridges code and human connection. Made with Google Lighthouse Technical Enhancements The transformation of luka.international hinges ...

ᴷⁿᵒʷᴴᵒʷ I Use Structured Data to Connect with the Semantic Web ・ 𝔼𝕕𝕚𝕥𝕖𝕕

Image
ᴵⁿ ᵗᶦᵐᵉˢ ᵒᶠ ᶜˡᶦᵐᵃᵗᵉ ᵉᵐᵉʳᵍᵉⁿᶜʸ https://climateclock.world/ Welcome to my latest digital adventure! This time, I'm diving headfirst into a topic that's way cooler than it sounds — structured data . Trust me, this isn't just some geeky buzzword. It's the secret code behind how search engines really understand what your content is all about. Imagine the internet not as a chaotic mess of pages, but as a well-organized network of meaningful facts, connected like neurons in a giant brain. That’s the dream of the Semantic Web — and guess what? Structured data using schema.org is one of the key tools making it happen. Instead of stuffing data into messy inline tags, I’m all about that clean and futuristic vibe with JSON-LD (JavaScript Object Notation for Linked Data). It’s like writing a short story for machines, hidden in your site’s <head> . It tells Google, Bing, and all their friends exactly what your content means — not just how it looks. Think of it like...

Responsive HTML Image Maps - How to Fix Mobile Issues

Image
ᴵⁿ ᵗᶦᵐᵉˢ ᵒᶠ ᶜˡᶦᵐᵃᵗᵉ ᵉᵐᵉʳᵍᵉⁿᶜʸ https://climateclock.world/ The issue you're encountering likely stems from the use of an HTML image map (<map> and <area> tags) for creating clickable regions on the banner image. While image maps can work, they are not always the best choice for responsive design, especially on smartphones, because they rely on fixed pixel coordinates (coords) that don't scale well with different screen sizes or resolutions. Switching to a <div>-based layout with CSS positioning is a more modern and flexible approach for responsive design. Grok solution (works good for me) 💡 Alternative: Use SVG instead of <map> or ✅ Solution: Make it responsive using width: 100% and JavaScript or a plugin to scale coordinates. ChatGPT solutions

Drag & Drop Legacy

Image
ᴵⁿ ᵗᶦᵐᵉˢ ᵒᶠ ᶜˡᶦᵐᵃᵗᵉ ᵉᵐᵉʳᵍᵉⁿᶜʸ https://climateclock.world/ Modern internet browsers support the HTML5 Drag and Drop API by default, allowing drag-and-drop functionality without requiring additional JavaScript for basic operations. This means that elements can be made draggable using the draggable="true" HTML attribute, and browsers handle the default drag-and-drop behavior (e.g., dragging images, links, or text selections) without custom scripting. However, JavaScript is typically needed to customize or enhance the behavior beyond the browser's built-in defaults. Here’s a breakdown of newer internet browsers that support the HTML5 Drag and Drop API by default as of March 28, 2025: Google Chrome Version Support: Fully supported since version 4 (released 2010). Details: Chrome supports basic drag-and-drop operations for images, links, and text selections out of the box. The draggable attribute works natively, and default behaviors (like dragging a link to the address...

Luka Jagor 🏃‍♂️

Latest Runs