Bookmarks (196)

PushIn.js: A Lightweight Parallax / Dolly / Push In Effect for Web Pages — Simulates an interactive dolly-in or push-in animation when scrolling. The homepage is itself a live demo.

CSS: Absolutely Positioning Things Relatively — An approachable look at using CSS grid to render complex webpages responsively. Plenty of visuals and code examples to help things along.

Building an Interactive Starry Backdrop for Content — A thorough walkthrough/tutorial for building your own drop-in React component that brings an interactive visual backdrop to your site.

Five Things I'd Want to See Improved in WordPress Core — If you could write your own roadmap for the next few years of WordPress, what would it look like?

Eva Icons: A Set of Beautifully Crafted Open Source UI Icons — Bit of an older project that includes 240+ icons in SVG or PNG format, each with an outline or fill version, and you can also select an animation type on hover.

AnimatiSS: A Small Collection of Drop-in CSS Animations — Choose from ten styles of animation (rotate, scale, slide, etc.), then select from one of the many variations of the chosen style.

LunchboxJS: A Custom Vue 3 Renderer for Three.js — Straight in with a snazzy full-page demo here! The docs may prove more useful after checking it out.

Decrease Notification Development Time with Automation API and Builder — Product can easily build the templates and automation rules in our UI, and engineers can call it via our single send API.

The Era of Rebellious Web Design is Here — This is something of a case study on the provocative work of agency ‘Code and Theory’, looking at their approach to editorial web design — a notably bold ‘website as app’ aesthetic, described here as ‘web brutalism’. An interesting bit of food for thought on how things don’t have to always follow a set visual path.

Lesser-Known and Underused CSS Features in 2022 — A look at which properties and selectors are lesser-known or should be used more often — the likes of currentColor, scroll-padding, isolation, and contain-intrinsic-size pop up here. I learnt something.

The Surprising Truth About Pixels and Accessibility — Pixels or rems? This comprehensive blog post aims to answer this question once and for all. You’ll learn about the accessibility implications, and how to determine the best unit to use in any scenario.

WordPress 6.0 “Arturo” Released — Boasts “nearly 1,000 enhancements and bug fixes”, including new design tools, performance improvements, and accessibility enhancements. This post also highlights how WordPress is the CMS behind a huge 42% of sites globally.

An API for Fast, Beautiful Web Fonts — Here’s an update on the Google Fonts CSS API, looking at how it works, how to use it, and how it can efficiently deliver your web fonts.

▶  Secret Mechanisms of CSS — This talk digs into some common misunderstandings about CSS, to see if we can fill in some gaps in our mental model of the language.

The Balance Has Shifted Away From SPAs — “how the context has changed in recent years to give MPAs more of an upper hand against SPAs”

Web Applications 101 — A single article that touches on almost everything involved in building a modern Web site from the simplest of HTML pages through to server-side rendering (SSR) and static-site generation (SSG). Not a tutorial but gives you the broader, architectural picture.

How to Create Dynamic Forms Using FormArray in Angular — Have you ever booked movie tickets online? If yes, then you have used a dynamic form. In this article, you’ll learn to create a dynamic form in Angular and also hear a high-level explanation of other useful classes of Angular reactive forms.

New WebKit Features in Safari 15.5 — Safari 15.5 is here, with support for the inert attribute, the worker-src Content Security Policy directive, APIs for implementing new viewport units in WKWebView, and many fixes.

Reagraph: WebGL Graph Visualizations for React — A high-performance network graph visualization library that uses WebGL under the hood for both 2D and 3D rendering options. Here’s a basic sandbox example you can play with.

DFlex: A Drag-and-Drop Library for All JS Frameworks — This is a vanilla JavaScript solution with a focus on good performance and easy implementation. Try some demos here.

Parvus: Accessible Lightbox with No Dependencies — I love how it says not to use overlays on Web pages but if you have to, use this! There’s a CodePen example.

Horizon UI: A Beautiful Open Source Admin Template for Chakra UI and React — Includes 70+ dark/light components covering a whole slew of UI possibilities. View a live preview here.

The State of CSS in 2022 — An introduction and overview of the CSS features and browser changes on slate for the rest of the year. There’s a lot to look through here, including :has(), Viewport unit variants, subgrid, color-mix(), and much more. It’s a solid high level look at what you need to know about writing CSS in 2022 and beyond, with examples/resources...