Collective #618
Publikováno: 13.8.2020
Elder.js * Serverless: I'm a big kid now * The Endless Doomscroller * Building a Design System Library
The post Collective #618 appeared first on Codrops.
Inspirational Website of the Week: Chris Wilcock
An outstanding class act that incorporates fresh typography with a plethora of inspiring and fluid animations.
Elder.js
Elder.js is an opinionated static site generator and web framework for Svelte built with SEO in mind.
Build websites with the most popular WordPress theme in the world
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Changing World, Changing Mozilla
Mozilla wants to become something “that excites people and shapes the agenda of the internet”. But sadly at the cost of letting go approximately 250 people from Firefox devtools, MDN, WebXR/Firefox Reality and more.
How To Configure Application Color Schemes With CSS Custom Properties
In this article, Artur Basak introduces a modern approach on how to set up CSS Custom Properties that respond to the application colors by dividing colors into three levels.
Vertical text alignment in buttons and inputs
Learn how to center text vertically in buttons and input elements using the padding and line-height CSS properties.
Device Motion Depth
A really cool mobile demo that simulates depth with device motion by Marco Ludovico Perego.
Gradient angles in CSS, Figma & Sketch
Learn how gradient angles in graphics programs differ from gradients created with CSS. By Nils Binder.
Layout Shift GIF Generator
A Cumulative Layout Shift (CLS) visualiser that helps identify problematic layout shifts in the viewport on mobile and desktop.
Supercharging <input type=number>
Kilian Valkhof shows how to build a better number input type.
Different versions of your site can be running at the same time
An interesting article by Jake Archibald on the problems of different live site versions and their solutions.
1Keys – How I Made a Piano in only 1kb of JavaScript
Frank Force shares how he coded a 1kb piano, the winner of the JS 1024 competition.
Pixeltrue
SVG illustrations and Lottie animations, available for free for personal and commercial use (MIT License).
Building a Design System Library
Some fundamental things that everyone should consider when designing a shared library within Figma.
10 great open source games from GMTK Game Jam 2020
The staff picks from the GMTK Jam 2020 with source code to play, hack on, or learn from.
The Endless Doomscroller
Benjamin Grosser made an endless stream of doom, without all the specifics that can “… offer up an opportunity for mindfulness about how we’re spending our time online and about who most benefits from our late night scroll sessions”.
Previewed
Choose from ready-made templates to generate mockups, screenshots and video previews and for your app.
PDF: Still Unfit for Human Consumption, 20 Years Later
Interesting article: Research spanning 20 years proves PDFs are problematic for online reading.
Serverless: I’m a big kid now
Learn about the different flavors of Serverless, and the pros and cons of each.
Let’s build a Full-Text Search engine
In case you missed it: Artem Krylysov shows how to build a FTS engine for searching across millions of documents in less than a millisecond.
Chrome Music Lab
Chrome Music Lab is a website that makes learning music more accessible through fun, hands-on experiments.
How I Structure My CSS (for Now)
Matthias Ott shares his current take on CSS structure.
Generative Logo Design
Some great insight into the journey of creating a generative logo for Components AI.
Form design best practices
Andrew Coyle provides some best practices that serve to provide a shorthand when designing forms.
Some more CSS comics
Some more CSS comics by Julia Evans.
The post Collective #618 appeared first on Codrops.