Collective #720
Publikováno: 14.7.2022
CSS-only shaders * Siter.io * Statements Vs. Expressions * Building your website using Jigsaw
The post Collective #720 appeared first on Codrops.

Inspirational Website of the Week: Sapporo Nishiyama
An artful design with lovely typography and smooth effect details. Our pick this week.

Our Sponsor
Fully Managed Cloud & Web Hosting
Not every project is created equal, so why should every hosting plan? At Liquid Web, we specialize in understanding your goals and engineering a tailored solution that helps you reach your business goals faster.

Holograms, light-leaks and how to build CSS-only shaders
Robb Owen shows how to get a shiny WebGL look without actually using WebGL, but CSS blend modes only.

The Public APIs List
A community-curated and updated resource for public APIs.

Siter.io
Build a website visually with a powerful no code online editor tool. Design websites in the browser and host them online.

Lost Geometry 3D Illustrations
Huge set of 91 abstract 3D objects in various styles to bring a modern touch to your interfaces. PNG version is available for free.

The CSS behind Figma
A look at some interesting use-cases for CSS flexbox and grid in Figma app by Ahmad Shadeed.

Statements Vs. Expressions
In this blog post, you’ll learn about statements and expressions, and see how building an intuition about this can help solve practical problems.

Where’s the button? Designing for mode confusion
An interesting article on modes and when they can be useful or confusing.

Avoiding <img> layout shifts: aspect-ratio vs width & height attributes
Jake Archibald explores what’s the best technique to use in order to avoid layout shifts with images.

Building your website using Jigsaw
Learn how to build a website with the static site generator Jigsaw.

The Many Faces of Themeable Design Systems
Brad Frost takes a look at themeable design systems that are used to provide a flexible foundation for many diverse products.

GitHub Copilot and Open Source: A Love Story That Won’t End Well?
With Copilot, is Microsoft/GitHub taking too many liberties with the open source software that has been entrusted in their repositories? A very interesting read by Sasha Medvedovsky.

musicForProgramming();
Really great resource for good programming music! Also, a very nice website.

Funnel Easy
Create and export a funnel in seconds with this tool.

Clever CSS tricks
A very interesting thread by Steve Sewell where he collects cool CSS tricks employed by great sites.

Godlike
Godlike is a production-ready website component library for Framer that will save you tons of time on your projects.

PocketBase
PocketBase is an open source Go backend with realtime database, authentication, file storage and admin dashboard.

Designers Lobby
Designers Lobby is a curated collection of more than 1200 design resources and tools with over 60 categories handpicked from the web. By Nitin Singh.

Serve
Serve is a tool for developers to generate authenticated API endpoints with database queries.

The History of User Interfaces
A collection of classic user interface from 1973 to 2007. By Victor Ponamariov.

Style with Stateful, Semantic Selectors
If a state is important enough to indicate visually, it’s probably important enough to expose to assistive technologies. Learn how we can use that to create more robust styles. By Ben Myers.

CSS complexity: it’s complicated
There’s lots of places in CSS to have complexity, but we tend to focus on selectors most of the time. In this article, Bart Veneman takes a look at other places too.

Nx – The fastest growing monorepo solution in the JS ecosystem
Juri Strumpflohner on the great success of Nx, and what monorepos are.

RemoteFriendly
In case you didn’t know about it: Find the latest remote jobs in software engineering, design, management, customer service, and more.

Kreya
The cross-platform gRPC and REST GUI testing tool.

From Our Blog
Tiny Grid Layout Animation
A simple layout transition where a small grid animates to a larger view, using the Flip plugin from GreenSock.
The post Collective #720 appeared first on Codrops.