Bi-Weekly Frontend News

Collective #768

June 9, 2023

Inspirational Website of the Week: DA! Festival

A beautiful web design with a cool interactive header and some element stickiness plus lovely marquee designs. Our pick this week.

Get inspired

This content is sponsored via BuySellAds

Use Kintone to Spend Less Time on the Back-end

Kintone is a powerful web database, providing developers with a convenient environment to test out front-end coding ideas, without having to run a backend.

Find out more

An introduction to @scope in CSS

This article introduces the use of @scope in CSS, a feature that allows styling based on proximity and setting lower boundaries for selectors.

Read it

Image of particles in 3D using Three.js

Learn how to create an image with amazing particles using Three.js in this video tutorial by Robin Payot.

Watch it

Burning 🔥 DOM element with WebGL

Ksenia Kondrashova shows how to burn annoying modals with WebGL in this great demo.

Check it out

Reducing Complexity in Front End Development

Michelle Barker discusses the importance of reducing complexity in front-end development by evaluating and managing third-party dependencies, considering native web platform features, and being mindful of the impact on performance and maintainability.

Read it

AI Means More Developers

Matt Rickard discusses how developers are trending towards higher abstractions and using AI to generate code faster and with less skills needed, which can increase productivity and salaries for experienced developers, but may also squeeze out those in the middle who are unable to manage dependencies or code quality.

Read it

refine.new: Open-source enterprise application platform for serious web developers

Refine is an open source, React-based web application framework for rapid development. It’s headless by design, thereby offering unlimited styling and customization options.

Check it out

Modern CSS in Real Life

Chris Coyier shares "Modern CSS in Real Life", a blog post that originated as a presentation given at RenderATL.

Check it out

Watch Transitions in Slow Motion in Chrome’s DevTools

Jim Nielsen highlights the usefulness of Chrome's devtools' "Animations" panel, which allows developers to slow down animations in the browser, helping them troubleshoot and analyze view transitions in slow motion for better understanding and debugging.

Check it out

Create your own personal jQuery!?

Chris Ferdinandi demonstrates how to create a small jQuery-like library using the JavaScript class pattern and modern methods, allowing developers to simplify and author code similar to jQuery without relying on the jQuery library itself.

Read it

Investigating the impact of HTTP3 on network latency for search

Learn how Dropbox has found that using HTTP3, which uses UDP instead of TCP, could reduce network latency for users in Europe and Asia by up to three times, allowing users faster access to their files.

Read it

OverlayScrollbars

A JavaScript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.

Check it out

How AI may impact software architecture

Andrew Carr writes how AI tools are already speeding up coding, and could potentially impact the design of software architecture by making it more data-driven, enabling faster prototype testing of backends, allowing more nuanced trade-offs, and generating useful diagrams from the code.

Read it

Native Frame Rate Playback

A super interesting article on how Netflix has addressed the issue of judder, or choppy video playback, caused by frame rate conversion on HDMI source devices by adopting a variety of solutions, including matching the HDMI output frame rate with the content frame rate and converting the presentation time stamp value of each video frame to minimise the effect of judder.

Read it