Marcel @_cyress

Senior Webentwickler (Freelancer) msdc.io Köln, Deutschland Joined June 2010

Tweets

1K
Followers

69
Following

366
Likes

538

Evil Martians @evilmartians

3 years ago

New CSS specifications are coming with powerful features for colors. @sitnikcode, in his new article, explains his 2 favorite features of the new specs: — OKLCH for declaring colors — Native color transformations in CSS evilmartians.com/chronicles/okl…

3 23 57 0 14

Download Image

Bramus @bramus

3 years ago

📣 PSA: As of Chrome 108, Chrome on Android will adjust its viewport resize behavior to no longer resize the Layout Viewport when the on-screen keyboard is shown. This aligns the behavior of Chrome on Android with most other browser+platform combinations developer.chrome.com/blog/viewport-…

4 44 148 0 42

Vercel @vercel

3 years ago

Introducing Turbopack, the successor to Webpack. ◆ ~700x faster than Webpack ◆ 10x faster than Vite ◆ Native incremental architecture built with Rust ◆ Support for React Server Components ◆ Support for TS, JSX, CSS & more Now open-source in Alpha. vercel.com/blog/turbopack

125 1K 5K 0 238

Dan Hollick @DanHollick

3 years ago

Do you just click different blending modes until it sort of looks right? Well, that probably won't change after you read this but at least you probably won't use Lighten or Darken again. (you should bookmark this thread and use it as a reference)

83 8K 29K 0 22K

Download Image

Bramus @bramus

3 years ago

What if I told you this demo right here is powered by nothing but HTML and CSS? Yep that’s right, not a single line of JavaScript (*) in sight! 🤩 Demo on @CodePen: codepen.io/bramus/full/GR… (*) Except for a polyfill that’s being loaded

Bramus @bramus

3 years ago

5 2 81 0 11

Download Image

7 95 562 0 204

Download Video

Una 🇺🇦 @Una

3 years ago

🚨 Container queries (size & cq units) landed in the latest stable Chromium and Safari 🚨 ☺️ AND there's a bunch of new updates to the polyfill! 🧠 Learn how to use this CQ today & work across browsers: - Firefox 69+ - Chrome & Edge 79+ - Safari 13.4+ developer.chrome.com/blog/cq-polyfi…

1 38 124 0 21

Stefan Judis @stefanjudis

3 years ago

TIL browsers don't ship :focus outlines anymore. All of them use :focus-visible today. 👏 I did some digging when the user-agent styles changed: Chromium: Feb 2021 Firefox: Feb 2021 Safari: Dec 2021 Thanks, @CSSInRealLife for sharing this! 🔗 css-irl.info/detecting-css-…

2 13 96 0 18

Download Image

Jen Simmons @jensimmons

3 years ago

If you missed the news yesterday — Safari 16 is out! Container Queries Subgrid Passkeys AVIF Shared Workers Shadow Realms Overscroll Behavior `resolution` media query accessible `display: contents` Web Inspector Extensions Motion Path text-align-last… webkit.org/blog/13152/web…

11 54 269 0 16

Chris Heilmann codepo8.bsky.social @codepo8

3 years ago

👉🏼 “Building the main navigation for a website” 🔗 web.dev/website-naviga… Cool to see @mmatuzo's article going live - was excited to do a quick review a few weeks ago. Good stuff.

1 6 10 0 5

jhey ʕ•ᴥ•ʔ @jh3yy

3 years ago

Future CSS Tip 🔮 Responsively Anchor elements to each other without JS or worrying about DOM position using the Anchoring API 🤯 It works out positions based on fallbacks you define 😎 And this makes sure your anchored element stays in view 🙌 Demo link/code/exp below 👇😁

8 52 336 0 124

Download Video

Vitaly Friedman 🇺🇦🏳️‍🌈 @vitalyf

3 years ago

Of all the design systems, I keep being impressed by IBM's Carbon Design System (carbondesignsystem.com), with a very bold, functional, accessible, modern design. And oh my, those buttons!

1 3 16 0 7

Download Image

jhey ʕ•ᴥ•ʔ @jh3yy

3 years ago

✨ CSS Tip! (or Trick 🤔) ✨ Use the mask property to mask(hide) parts of an element Use it to create a faux 3D content scroller 🤿 .track { mask: radial-gradient(transparent 0 30%, black 30%) 50% 20vmin / 250% 100%, } 👉 codepen.io/jh3y/pen/gOeXg… via @CodePen

30 382 2K 0 873

Download Video

Shu @shuding_

3 years ago

If you prefer not to use flickering animations, the Ken Burns effect is also very impressive: { 0% { opacity: 0; clip-path: inset(5%); transform: scale(111.11%) } 100% { opacity: 1; clip-path: inset(0); transform: scale(1) } }

1 3 111 0 60

Download Video

Matt Perry @mattgperry

3 years ago

🚀 Introducing Scroll, Motion One's new scroll-linked animations API! This mighty 2.5kb function can link Motion One's animate() and timeline() animations to page scroll. Or use a callback to animate canvas, 3D, or anything you can imagine. Get started: motion.dev/dom/scroll

27 120 1K 0 410

Download Video

David K 🎹 @DavidKPiano

3 years ago

One of my favorite quick refactoring techniques is to keep the old function/method around and assert ✅ that the outputs are the same in development. This lets you validate refactors before writing tests. I use this with the Strangler Fig pattern: docs.microsoft.com/en-us/azure/ar…

33 186 2K 0 341

Download Image

Defensive CSS @DefensiveCSS

3 years ago

Have you ever tried using position: sticky with CSS grid and it didn't work? You need to override the default behavior of CSS grid by applying align-self: start to the aside. ✍️ Find out more in this defensive tip: defensivecss.dev/tip/position-s…

7 49 380 0 146

Download Video

John Lindquist @johnlindquist

3 years ago

1 1 2 0 0

Download Image

Lea Verou, PhD @LeaVerou

3 years ago

This is big. After 2 years of hard work, @svgeesus and I are finally “officially” releasing our library Color.js into the wild! 🌈🎨🎉 My blog post: lea.verou.me/2022/06/releas… Chris’ blog post: svgees.us/blog/colorjs-r… Color.js: colorjs.io npm: npmjs.com/package/colorj…

25 228 868 0 142

Download Image

Deno @deno_land

3 years ago

Fresh is a new full stack web framework for Deno. It sends zero JavaScript to the client by default and has no build step. Today we are releasing the first stable version of Fresh. 🍋🚀 deno.com/blog/fresh-is-…