Weekly Web Design & Development News: Collective #431
Here's the 431st Weekly Web Design & Development Collective that aims to introduce fresh new, trendy and easy-to-use web design & development resources (freebies, codes, graphics, tools, inspiration, etc) from the past week. Have fun with it and remember to share with your friends.
Web Design & Development News: Collective #431
Web Voice Processor
A library for real-time voice processing in web browsers:
- Uses the Web Audio API to access microphone audio.
- Leverages Web Workers to offload compute-intensive tasks off of the main thread.
- Converts the microphone sampling rate to 16kHz, the de facto standard for voice processing engines.
- Provides a flexible interface to pass in arbitrary voice processing workers.
Dynamic grid
A look at using auto-fit and a few other little things to make a dynamic grid layout.
Mac Animation
Animation that looks like the bottom navigation of the Mac operating system.
Bootstrap Starter Kit
A starter template for websites using Bootstrap 5 and Webpixels CSS next to the Eleventy static site generator.
MindAR
A lightweight library for web augmented reality.
- Support Image tracking and Face tracking
- Written in pure javascript, end-to-end from the underlying computer vision engine to frontend
- Utilize gpu (through webgl) and web worker for performance
- Developer friendly. Easy to setup. With AFRAME extension, you can get your app starts with only 10 lines of codes
[Download]
daedalOS
Desktop environment in the browser.
[Download]
CSS Perspective Hover Effect
A sliding text with pure CSS. Creates an illusion that the text is moving when once hovered. Try customizing the line-height and height props as per your need.
symbiote.js
Ultralight and ultrapowerful library to create widgets, organise micro-frontends, build reusable embeddable components and libraries.
Timetheft.js
Simple and opinionated library to handle countdown in Javascript, this library would run in opinionated way and steal your defined date with just a String! Or you can call it countdown normally.
Ferdi
Ferdi helps you organize how you use your favourite apps by combining them into one application.
[Download]
Twitter Alt-Text Viewer
A set of custom CSS rules to make alt-text visible on Twitter's desktop web interface.
[Download]
MetaMask Browser Extension
The MetaMask browser extension enables browsing Ethereum blockchain enabled websites.
[Download]
Modern Web Landing Page using SASS & JS
A set of custom CSS rules to make alt-text visible on Twitter's desktop web interface.
[Download]
2022 New Year Fireworks
See the Pen 2022 New Year Fireworks! by Jacob Foster (@Alca) on CodePen.
Reverse-Scrolling Columns with CSS Scroll-Timelinel (+ JS ScrollTimeline Polyfill Fallback)
See the Pen Reverse-Scrolling Columns with CSS Scroll-Timelinel (+ JS ScrollTimeline Polyfill Fallback) by Bramus (@bramus) on CodePen.
The Dots vs The Bars
See the Pen The Dots vs The Bars by Temani Afif (@t_afif) on CodePen.
100 Characters Pack
A set of flat graphics required, 100 cartoon characters and over 400 coolest objects.
[Download]
Slideshow with Filter Reveal Effect
A slideshow page layout with a filter enhanced navigation effect.
