Collective #785
Inspirational Website of the Week: Portal Defi
A very cool, cyberpunk inspired design with interactive pixel distortion effects and stunning page transitions. Our pick this week.
Get inspired
From our sponsor Book this sponsorship
Wix Studio: Where creative freedom meets absolute efficiency
If you create for clients, this one's for you. Wix recently launched a new, end-to-end web creation platform for agencies and freelancers. 🎉 You can design, develop and deliver beyond your clients' expectations in a super efficient way.
Join the Waitlist
Photoshop's journey to the web
Adobe, in collaboration with Chrome, has brought a public beta of Photoshop to the web, using WebAssembly and various web technologies to overcome previous limitations and leverage the advantages of the web platform for accessibility, collaboration, and performance improvements.
Read it
The Ultimate Low-Quality Image Placeholder Technique
In this article Harry Roberts dives into the concept of Low-Quality Image Placeholders (LQIP) and their role in improving user experiences while waiting for images to load on web pages.
Read it
Coding an Interactive (and Damn Satisfying) Cursor: 7 Simple Steps + 2kb of Code
Ksenia Kondrashova shares how to create a cursor animation using HTML5 canvas and JavaScript in a step-by-step guide, covering topics such as setting up the canvas, tracking cursor position, creating a delay effect, forming a mouse trail, and more.
Read it
Classnames
This great site provides word lists categorized into different themes, each describing various aspects or qualities of things related to that theme, such as behavior, containment, likeness, order, an many more.
Check it out
The Absolute Minimum Every Software Developer Must Know About Unicode in 2023 (Still No Excuses!)
This article discusses the evolution of text encoding, focusing on Unicode and its importance in representing various languages and characters, the UTF-8 encoding, the concept of extended grapheme clusters, and the challenges in handling text encoding in programming languages.
Read it
Pure CSS low-poly: Aquatic Life
Maciek Fitzner is passionate about exploring 3D shapes using pure CSS, using trigonometry to manipulate divs and create various geometric forms, including aquatic animals, starfish, and more, while occasionally delving into 2D and experimenting with trigonometric calculations for creative design.
Check it out
JSONGenerator
The JSON Generator offers a streamlined approach to creating random JSON data using templates, ensuring consistency, rapid data generation, and adherence to standards like RFC 8259 and ECMA-404.
Check it out
tttexture: A Collection of Free Grunge, Vintage & Concrete Textures
This collection offers high-resolution textures from aged walls and concrete surfaces, suitable for enhancing designs, available for free use in personal or commercial projects.
Check it out
Living Color: Designing through synesthesia
Annice Jumani, a design director, reflects on how her experience with synesthesia, where she sees letters and numbers as colors, influenced her learning and perspective in design, ultimately turning what she once thought was a pitfall into a unique superpower that she now embraces and uses in her work.
Read it
Astro 3D View Transitions Demo
Maxi Ferreira showcases a demo using React Three Fiber to create an animated 3D model that persists across page navigations. You can find the GitHub repo here. Note that View Transitions are currently primarily supported on Chromium browsers.
Check it out
Karektar
A tool that let's you create your own bitmap font with character preview and character editor.
Check it out
Effectively loading ads without impacting page speed
Learn how to effectively load ads without impacting your page speed, ensuring a seamless user experience, and maximizing revenue opportunities for website owners. By Markus Bordihn.
Read it
Simplify sharing with built-in APIs and progressive enhancement
Andy Bell discusses the challenges of implementing social sharing components on websites and presents an alternative approach using the Web Share API and the Clipboard API, with a focus on accessibility and progressive enhancement.
Check it out
The invisible problem
In this article, Scott Jenson aims to shed light on the challenges and issues related to text editing on mobile devices, emphasizing how these challenges have been poorly addressed compared to desktop text editing.
Read it
Perfect text outline/knockout text
Sixian shows three implementations for creating a knockout text effect without stroke overlap or edge artifacts, comparing text-stroke, text-shadow, and SVG feMorphologycode>, ultimately favoring the SVG approach.
TypeScript Origins: The Documentary
A film featuring key contributors and community members discussing the history and adoption of TypeScript in the programming world, produced by Keyboard Stories.
Watch it
Introducing Message Decoder
Zane Shannon spent 2023 exploring innovative ideas for computer operating systems, focusing on improving notification systems, particularly on macOS, and ultimately developed Message Decoder, a Mac app that streamlines the handling of one-time passcodes.
Check it out
GIANT 105
A beautiful interactive picture book project made with WebGL by 302chanwoo.
Check it out
In-Page Links for Content Navigation
In-page links, often embedded in the table of contents, help users navigate to specific content sections on the same page. While research showed increased user familiarity with the design pattern, carefully consider content structures before implementation.
Read it
CSS Nesting and the Cascade
Jen Simmons writes about how the Safari Technology Preview 179 introduces an update to CSS Nesting, allowing relaxed parsing behavior for nested selectors.
Read it
User flows
A great place to find user flow patterns and video recordings for improving customer experience.
Check it out
Epic Easing
Quickly and easily generate easing curves for ease, spring, and bounce animations. Utilize animation presets or create your own custom animation curve, spring, or bounce. Instantly export to CSS, SCSS, Objective-C, and Swift.
Check it out
Waves
An amazing waves demo made with Three.js. You can find the code here.
Check it out
From our blog
Animating Multi-Page Navigations with Browser View Transitions and Astro
A beginner-friendly guide that walks you through the use of the Browser View Transitions API with Astro for a smoother navigation experience.
Check it out
From our sponsor
From Petals to Pixels: Craft Stunning Sites with Divi
Whether you're crafting a site for a client or helping a friend launch her florist shop online, Divi makes it effortlessly simple. Turn visions into vibrant websites with ease and efficiency. Every bloom deserves a spotlight; let Divi be the stage!
Try it for free